Выдвижное меню на css

112

sotex2

22 июня 2014, 18:37

1929

при нажатии на одну из категорий выпадает список подкатегорий, и когда нажимаешь на одну из подкатегорий выполняется данный запрос, но при этом меню сворачивается. как сделать, чтоб при переходе на данную подкатегорию меню не сворачиволось движок dle 10.2

вот код.

<!DOCTYPE html>

<head>

<title>CSS3 onclick Vertical Metal menu | Script Tutorials</title>

</head>

<body>

<ul>

</ul>

</li>

</ul>

</div>

</body>

</html>

Код CSS

#nav {

border:3px solid #3e4547;

box-shadow:2px 2px 8px #000000;

border-radius:3px;

-moz-border-radius:3px;

-webkit-border-radius:3px;

}

#nav, #nav ul {

list-style:none;

padding:0;

width:200px;

}

#nav ul {

position:relative;

z-index:-1;

}

#nav li {

position:relative;

z-index:100;

}

#nav ul li {

margin-top:-23px;

-moz-transition: 0.4s linear 0.4s;

-ms-transition: 0.4s linear 0.4s;

-o-transition: 0.4s linear 0.4s;

-webkit-transition: 0.4s linear 0.4s;

transition: 0.4s linear 0.4s;

}

#nav li a {

background-color:#d4d5d8;

color:#000;

display:block;

font-size:12px;

font-weight:bold;

line-height:28px;

outline:0;

padding-left:15px;

text-decoration:none;

}

#nav li a.sub {

background:#d4d5d8 url("../images/down.gif") no-repeat;

}

#nav li a + img {

cursor:pointer;

display:none;

height:28px;

left:0;

position:absolute;

top:0;

width:200px;

}

#nav li a img {

border-width:0px;

height:24px;

line-height:28px;

margin-right:8px;

vertical-align:middle;

width:24px;

}

#nav li a:hover {

background-color:#bcbdc1;

}

#nav ul li a {

background-color:#eee;

border-bottom:1px solid #ccc;

color:#000;

font-size:11px;

line-height:22px;

}

#nav ul li a:hover {

background-color:#ddd;

color:#444;

}

#nav ul li a img {

background: url("../images/bulb.png") no-repeat;

border-width:0px;

height:16px;

line-height:22px;

margin-right:5px;

vertical-align:middle;

width:16px;

}

#nav ul li:nth-child(odd) a img {

background:url("../images/bulb2.png") no-repeat;

}

#nav a.sub:focus {

background:#bcbdc1;

outline:0;

}

#nav a:focus ~ ul li {

margin-top:0;

-moz-transition: 0.4s linear;

-ms-transition: 0.4s linear;

-o-transition: 0.4s linears;

-webkit-transition: 0.4s linears;

transition: 0.4s linear;

}

#nav a:focus + img, #nav a:active + img {

display:block;

}

#nav a.sub:active {

background:#bcbdc1;

outline:0;

}

#nav a:active ~ ul li {

margin-top:0;

}

#nav ul:hover {

display:block;

}

251

Seredniy

22 июня 2014, 18:57

#1

<title>CSS3 onclick Vertical Metal menu | Script Tutorials</title>

</head>

<body>

<ul>

</ul>

</li>

</ul>

</div>

</body>

</html>

#nav {

border:3px solid #3e4547;

box-shadow:2px 2px 8px #000000;

border-radius:3px;

-moz-border-radius:3px;

-webkit-border-radius:3px;

}

#nav, #nav ul {

list-style:none;

padding:0;

width:200px;

}

#nav ul {

position:relative;

z-index:-1;

color:#000;

font-size:11px;

line-height:22px;

}

#nav ul li a:hover {

background-color:#ddd;

color:#444;

}

#nav ul li a img {

background: url("../images/bulb.png") no-repeat;

border-width:0px;

height:16px;

line-height:22px;

margin-right:5px;

vertical-align:middle;

width:16px;

}

#nav ul li:nth-child(odd) a img {

background:url("../images/bulb2.png") no-repeat;

}

#nav a.sub:focus {

background:#bcbdc1;

outline:0;

}

#nav a:focus ~ ul li {

margin-top:0;

-moz-transition: 0.4s linear;

-ms-transition: 0.4s linear;

-o-transition: 0.4s linears;

-webkit-transition: 0.4s linears;

transition: 0.4s linear;

}

#nav a:focus + img, #nav a:active + img {

display:block;

}

#nav a.sub:active {

background:#bcbdc1;

outline:0;

#nav ul li:nth-child(odd) a img {

background:url("../images/bulb2.png") no-repeat;

}

#nav a.sub:focus {

background:#bcbdc1;

outline:0;

}

#nav ul li:nth-child(odd) a img {

background:url("../images/bulb2.png") no-repeat;

}

#nav a.sub:focus {

background:#bcbdc1;

outline:0;

}

#nav ul li:nth-child(odd) a img {

background:url("../images/bulb2.png") no-repeat;

}

#nav a.sub:focus {

background:#bcbdc1;

outline:0;

}

Надеюсь вы меня поняли точно так же, как и я вас. Оформите старпост читаемо и вам помогут

1

Wordpress и другие CMS: правки, настройка, верстка и натяжка шаблонов, разработка сайтов "под ключ" (/ru/forum/1008050)

R

92

rerighter

22 июня 2014, 18:58

#2

Seredniy, +1. ТС, научитесь пользоваться http://jsfiddle.net/

S2

112

sotex2

22 июня 2014, 19:04

#3

поставил меню раздвижное на css, при нажатии на одну из подкатегорий запрос выполняется, но при этом меню сворачивается. как сделать, чтоб не сворачивалось

P1

16

pretender11

22 июня 2014, 19:30

#4

Оно не сворачивается, а подгружается заново по новому адресу в своем первоначальном виде.

Копирайтинг: стройка, авто и другие темы (http://danilov-text.ru) Примеры текстов (http://danilov-text.ru/portfolio.php)

S2

112

sotex2

22 июня 2014, 19:44

#5

pretender11:
Оно не сворачивается, а подгружается заново по новому адресу в своем первоначальном виде.

так как исправить

119

vlad00777

22 июня 2014, 21:54

#6

sotex2, просто

ответ такой же как и вопрос, научитесь пост оформлять, хоть ссылку дайте

Верстка. Качественно! Адаптивная, резиновая, с параллаксом и прочими плюшками. В ЛС.

Z0

757

ziliboba0213

22 июня 2014, 22:04

#7

Чистым css такое не получится, т.к.( как я понял) происходит переход на другой урл... Тут без php никак :)

119

vlad00777

23 июня 2014, 08:54

#8

ziliboba0213:
Тут без php никак

Вы чего? Тут css или в крайнем случае Js будет с головой, если Тс что-то покажет.

142

VHS

23 июня 2014, 10:59

#9

vlad00777:
Вы чего? Тут css или в крайнем случае Js будет с головой, если Тс что-то покажет.

Прошу пример в студию, как css можно определить текущую категорию и развернуть ее.

119

vlad00777

23 июня 2014, 11:08

#10

VHS:
Прошу пример в студию, как css можно определить текущую категорию и развернуть ее.

Вы не поняли вопроса ТС. Как я понял у него есть подменю и еще раз подменю, при наведении мышки на последнее меню, предыдущее скрывается, а не должно. Вроде так, нигде не было написано о "текущей категории".

Переиграть и победить: как анализировать конкурентов для продвижения сайта

Open AI тестирует память для ChatGPT