Версия для печати темы
Нажмите сюда для просмотра этой темы в оригинальном формате
Форум программистов > Вёрстка веб-сайтов > Css меню помогите разобратся


Автор: Krintus 30.5.2010, 14:40
Срочно нужна помошь по созанию меню. как сделать что бы первое меню было открыто. Вторые открывались только по нажатию мышки. Ключевые vt. были более темного зеленого цвета, а когда ведешь по подменю то они подчеркивались

(стиль)


Код

<style type="text/css">
#menu_body li ul {display:none} /* Убираем подменю */ 
#menu_body li:hover ul, #menu_body li.over ul 
{ display: block } /* Делаем подменю видимым при наведении мыши */ 
#menu_body{ 
background: #0C3; 
width:302px

} 
/*#menu_body li 
{ display: block;} */ 
#menu_body a 
{ width:100%; } 

#menu_body ul li { 
list-style-type:none; 
border-bottom:1px solid #fff; 
margin-left:-40px; 
padding-left:7px 
} 

#menu_body ul li a { 
color:#fff; 
font-family:verdana,arial,sans-serif; 
text-decoration:none 
} 

#menu_body ul li ul li { 
border:0; 
list-style-type:square; 
color:#fff; 
list-style-position:inside 
} 

#menu_body ul li ul{ 
border-top:1px solid #fff; 
margin-left:-7px; 
padding-left:50px 
} 




( Само меню)

Код

<div class="leftcolums" style="float:right;"><div id="menu_body"; >


<ul id="ul1"> 
<li><a href="#">Земля и человечество</a> 
<ul> 
<li><a href="#">Мир глазами астронома</a></li> 
<li><a href="#">Планеты Солнечной системы</a></li> 
<li><a href="#">Звездное небо</a></li> 
<li><a href="#">Мир глазами географа</a></li>
<li><a href="#">Пояса Земли</a></li>
<li><a href="#">Мир глазами историка</a></li>
<li><a href="#">Когда и где?</a></li>
<li><a href="#">Прошлое и настоящее глазами эколога</a></li>
<li><a href="#">Сокровища земли под охраной человечества</a></li>
</ul> 
</li> 
<li><a href="#">Природа России</a> 
<ul> 
<li><a href="#">Равнины и горы России</a></li> 
<li><a href="#">Моря, озера и реки России</a></li> 
<li><a href="#">Зона арктических пустынь</a></li> 
<li><a href="#">Тундра</a></li> 
<li><a href="#">Леса Росии</a></li>
<li><a href="#">Лес и человек</a></li>
<li><a href="#">Зона степей</a></li>
<li><a href="#">Пустыни</a></li>
<li><a href="#">У черного моря</a></li>
<li><a href="#">Экологическое равновесие</a></li>
</ul> 
</li> 
<li><a href="#">Родной край - часть большой страны</a>
<ul> 
<li><a href="#">Нашь край</a></li> 
<li><a href="#">Поверхность нашего края</a></li> 
<li><a href="#">Водоемы нашего края</a></li> 
<li><a href="#">Наши подземные богатства</a></li>
<li><a href="#">Земля кормилица</a></li>
<li><a href="#">Жизнь леса</a></li>
<li><a href="#">Жизнь луга</a></li>
<li><a href="#">Жизнь пресного водоема</a></li>
<li><a href="#">Растениеводство в нашем крае</a></li>
<li><a href="#">Незаметные защитники урожая</a></li>
<li><a href="#">Животноводство в нашем крае</a></li>

</ul>
</li>
</ul>
</div></div>

Автор: Serhii 31.5.2010, 16:54
Без JavaScripta и DOM, я думаю, никак, и здесь куча ошибок. Если не горит, я вечером гляну..

Автор: Krintus 31.5.2010, 20:19
Буду очень признателен, если вы все объясните.

