VPF::Раскрывающееся меню на базе CSS.

Reverent

Дата 30.7.2008, 14:11 (ссылка)

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

Загрузка ...

Шустрый

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

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

Добрый день.

Не давно столкнулся вот с такой проблемой. Мне требуется разработать раскрывающееся меню на базе CSS. Желательно без использования JS. В крайнем случаи если и использовать его то только без добавления в HTML (т.е. не каких там событий в объектах). Нашел кот такой код в Интернете

Код


<HTML>

<HEAD>
<META http-equiv="content-type" content="text/html; charset=windows-1251">
<STYLE>
body
{
margin : 0;
padding : 10px;
font-family: Verdana, Tahoma, arial, geneva, Helvetica, sans-serif;
behavior: url(csshover.htc);
background-color: #ffffff;
}

div#menunav
{
width: 100%;
float: left;
border-top: 1px
border-bottom: 1px solid #000000;
font-size: 11px;
background-color: #b3b3b3;
padding: 0 0 0 30px;
}

div#menunav ul
{
margin: 0px;
padding: 0px;
}

* html div#menunav ul
{
float: left;
border-left: 1px solid #000000;
margin-left: 15px;
}

div#menunav li
{
float: left;
position: relative;   
list-style-type: none;
background-color: #ffebc6;
border-right: 1px solid #000000;
}

div#menunav li:first-child
{
border-left: 1px solid #000000;
}

div#menunav a
{
display: block;
text-decoration: none;
padding: 0px 10px 0px 10px;
color: #006699;
}

div#menunav a:hover
{
color: #ff3333;
}

div#menunav li:hover
{
background-color: #ffffff;
}

div#menunav ul li ul
{
margin: 0px;
position: absolute;
left: -1px;
width: 10em;
}

div#menunav ul li ul li
{
width: 100%;
border-left: 1px solid #000000;
border-bottom: 1px solid #000000;
border-right: 1px solid #000000;
}

div#menunav ul li ul li:first-child
{
border-top: 1px solid #000000;
}

body div#menunav ul li ul
{
display: none;
}

div#menunav ul li:hover ul, div#menunav ul li ul:hover
{
display: block;
}

* html div#menunav ul li ul
{
border-top: 1px solid #000000;
border-left: 0рх;
}
</STYLE>
</HEAD>

<BODY>

<DIV id="menunav">
    <UL>
        <LI><A href="#">раздел №1</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>
        </UL>
        </LI>
        <LI><A href="#">раздел №2</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>
        </UL>
        </LI>
        <LI><A href="#">раздел №3</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>
        </UL>
        </LI>
        <LI><A href="#">раздел №4</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>
        </UL>
        </LI>
    </UL>
</DIV>

</BODY>

</HTML>

В принципе мне подходит в самый раз. Но есть одна проблема он совершенно не хочет работать в IE 6. Начал искать проблему и обнаружил, что браузер не понимает вот этот параметр:

Код


div#menunav ul li:hover ul, div#menunav ul li ul:hover
{
display: block;
}

Ничего не могу понять, почему IE6 не нравится эта конструкция, кто подскажет, если решения данной проблемы?

bars80080

Дата 30.7.2008, 14:39 (ссылка)

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

Загрузка ...

прапор творюет

Награды: 1

Профиль
Группа: Завсегдатай
Сообщений: 12022
Регистрация: 5.12.2007
Где: Königsberg

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

потому что :hover по определению работало изначально только с сылками, потому и не нравится ИЕ6
попробуй закинуть на свой сайт вот этот файлик (распакуй конечно) и затем пропиши сверху стилей:

Код

body { behavior:url(csshover.htc); }

должно помочь

Присоединённый файл ( Кол-во скачиваний: 18 )

csshover.rar 1,00 Kb

Reverent

Дата 30.7.2008, 18:29 (ссылка)

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

Загрузка ...

Шустрый

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

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

А можно небольшую инструкцию как присоединить этот файл?

Добавлено через 5 минут и 42 секунды
Все дошло, туплю по тихой

Добавлено через 13 минут и 31 секунду
Получилось! bars80080 ты гений!

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