Посоветуйте меню

Тема в разделе "Веб-дизайн", создана пользователем LEXAlForpostl, 19 мар 2010.

Статус темы:
Закрыта.
Модераторы: zek24
  1. LEXAlForpostl

    LEXAlForpostl

    Регистр.:
    21 май 2008
    Сообщения:
    739
    Симпатии:
    226
    Здравствуйте.
    Посоветуйте вертикальное меню.
    Если нажимаешь на пункт, если есть подпункты, то они появляются.
    Не нравится мне меню когда подводишь мышку и показываются подменю.
    И желательно светло-синий тон.
     
  2. ercalote

    ercalote Постоялец

    Регистр.:
    27 мар 2008
    Сообщения:
    86
    Симпатии:
    21
  3. PolVM

    PolVM Создатель

    Регистр.:
    4 июн 2009
    Сообщения:
    13
    Симпатии:
    1
    а куда ты его прицепить собираешься?
    на чистый HTML или какую-нибудь CMS?
     
  4. ercalote

    ercalote Постоялец

    Регистр.:
    27 мар 2008
    Сообщения:
    86
    Симпатии:
    21
    Чисто спортивный интерес: а какая разница?
     
  5. Toha20072008

    Toha20072008

    Заблокирован
    Регистр.:
    17 фев 2008
    Сообщения:
    316
    Симпатии:
    50
    Хорошее компактное меню, без ява скриптов и хаков для IE, мне нужно точно такое же но многоуровневое а не двух уровневое.
    Желательно с отступами для категорй каждого уровня.
    ercalote не встречал такого нигде?
     
  6. box1510

    box1510 Писатель

    Регистр.:
    17 мар 2010
    Сообщения:
    5
    Симпатии:
    0
  7. ArturUfa

    ArturUfa Писатель

    Регистр.:
    27 фев 2010
    Сообщения:
    4
    Симпатии:
    1
    В этом случае, лучше использовать код простенького многоуровнего js меню, и использовать в нем вместо onmouse -> onclick
     
  8. ArchyMFR

    ArchyMFR Прохожие

    лучше - html

    Самое лучшее меню - да, html + javascript, потому что оно без проблем проиндексируется и будет оптимально с точки зрения СЕО.

    Если же это не_критично - есть огромное множество программ, генерирующих дикие с точки зрения кода (чистые дебри javascript), но зато красивые (любые картинки, и т.д. - с легкостью) менюшки любого количества вложений. Игрался и сразу стер - сделал ручками.

    Если нужен первый вариант - самое наглядно простое меню можно "стибзить" с сайта Перейти по ссылке , оно реально очень простое для освоения.
     
  9. CoooLLer

    CoooLLer Писатель

    Регистр.:
    8 июн 2009
    Сообщения:
    8
    Симпатии:
    2
    Я так понимаю вам надо древовидное меню. Простое играммотное JS дерево Перейти по ссылке
     
  10. makotokino

    makotokino Создатель

    Регистр.:
    10 дек 2009
    Сообщения:
    30
    Симпатии:
    5
    Изменяем пункты и получаем простое, но рабочее меню
    на CSS без JavaScript
    HTML:
    <STYLE type=text/css>
    
    #boxmenu {
    BACKGROUND: #7da6ee;
    BORDER: 0px #000 solid;
    POSITION: relative;
    LEFT: 335px;
    WIDTH: 357px;
    Z-INDEX: 1/*для IE*/
    }
    
    /*без этого нарушается работа меню*/
    #m * {
    BORDER-COLLAPSE: collapse
    }
    
    /*стили основного меню*/
    #m {
    FONT: 10pt Verdana, sans-serif;
    FONT-WEIGHT: bold
    }
    
    /*стиль ссылок основного меню*/
    .a {
    BACKGROUND: #7da6ee;
    COLOR: #000;
    TEXT-DECORATION: none
    }
    
    /*стили выпадающего меню для IE*/
    * HTML #m .a table {
    FONT: 8pt Verdana, sans-serif;
    DISPLAY: block
    }
    
    /*стили выпадающего меню*/
    .a table {
    FONT: 8pt Verdana, sans-serif;
    DISPLAY: block
    }
    
    /*скрывает выпадающие меню*/
    #m table {
    DISPLAY: none
    }
    #m table A {
    DISPLAY: none
    }
    
    /*смена стилей при на ведении курсора*/
    #m .a:hover {
    BACKGROUND: #000;
    COLOR: #fff
    }
    
    .menu:hover {
    BACKGROUND: #7da6ee;
    COLOR: #000;
    BORDER: #000 0px solid/*для OP*/
    }
    
    /*стили выпадающего меню при на ведении курсора*/
    #m .a:hover table {
    BACKGROUND: #7da6ee;
    BORDER: #000 1px solid;
    POSITION: absolute;
    DISPLAY: block;
    WHITE-SPACE: nowrap
    }
    
    .menu:hover table {
    BACKGROUND: #7da6ee;
    BORDER: #000 1px solid;
    POSITION: absolute;
    DISPLAY: block;
    WHITE-SPACE: nowrap
    }
    
    #m .a:hover table A {
    COLOR: #000;
    TEXT-DECORATION: none;
    BORDER-RIGHT: #7da6ee 1px solid;/*дрожание по горизантали*/
    PADDING: 1px 12px;/*отступы выпад меню*/
    DISPLAY: block;
    WHITE-SPACE: nowrap
    }
    
    #m .menu:hover table A {
    COLOR: #000;
    TEXT-DECORATION: none;
    BORDER-RIGHT: #7da6ee 1px solid;
    PADDING: 1px 12px;/*отступы в подменю выпад. меню*/
    DISPLAY: block;
    WHITE-SPACE: nowrap
    }
    
    /*стиль ссылок вып. меню при наведении курсора*/
    #m .a:hover table A:hover {
    BACKGROUND: #f5f5dc;
    COLOR: #000;
    TEXT-DECORATION: none;
    BORDER: #000 1px solid;/*дрожание по вертикали*/
    PADDING-RIGHT: 12px;
    PADDING-TOP: 0px;
    PADDING-LEFT: 11px;
    PADDING-BOTTOM: 0px;
    DISPLAY: block
    }
    
    #m .menu:hover table A:hover {
    BACKGROUND: #f5f5dc;
    COLOR: #000;
    TEXT-DECORATION: none;
    BORDER: #000 1px solid;
    PADDING-RIGHT: 12px;
    padding-top: 0px;
    PADDING-LEFT: 11px;
    PADDING-BOTTOM: 0px;
    DISPLAY: block
    }
    
    .menu {
    MARGIN: 1px;
    FLOAT: left
    }
    
    /*стили второго вложения*/
    .menu1 {
    FONT: 8pt Verdana, sans-serif;
    FONT-WEIGHT: bold;
    COLOR: #000
    }
    .a1 {
    DISPLAY: none
    }
    .menu1:hover .a1 {
    PADDING: 0px 115px;/*для FF*/
    POSITION: absolute;
    DISPLAY: block;
    FLOAT: left;
    LEFT: -40px;
    TOP: 5px
    }
    .menu1:hover {
    DISPLAY: block
    }
    
    /*стили третьего вложения*/
    .menu2 {
    FONT: 8pt Verdana, sans-serif;
    FONT-WEIGHT: bold;
    COLOR: #000
    }
    .a2 {
    DISPLAY: none
    }
    .menu2:hover .a2 {
    PADDING: 0px 115px;/*для FF*/
    POSITION: absolute;
    DISPLAY: block;
    FLOAT: left;
    LEFT: -35px;
    TOP: 5px
    }
    .menu2:hover {
    DISPLAY: block
    }
    
    /*стили четвертого вложения*/
    .menu3 {
    FONT: 8pt Verdana, sans-serif;
    FONT-WEIGHT: bold;
    COLOR: #000
    }
    .a3 {
    DISPLAY: none
    }
    .menu3:hover .a3 {
    PADDING: 0px 115px;/*для FF*/
    POSITION: absolute;
    DISPLAY: block;
    FLOAT: left;
    LEFT: -30px;
    TOP: 5px
    }
    .menu3:hover {
    DISPLAY: block
    }
    
    </STYLE>
     
Статус темы:
Закрыта.