3°C
завтра: 4°C
Погода в Перми
3°C
днем4°C
вечером2°C
завтра4°C
Подробно
 91,82
+0.7008
Курс USD ЦБ РФна 9 мая
91,8239
+0.7008
 98,95
+0.6399
Курс EUR ЦБ РФна 9 мая
98,9461
+0.6399
  • Посоветуйте пример вертикального css меню (кроссброузерное).

    Т.е. главные пункты идут сверху вниз, а подпункты показываются сбоку и тоже открываются сверху вниз.

    Нашел один пример, но в FF работает, а в IE показывается только первый уровень.

    p.s. в CSS не силен. Нашел еще http://www.alexilin.ru/dynamic-menu-without-java/ но как его сделать вертикальным не знаю:улыб:

  • Non solum oportet, sed etiam necessese est

  • Я в принципе нашел работающее меню. Только бы мне объяснили чего надо поправить, чтобы оно открывалось не справа, а слева:улыб:Помогите ?:улыб:
    Вот 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;
    }

  • Сам текст меню приведите - как он в документе описывается. А еще вам смотреть нужно поле float - оно рассказывает об обтекании следующих объектов (справа/слева/вразрыв).

    А в чем проблема JS? там код то простенький - меняется только "видимость" подменю.

    Non solum oportet, sed etiam necessese est

  • ну как сказать простенький... если с энтузиазмом подойти... :biggrin:

  • А зачем 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>

  • В ответ на: А зачем JS? Тут css сам скрывает и показывает вроде как.
    Вы ошибаетесь - CSS - это стиль отображения объекта, описываемый атрибутами CSS. Один из атрибутов - видимость/невидимость меняет в моем примере JS-код. Сам CSS не может ничего менять после загрузки и применения к тексту. Вспомните, каким образом можно задать стиль для элемента - можно предварительно его описать в CSS-файле, а можно и в самом документе это сделать (не очень рационально).

    Non solum oportet, sed etiam necessese est

  • В ответ на: а можно и в самом документе это сделать (не очень рационально).
    но, очень полезно, когда пользователь открывает сохраненную страницу на жестком диске.

  • но очень бесполезно, когда пользователь грузит раз за разом один и тот же код, который может достигать приличных объёмов.

  • А можно все таки ответ на вопрос? Какой именно флоат надо изменить?

  • В ответ на: но очень бесполезно, когда пользователь грузит раз за разом один и тот же код, который может достигать приличных объёмов.
    а что - правильно хранить один и тотже код стилей в одном файле, который достигает приличных объемов??? :шок:

  • понятней можно вопросы задавать? чего куда где??

  • В ответ на: А можно все таки ответ на вопрос? Какой именно флоат надо изменить?
    у вас один float в стиле - видимо вот этот:
    В ответ на: ul#navmenu-v li {
    float: left; #видимо заменить на right - не знаю сработает или нет, попробуйте
    display: block !important;
    display: inline;
    position: relative;
    border:#003366 1px solid;
    }

    Non solum oportet, sed etiam necessese est

  • Попробовал изменить флоат. Все осталось по прежнему.

  • ну с этим то помочь не проблема.
    замени left: 161px; на left: -161px;


    Есть пара вопросов.
    1. Ты в курсе, что это меню не работает в IE?
    2. Пользователя не будет раздражать мельтешение пунктов меню при случайном наведении курсора мыши?

    В общем главный вопрос. Зачем тебе css-меню?

  • 1) Для IE там есть хак с JS:улыб:
    2) Да вроде нормально

    Хочу вынести все пункты меню на главную, но чтобы подпункты было видно только после нажатия на категорию.

  • В ответ на: Посоветуйте пример вертикального css меню (кроссброузерное).
    http://www.greenbee.su Меню сделал через список. Вся вёрстка на div и css без JavaScript прекрасно работает в IE и Opera, другие не тестировал, но думаю тоже будет работать.

  • В ответ на: Вся вёрстка на div и css без JavaScript прекрасно работает в IE и Opera, другие не тестировал, но думаю тоже будет работать.
    Цвета меняются, но никаких подменю там нет.

  • делай через

    .style.display='block'
    .style.display='none'

Записей на странице:

Перейти в форум

Модератор: