Вертикальное CSS меню
4698
18
Посоветуйте пример вертикального css меню (кроссброузерное).
Т.е. главные пункты идут сверху вниз, а подпункты показываются сбоку и тоже открываются сверху вниз.
Нашел один пример, но в FF работает, а в IE показывается только первый уровень.
p.s. в CSS не силен. Нашел еще http://www.alexilin.ru/dynamic-menu-without-java/ но как его сделать вертикальным не знаю
Т.е. главные пункты идут сверху вниз, а подпункты показываются сбоку и тоже открываются сверху вниз.
Нашел один пример, но в FF работает, а в IE показывается только первый уровень.
p.s. в CSS не силен. Нашел еще http://www.alexilin.ru/dynamic-menu-without-java/ но как его сделать вертикальным не знаю
Mad_Dollar
guru
hamster
activist
Я в принципе нашел работающее меню. Только бы мне объяснили чего надо поправить, чтобы оно открывалось не справа, а слеваПомогите ?
Вот CSS код:
/* CSS Document */
ul#navmenu-v,
ul#navmenu-v li,
ul#navmenu-v ul {
margin: 0;
border: 0 none;
padding: 0;
width: 160px;
list-style: none;
}
ul#navmenu-v:after {
clear: both;
display: block;
font: 1px/0px serif;
content: ".";
height: 0;
visibility: hidden;
}
ul#navmenu-v li {
float: left;
display: block !important;
display: inline;
position: relative;
border:#003366 1px solid;
}
ul#navmenu-v li ul li {
border:none;
border-bottom:#FFFFFF 2px solid;
}
/* Root Menu */
ul#navmenu-v a {
padding: 0 6px;
display: block;
background: #003366;
color: #FFFFFF;
font: bold 12px/28px Verdana, Arial;
text-decoration: none;
height: auto !important;
height: 1%;
}
ul#navmenu-v a:hover,
ul#navmenu-v li:hover a,
ul#navmenu-v li.iehover a {
background: #FFFFFF;
color: #000000;
}
/* 2nd Menu */
ul#navmenu-v li:hover li a,
ul#navmenu-v li.iehover li a {
background: #003366;
color: #FFFFFF;
border:#003366 1px solid;
}
ul#navmenu-v li:hover li a:hover,
ul#navmenu-v li:hover li:hover a,
ul#navmenu-v li.iehover li a:hover,
ul#navmenu-v li.iehover li.iehover a {
background: #FFFFFF;
color: #003366;
border:#003366 1px solid;
}
ul#navmenu-v ul,
ul#navmenu-v ul ul,
ul#navmenu-v ul ul ul {
display: none;
position: absolute;
top: 0;
left: 161px;
}
ul#navmenu-v li:hover ul ul,
ul#navmenu-v li:hover ul ul ul,
ul#navmenu-v li.iehover ul ul,
ul#navmenu-v li.iehover ul ul ul {
display: none;
}
ul#navmenu-v li:hover ul,
ul#navmenu-v ul li:hover ul,
ul#navmenu-v ul ul li:hover ul,
ul#navmenu-v li.iehover ul,
ul#navmenu-v ul li.iehover ul,
ul#navmenu-v ul ul li.iehover ul {
display: block;
}
Вот CSS код:
/* CSS Document */
ul#navmenu-v,
ul#navmenu-v li,
ul#navmenu-v ul {
margin: 0;
border: 0 none;
padding: 0;
width: 160px;
list-style: none;
}
ul#navmenu-v:after {
clear: both;
display: block;
font: 1px/0px serif;
content: ".";
height: 0;
visibility: hidden;
}
ul#navmenu-v li {
float: left;
display: block !important;
display: inline;
position: relative;
border:#003366 1px solid;
}
ul#navmenu-v li ul li {
border:none;
border-bottom:#FFFFFF 2px solid;
}
/* Root Menu */
ul#navmenu-v a {
padding: 0 6px;
display: block;
background: #003366;
color: #FFFFFF;
font: bold 12px/28px Verdana, Arial;
text-decoration: none;
height: auto !important;
height: 1%;
}
ul#navmenu-v a:hover,
ul#navmenu-v li:hover a,
ul#navmenu-v li.iehover a {
background: #FFFFFF;
color: #000000;
}
/* 2nd Menu */
ul#navmenu-v li:hover li a,
ul#navmenu-v li.iehover li a {
background: #003366;
color: #FFFFFF;
border:#003366 1px solid;
}
ul#navmenu-v li:hover li a:hover,
ul#navmenu-v li:hover li:hover a,
ul#navmenu-v li.iehover li a:hover,
ul#navmenu-v li.iehover li.iehover a {
background: #FFFFFF;
color: #003366;
border:#003366 1px solid;
}
ul#navmenu-v ul,
ul#navmenu-v ul ul,
ul#navmenu-v ul ul ul {
display: none;
position: absolute;
top: 0;
left: 161px;
}
ul#navmenu-v li:hover ul ul,
ul#navmenu-v li:hover ul ul ul,
ul#navmenu-v li.iehover ul ul,
ul#navmenu-v li.iehover ul ul ul {
display: none;
}
ul#navmenu-v li:hover ul,
ul#navmenu-v ul li:hover ul,
ul#navmenu-v ul ul li:hover ul,
ul#navmenu-v li.iehover ul,
ul#navmenu-v ul li.iehover ul,
ul#navmenu-v ul ul li.iehover ul {
display: block;
}
Mad_Dollar
guru
Сам текст меню приведите - как он в документе описывается. А еще вам смотреть нужно поле float - оно рассказывает об обтекании следующих объектов (справа/слева/вразрыв).
А в чем проблема JS? там код то простенький - меняется только "видимость" подменю.
А в чем проблема JS? там код то простенький - меняется только "видимость" подменю.
artem2005
guru
ну как сказать простенький... если с энтузиазмом подойти...
hamster
activist
А зачем JS? Тут css сам скрывает и показывает вроде как.
<ul id="navmenu-v">
<li><a href="#">Вертикальное</a>
<ul>
<li><a href="#">Ссылка 1</a></li>
<li><a href="#">Ссылка 2</a></li>
</ul></li>
<li><a href="#">CSS</a>
<ul>
<li><a href="#">Ссылка 1</a></li>
<li><a href="#">Ссылка 2</a></li>
<li><a href="#">Ссылка 3</a></li>
<li><a href="#">Ссылка 4</a></li>
<li><a href="#">Ссылка 5</a></li>
</ul>
</li>
<li><a href="#">Меню</a>
<ul>
<li><a href="#">Ссылка 1</a></li>
<li><a href="#">Ссылка 2</a></li>
</ul></li>
</ul>
<ul id="navmenu-v">
<li><a href="#">Вертикальное</a>
<ul>
<li><a href="#">Ссылка 1</a></li>
<li><a href="#">Ссылка 2</a></li>
</ul></li>
<li><a href="#">CSS</a>
<ul>
<li><a href="#">Ссылка 1</a></li>
<li><a href="#">Ссылка 2</a></li>
<li><a href="#">Ссылка 3</a></li>
<li><a href="#">Ссылка 4</a></li>
<li><a href="#">Ссылка 5</a></li>
</ul>
</li>
<li><a href="#">Меню</a>
<ul>
<li><a href="#">Ссылка 1</a></li>
<li><a href="#">Ссылка 2</a></li>
</ul></li>
</ul>
Mad_Dollar
guru
А зачем JS? Тут css сам скрывает и показывает вроде как.Вы ошибаетесь - CSS - это стиль отображения объекта, описываемый атрибутами CSS. Один из атрибутов - видимость/невидимость меняет в моем примере JS-код. Сам CSS не может ничего менять после загрузки и применения к тексту. Вспомните, каким образом можно задать стиль для элемента - можно предварительно его описать в CSS-файле, а можно и в самом документе это сделать (не очень рационально).
Сейчас читают
Обмен/продажа детских вещей (часть 5)
375637
1000
Учительская, 9 НовосибирскСтройМонтаж (часть 2)
477685
1000
СЛИШКОМ умная женщина!
57156
323
quazare
activist
а можно и в самом документе это сделать (не очень рационально).но, очень полезно, когда пользователь открывает сохраненную страницу на жестком диске.
но очень бесполезно, когда пользователь грузит раз за разом один и тот же код, который может достигать приличных объёмов.
hamster
activist
А можно все таки ответ на вопрос? Какой именно флоат надо изменить?
но очень бесполезно, когда пользователь грузит раз за разом один и тот же код, который может достигать приличных объёмов.а что - правильно хранить один и тотже код стилей в одном файле, который достигает приличных объемов???
понятней можно вопросы задавать? чего куда где??
Mad_Dollar
guru
А можно все таки ответ на вопрос? Какой именно флоат надо изменить?у вас один float в стиле - видимо вот этот:
ul#navmenu-v li {
float: left; #видимо заменить на right - не знаю сработает или нет, попробуйте
display: block !important;
display: inline;
position: relative;
border:#003366 1px solid;
}
hamster
activist
Попробовал изменить флоат. Все осталось по прежнему.
ну с этим то помочь не проблема.
замени left: 161px; на left: -161px;
Есть пара вопросов.
1. Ты в курсе, что это меню не работает в IE?
2. Пользователя не будет раздражать мельтешение пунктов меню при случайном наведении курсора мыши?
В общем главный вопрос. Зачем тебе css-меню?
замени left: 161px; на left: -161px;
Есть пара вопросов.
1. Ты в курсе, что это меню не работает в IE?
2. Пользователя не будет раздражать мельтешение пунктов меню при случайном наведении курсора мыши?
В общем главный вопрос. Зачем тебе css-меню?
1) Для IE там есть хак с JS
2) Да вроде нормально
Хочу вынести все пункты меню на главную, но чтобы подпункты было видно только после нажатия на категорию.
2) Да вроде нормально
Хочу вынести все пункты меню на главную, но чтобы подпункты было видно только после нажатия на категорию.
Посоветуйте пример вертикального css меню (кроссброузерное).http://www.greenbee.su Меню сделал через список. Вся вёрстка на div и css без JavaScript прекрасно работает в IE и Opera, другие не тестировал, но думаю тоже будет работать.
Вся вёрстка на div и css без JavaScript прекрасно работает в IE и Opera, другие не тестировал, но думаю тоже будет работать.Цвета меняются, но никаких подменю там нет.
делай через
.style.display='block'
.style.display='none'
.style.display='block'
.style.display='none'
ТОП 5
1
4