Выпадающее вверх меню
Создана: 14 Июня 2010 Пон 11:09:13.
Раздел: "Веб-строительство и интернет-проекты"
Сообщений в теме: 35, просмотров: 8006
-
Уважаемые интернет -гуру. пожалуйста подскажите.
Есть такое меню
HTML
<ul id="cssmenu">
<li><a href="#">новости</a>
</li>
<li><a href="#">модели</a>
<ul>
<li><a href="#">Дети</a></li>
<li><a href="#">Юноши с 16 лет</a></li>
<li><a href="#">Девушки с 16 лет</a></li>
</ul>
</li>
<li><a href="#">проекты</a>
<ul>
<li><a href="#">Ссылка 1</a></li>
<li><a href="#">Ссылка 2</a></li>
</ul>
</li>
<li><a href="#">свободный кастинг</a>
<ul>
<li><a href="#">Ссылка 1</a></li>
<li><a href="#">Ссылка 2</a></li>
</ul>
</li>
<li><a href="#">преподаватели</a>
<ul>
<li><a href="#">Ссылка 1</a></li>
<li><a href="#">Ссылка 2</a></li>
</ul>
</li>
<li><a href="#">о нас</a>
<ul>
<li><a href="#">Ссылка 1</a></li>
<li><a href="#">Ссылка 2</a></li>
</ul>
</li>
<li><a href="#">наши работы</a>
<ul>
<li><a href="#">Публикации</a></li>
<li><a href="#">Наши работы</a></li>
</ul>
</li>
</ul>
и СSS
ul#cssmenu {
width:705px;
margin: 0;
border: 0 none;
padding: 0;
list-style: none;
background: #ffffff;
height: 20px;
font: bold 12px/28px Verdana, Arial;
}
ul#cssmenu li {
margin: 0;
border: 0 none;
padding: 0;
float: left;
display: inline;
list-style: none;
position: relative;
height: 25px;
}
ul#cssmenu ul {
margin: 0;
border: 0 none;
padding: 0;
width: 160px;
list-style: none;
display: none;
position: absolute;
top: 30px;
left: 0;
}
ul#cssmenu ul:after {
clear: both;
display: block;
font: 1px/0px serif;
content: ".";
height: 0;
visibility: hidden;
}
ul#cssmenu ul li {
width: 150px;
float: left;
display: block !important;
display: inline;
}
/* Main Menu */
ul#cssmenu a {
border: 0px;
padding: 0 10px;
float: none !important;
float: left;
display: block;
border-bottom: #000000 1px solid;
background: #ffffff;
color: #000000;
font: bold 12px/28px Verdana, Arial;
text-decoration: none;
height: auto !important;
height: 1%;
}
/* Main Menu Hover */
ul#cssmenu a:hover,
ul#cssmenu li:hover a,
ul#cssmenu li.iehover a {
background: #000000;
color:#ffffff;
}
/* Second Menu */
ul#cssmenu li:hover li a,
ul#cssmenu li.iehover li a {
float: none;
background: #000000;
color: #ED1B24;
}
/* Second Menu Hover */
ul#cssmenu li:hover li a:hover,
ul#cssmenu li:hover li:hover a,
ul#cssmenu li.iehover li a:hover,
ul#cssmenu li.iehover li.iehover a {
border-top: 1px solid #FFFFFF;
background: #000000;
color:# ED1B24;
}
ul#cssmenu ul ul {
display: none;
position: absolute;
top: 0;
left: 170px;
}
ul#cssmenu li:hover ul ul,
ul#cssmenu li.iehover ul ul {
display: none;
}
ul#cssmenu li:hover ul,
ul#cssmenu ul li:hover ul,
ul#cssmenu li.iehover ul,
ul#cssmenu ul li.iehover ul {
display: block;
}
Проблема в том, что я никак не могу сделать его выпадающем вверх, хотя думаю что это возможно....через z-index или отрицательные значения margin. Подскажите если можете. Вопрос жизни и смерти -
Если подойти к решению проблемы "в лоб", то можно сделать так:
1.Код:
ul#cssmenu ul {
top: -55px;
}
Но это будет работать только для тех пунктов, у которых два выпадающих подпункта.
а для пункта "модели" сделать отдельный ID и так, чтобы предыдущий селектор не перкрывал его свойство top:
Код:
<ul id="menu3">
<li><a href="#">Дети</a></li>
<li><a href="#">Юноши с 16 лет</a></li>
<li><a href="#">Девушки с 16 лет</a></li>
</ul>
Код:
#menu3{
top: -80px !important;
}
Н а уж если хочется сделать красиво, то над кодом надо как-то поработать. Мне лениво. -
-
-
Ладно бог с ним с z- индексом, будь добр как светоч разума и маяк русской интелегенции, подскажи еще....есть код
ul#cssmenu ul li {
width: 150px;
float: left;
display: block !important;
display: inline;
он задает, ширину выпадающего списка...точнее ширину той области которая выделяется....как бы мне его поменять для каждого пункта...с учетом того, что я присвоил уже каждому пункту id menu1? menu2 и прочее....очень сильно обяжешь -
А вот здесь я что-то вопроса не понял
"его" - это кого? тебе как-то надо каждый пункт меню индиdидуально оформить что ли? Если да, то что именно должно различаться? Вообще, это твой собственный код, или ты откуда-то взял и теперь модифицируешь?franc-tireur писал :....как бы мне его поменять для каждого пункта... -
Ну изначально, взял на каком то сайте...но он уже сильно модифицирован....
По поводу того, что я хочу...то есть смотри я задаю высоту выпадения для каждого пункта...ну точнее для каждого списка выпадающего....и так же в зависимости от длины слов, я хочу задать разную ширину выделения для каждого из этого списков....сейчас это задается кодом
ul#cssmenu ul li {
width: 150px;
float: left;
display: block !important;
display: inline;
}
как мне его применить с своим значением width для
<li><a href="#">наши работы</a>
<ul>
<li><a href="#">Публикации</a></li>
<li><a href="#">Наши работы</a></li>
</ul> -
-
А поподробнее), если можно...а то я совсем новичок в этом деле)...а про выпадающее меню на CSS+ HTML, мало, что есть...то есть смотри....есть HTML
<li><a href="#">модели</a>
<ul id="menu2">
<li><a href="#">Дети</a></li>
<li><a href="#">Юноши с 16 лет</a></li>
<li><a href="#">Девушки с 16 лет</a></li>
</ul>
</li>
присвоен id - menu2 (по твоему бесценному совету!)
Как мне теперь конкретно для этого списка прописать
ul#cssmenu ul li {
width: 150px;
float: left;
display: block !important;
display: inline; -
Ну тогда в CSS будет так:
Код:
ul#menu1 {
/* и здесь задавай, какие тебе нужно свойства*/
}
ну и так же для menu2 и сколько там надо.
Только у тебя может быть ситуация, когда твои новые ID будут перекрываться свойствами уже ранее объявленными селекторами, которые могут иметь больший "вес". Тогда для своих индивидуальных блочков к нужным тебе параметрам примени опцию important!.
По-хорошему переработать бы тебе CSS, чтобы не было такой мешанины, а то уж больно громоздкий код получается. Можно все это дело отсматривать через FireBug файрфокса - там сразу видно будет, какие свойства работают у элементов, а какие чем перекрываются. -
Код согласен громоздкий и неаккуратный получается, я конечно попробую его почистить...в принципе в специальный программах я такое меню делал быстро, но проблема в том, что это будет единственное меню на сайте, поэтому требуется, что бы оно работало независимо от включенных -отключенных флеш и ява скриптов
-
-
А как понять, "автоматом?". Можно только сегенерировать меню специальными програми. Вот есть программа, сам пользовался, Sothink DHTML Menu. Там можно сгенерить самые разные менюшки. Также генерится код для вставки на страницу. Только вот если надо будет потом что-то добавить, или убрать - придется снова воспользоваться этой программой для модификации.
-
-