VPF::Css меню помогите разобратся - Форум программистов

Krintus

Дата 30.5.2010, 14:40 (ссылка)

(нет голосов)

Загрузка ...

Новичок

Профиль
Группа: Участник
Сообщений: 2
Регистрация: 18.4.2009

Репутация: нет
Всего: нет

Срочно нужна помошь по созанию меню. как сделать что бы первое меню было открыто. Вторые открывались только по нажатию мышки. Ключевые 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 (ссылка)

(нет голосов)

Загрузка ...

Новичок

Профиль
Группа: Участник
Сообщений: 11
Регистрация: 15.1.2010
Где: г.Харьков

Репутация: нет
Всего: нет

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

Krintus

Дата 31.5.2010, 20:19 (ссылка)

(нет голосов)

Загрузка ...

Новичок

Профиль
Группа: Участник
Сообщений: 2
Регистрация: 18.4.2009

Репутация: нет
Всего: нет

Буду очень признателен, если вы все объясните.

chilichacha

Дата 13.6.2010, 18:56 (ссылка)

(нет голосов)

Загрузка ...

Новичок

Профиль
Группа: Участник
Сообщений: 6
Регистрация: 13.7.2007

Репутация: нет
Всего: нет

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

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

FightInGlory

Дата 20.6.2010, 11:25 (ссылка)

(нет голосов)

Загрузка ...

Шустрый

Профиль
Группа: Участник
Сообщений: 123
Регистрация: 14.11.2006

Репутация: 1
Всего: 1

Короче вот тебе меню, сделал. Работает в 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;}

1 Пользователей читают эту тему (1 Гостей и 0 Скрытых Пользователей)
0 Пользователей:
« Предыдущая тема \| Вёрстка веб-сайтов \| Следующая тема »