FAQ Простенькое выпадающее меню

Администратор · Регистрация: 27.02.2009

Простенькое выпадающее меню, как на форуме Бормотухи.нет

В то место где хотим видеть меню, добавляем код:

PHP код:



<div class="menu">
    <ul> 
        <li><a href="">Файлы</a>
        <!--[if lte IE 6]>
        <a href="">Файлы
        <table><tr><td>
        <![endif]-->
            <ul>
                <li><a title="Продвинутый файловый менеджер" href="/krfilesmanager.php">Менеджер № 1</a></li>
                <li><a title="Старый файловый менеджер" href="/downloads.php">Менеджер № 2</a></li>
            </ul>
        <!--[if lte IE 6]>
        </td></tr></table>
        </a>
        <![endif]-->
        </li>
        <li><a href="">Дополнительно</a>
        <!--[if lte IE 6]>
        <a href="">Дополнительно
        <table><tr><td>
        <![endif]-->
            <ul>
                <li><a title="Смотреть все альбомы пользователей" href="/all_albums.php">Альбомы</a></li>
                <li><a title="Играть в онлайн игры" href="/arcade.php">Игры</a></li>
                <li><a title="Посмотреть награды форума" href="/awards.php">Награды</a></li>
                <li><a title="Инструкции - как пользоваться форумом" href="/o-forume/1256-tehnicheskaya-podderzhka-foruma.html">Инструкции</a></li>
                <li><a title="Посмотреть календарь форума" href="calendar.php">Календарь</a></li>
                <li><a title="Заглянуть в список пользователей" href="memberlist.php">Пользователи</a></li>
            
           </ul>
        <!--[if lte IE 6]>
        </td></tr></table>
        </a>
        <![endif]-->
        </li>
        <li><a href="">Сообщения</a>
        <!--[if lte IE 6]>
        <a href="">Сообщения
        <table><tr><td>
        <![endif]-->
            <ul>
                <li><a rel="nofollow" title="Посмотреть новые сообщения" href="/search.php?do=getnew">Новые посты</a></li>
                <li><a rel="nofollow" title="Посмотреть новые сообщения без раздела Флейм" href="/search.php?do=getnew&amp;exclude=23,59,69">[Без флейма]</a></li>
                <li><a rel="nofollow" title="Отметь все темы как прочитанные" href="/forumdisplay.php?do=markread">Все прочитано</a></li>
            </ul>
        <!--[if lte IE 6]>
        </td></tr></table>
        </a>
        <![endif]-->
        </li>
</ul> 
</div>

Конечно его лучше сначала отредактировать.
Исправить название ссылок.

Пояснение

Участки кода

PHP код:



        <!--[if lte IE 6]>
        </td></tr></table>
        </a>
        <![endif]-->

Внедрены, для правильного отображения в браузере iExplorer 6

[-]

И вставить следующий css:

PHP код:



.menu{
    font-family:arial, sans-serif;
    width:318px;
    height:25px;
    position:relative;
    font-size:11px;
    z-index:100
}
.menu ul li a, .menu ul li a:visited{
    display:block;
    text-decoration:none;
    color:#000;
    width:104px;
    height:20px;
    text-align:center;
    color:#fff4ca;
    border:1px solid #fff;
    background:#9144a9;
    line-height:20px;
    font-size:11px;
    overflow:hidden
}
.menu ul{
    padding:0;
    margin:0;
    list-style:none
}
.menu ul li{
    float:left;
    position:relative}
.menu ul li ul{
    display:none
}
.menu ul li:hover a{
    color:#fff;
    background:#36f
}
.menu ul li:hover ul{
    display:block;
    position:absolute;
    top:21px;
    left:0;
    width:105px
}
.menu ul li:hover ul li a{
    display:block;
    background:#ddd;
    color:#000
}
.menu ul li:hover ul li a:hover{
    background:#6fc;
    color:#000
}

админка - выбрать стиль - основные определения CSS (прокручиваем в самый низ страничку) - Дополнительные определения CSS - и вставляем выше приведенный код во второе полеВ этом коде можно изменить цвета меню, которые заданы в классах color, background

Неактивный · 05.04.2011, 17:00

Вот ссылка, где про создание этого меню рассказывается более подробно, а возможно это и первоисточник Блог Алексея Ильина | Выпадающее меню без Javascript
А тем кому мало, вот ссылка, на множество видов меню: 99 техник создания меню для сайта CSS и jQuery | SHEBEKO.COM

Пользователь · Регистрация: 20.04.2012

А чтобы было, как на бормотухи.нет в левом углу, куда вставить код? То есть в навбаре после чего ?

Администратор · Регистрация: 27.02.2009

Можно в самый верх шаблона navbar.
Только изменить пару свойств у класса .menu:

PHP код:



.menu{
    font-family:arial, sans-serif;
    width:318px;
    height:25px;
    position:absolute;
   top: 10px;
left:10px;
    font-size:11px;
    z-index:100
}

Пользователь · Регистрация: 20.04.2012

сейчас поставлю и отпишусь что вышло ))

Добавлено через 3 минуты
Получилось как бы ниже лого , а как бы поднять его выше ?)

Добавлено через 3 минуты
и кстати как изменить розовый цвет на синий ?))

Администратор · Регистрация: 27.02.2009

top: 10px; - отступ сверху
left:10px; - отступ слева

Добавлено через 1 минуту

Цитата:

Сообщение от Vbmaster

и кстати как изменить розовый цвет на синий ?))

Изменяйте цвет в свойстве background: в CSS

Опции темы
Версия для печати Отправить по электронной почте
Опции просмотра
Линейный вид Комбинированный вид Древовидный вид

Vbmaster #3
00 МГц Пользователь Вес репутации: 0 Регистрация: 20.04.2012 Сообщений: 12 Сказал(а) спасибо: 4 Спасибок 0 в 0 сообщениях	Re: Простенькое выпадающее меню - 19.07.2012, 21:38 А чтобы было, как на бормотухи.нет в левом углу, куда вставить код? То есть в навбаре после чего ? Исправил Vector; 19.07.2012 в 21:56.