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

12
S2
На сайте с 12.06.2011
Offline
83
1917

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

вот код.

<!DOCTYPE html>

<html lang="en" >

<head>

<meta charset="utf-8" />

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

<link rel="stylesheet" href="css/layout.css" type="text/css" media="screen">

<link rel="stylesheet" href="css/menu.css" type="text/css" media="screen">

</head>

<body>

<div class="container">

<ul id="nav">

<li><a href="#"><img src="http://www.cyberforum.ru/images/t1.png" /> Home</a></li>

<li><a href="#" class="sub" tabindex="1">

<img src="http://www.cyberforum.ru/images/t2.png" />HTML/CSS</a><img src="http://www.cyberforum.ru/images/up.gif" alt="" />

<ul>

<li><a href="#"><img src="http://www.cyberforum.ru/images/empty.gif" />Link 1</a></li>

<li><a href="#"><img src="http://www.cyberforum.ru/images/empty.gif" />Link 2</a></li>

<li><a href="#"><img src="http://www.cyberforum.ru/images/empty.gif" />Link 3</a></li>

<li><a href="#"><img src="http://www.cyberforum.ru/images/empty.gif" />Link 4</a></li>

<li><a href="#"><img src="http://www.cyberforum.ru/images/empty.gif" />Link 5</a></li>

</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;

}

Seredniy
На сайте с 17.03.2008
Offline
251
#1

<meta charset="utf-8" />

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

<link rel="stylesheet" href="css/layout.css" type="text/css" media="screen">

<link rel="stylesheet" href="css/menu.css" type="text/css" media="screen">

</head>

<body>

<div class="container">

<ul id="nav">

<li><a href="#"><img src="http://www.cyberforum.ru/images/t1.png" /> Home</a></li>

<li><a href="#" class="sub" tabindex="1">

<img src="http://www.cyberforum.ru/images/t2.png" />HTML/CSS</a><img src="http://www.cyberforum.ru/images/up.gif" alt="" />

<ul>

<li><a href="#"><img src="http://www.cyberforum.ru/images/empty.gif" />Link 1</a></li>

<li><a href="#"><img src="http://www.cyberforum.ru/images/empty.gif" />Link 2</a></li>

<li><a href="#"><img src="http://www.cyberforum.ru/images/empty.gif" />Link 3</a></li>

<li><a href="#"><img src="http://www.cyberforum.ru/images/empty.gif" />Link 4</a></li>

<li><a href="#"><img src="http://www.cyberforum.ru/images/empty.gif" />Link 5</a></li>

</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;

}

<li><a href="#"><img src="http://www.cyberforum.ru/images/empty.gif" />Link 1</a></li>

<li><a href="#"><img src="http://www.cyberforum.ru/images/empty.gif" />Link 2</a></li>

<li><a href="#"><img src="http://www.cyberforum.ru/images/empty.gif" />Link 3</a></li>

<li><a href="#"><img src="http://www.cyberforum.ru/images/empty.gif" />Link 4</a></li>

<li><a href="#"><img src="http://www.cyberforum.ru/images/empty.gif" />Link 5</a></li>

#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;

}

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

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

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

S2
На сайте с 12.06.2011
Offline
83
#3

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

P1
На сайте с 24.01.2014
Offline
16
#4

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

Копирайтинг: стройка, авто и другие темы (http://danilov-text.ru) Примеры текстов (http://danilov-text.ru/portfolio.php)
S2
На сайте с 12.06.2011
Offline
83
#5
pretender11:
Оно не сворачивается, а подгружается заново по новому адресу в своем первоначальном виде.

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

vlad00777
На сайте с 24.12.2009
Offline
119
#6

sotex2, просто

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

Верстка. Качественно! Адаптивная, резиновая, с параллаксом и прочими плюшками. В ЛС.
Z0
На сайте с 03.09.2009
Offline
735
#7

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

vlad00777
На сайте с 24.12.2009
Offline
119
#8
ziliboba0213:
Тут без php никак

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

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

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

vlad00777
На сайте с 24.12.2009
Offline
119
#10
VHS:
Прошу пример в студию, как css можно определить текущую категорию и развернуть ее.

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

12

Авторизуйтесь или зарегистрируйтесь, чтобы оставить комментарий