Автор: chilichacha 13.6.2010, 18:56
Задачи такого рода очень просто решаются с помощью milonoc меню
www.milonoc.com
Единственный момент - будет не нак просто разобраться, если не знаешь английского. 
Если знаешь - вообще никаких проблем.
НО - оно того стоит, рекомендую.Потратишь немного времени, но обеспечишь себя на будущее приличним инструментом для практически любых задач по менюхам
Понятное дело - не  панацея от ВСЕГО, но очень и очень приличная разработка

Добавлено через 38 секунд
Извини, опечатка - milonic
http://www.milonic.com

Автор: FightInGlory 20.6.2010, 11:25
Короче вот тебе меню, сделал. Работает в FF, GH, Opera, IE8. Чтоб работало в ie6 надо еще поиграться, но мне лень. В твой код до конца не вникал, может есть лишние теги или ошибки, но вроде работает так как ты хотел.

HTML
Код

<div class="leftcolums" style="float:right;"><div id="menu_body"; >
<ul> 
<li><a href="#">Земля и человечество</a> 
    <ul class="open"> 
        <li><a href="#">Мир глазами астронома</a></li> 
        <li><a href="#">Планеты Солнечной системы</a></li> 
        <li><a href="#">Звездное небо</a></li> 
        <li><a href="#">Мир глазами географа</a></li>
        <li><a href="#">Пояса Земли</a></li>
        <li><a href="#">Мир глазами историка</a></li>
        <li><a href="#">Когда и где?</a></li>
        <li><a href="#">Прошлое и настоящее глазами эколога</a></li>
        <li><a href="#">Сокровища земли под охраной человечества</a></li>
    </ul> 
</li> 
<li><a href="#">Природа России</a> 
    <ul class="close"> 
        <li><a href="#">Равнины и горы России</a></li> 
        <li><a href="#">Моря, озера и реки России</a></li> 
        <li><a href="#">Зона арктических пустынь</a></li> 
        <li><a href="#">Тундра</a></li> 
        <li><a href="#">Леса Росии</a></li>
        <li><a href="#">Лес и человек</a></li>
        <li><a href="#">Зона степей</a></li>
        <li><a href="#">Пустыни</a></li>
        <li><a href="#">У черного моря</a></li>
        <li><a href="#">Экологическое равновесие</a></li>
    </ul> 
</li> 
<li><a href="#">Родной край - часть большой страны</a>
    <ul class="close"> 
        <li><a href="#">Нашь край</a></li> 
        <li><a href="#">Поверхность нашего края</a></li> 
        <li><a href="#">Водоемы нашего края</a></li> 
        <li><a href="#">Наши подземные богатства</a></li>
        <li><a href="#">Земля кормилица</a></li>
        <li><a href="#">Жизнь леса</a></li>
        <li><a href="#">Жизнь луга</a></li>
        <li><a href="#">Жизнь пресного водоема</a></li>
        <li><a href="#">Растениеводство в нашем крае</a></li>
        <li><a href="#">Незаметные защитники урожая</a></li>
        <li><a href="#">Животноводство в нашем крае</a></li>
    </ul>
</li>
</ul>
</div></div>

CSS
Код

#menu_body li:hover ul, #menu_body li.over ul 
{ display: block } /* Делаем подменю видимым при наведении мыши */ 
#menu_body{ 
background: #0C3; 
width:302px
} 
#menu_body a 
{ width:100%; } 
#menu_body ul li { 
list-style-type:none; 
border-bottom:1px solid #fff; 
margin-left:-40px; 
padding-left:7px 
} 
#menu_body ul li a { 
color:#fff; 
font-family:verdana,arial,sans-serif; 
text-decoration:none 
} 
#menu_body ul li ul li { 
border:0; 
list-style-type:square; 
color:#fff; 
list-style-position:inside 
} 
#menu_body ul li ul{ 
border-top:1px solid #fff; 
margin-left:-7px; 
padding-left:50px 
} 
#menu_body li ul li:hover {
    text-decoration:underline;
    }
ul {
    background:#008000;
    }
ul li ul {
    background: #0C3; 
    }
.close {
    display:none;
    }
.open {display:block;}

Powered by Invision Power Board (http://www.invisionboard.com)
© Invision Power Services (http://www.invisionpower.com)