forum.okis.ru
http://forum.okis.ru/

горизонтальное выпадающее меню
http://forum.okis.ru/viewtopic.php?f=10&t=4018
Страница 1 из 1

Автор:  анна15 [ 28 июн 2013, 09:30 ]
Заголовок сообщения:  горизонтальное выпадающее меню

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

Автор:  Murmur [ 30 июн 2013, 02:30 ]
Заголовок сообщения:  Re: горизонтальное выпадающее меню

Есть такой вот вариант. (на okis работает!) Под цвет вашего http://www.uralopora.ru

В блок "Реклама", под меню вставляете такой html^

Код:
<ul class="menu">
    <li><a href="">Главная</a></li>
    <li><a href="">О компании</a>
        <ul>
            <li><a href="primer1.html">Пример1</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></li>
    <li><a href="">Фотогалерея</a></li>
    <li><a href="">Цены</a></li>
    <li><a href="">Отзывы</a></li>
    <li><a href="">Контакты</a></li>
</ul>


(1.Названия в пунктах и подпунктах, понятное дело - меняете на свои.
2. В строчках, там где <a href=" вставляете адрес вашей страницы ", ну и так с каждой.

Теперь CSS.

1. Нужно расширить место под меню. В CSS пишите:

Код:
div.art-header {
height: 300px;
}


(300px это я так пробовал у себя. У меня шапка 250 и я увеличил место на 50px.)

2. Вставляете дальше в CSS:

Код:
*{
   margin: 0;
   padding: 0;
}

body {
   margin: 20px;
}

ul.menu {
   margin: 0;
   padding: 0;
   display: inline-block;
   background-color: #2b2b2b;
    background-repeat: no-repeat;
    background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#4f4f4f), to(#2b2b2b));
    background-image: -webkit-linear-gradient(#4f4f4f, #2b2b2b);
    background-image: -moz-linear-gradient(top, #4f4f4f, #2b2b2b);
    background-image: -ms-linear-gradient(#4f4f4f, #2b2b2b);
    background-image: -o-linear-gradient(#4f4f4f, #2b2b2b);
    background-image: linear-gradient(#4f4f4f, #2b2b2b);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#4f4f4f', endColorstr='#2b2b2b', GradientType=0);
   border-radius: 4px;
   -webkit-border-radius: 4px;
   -moz-border-radius: 4px;

position: absolute;
top:-45px;

   width: 980px;
}

ul.menu li {
   float: left;
   list-style: none;
   border-right: 1px solid #4f4f4f;
   position: relative;
}

ul.menu li a {
   color: white;
   display: block;
   font-family: Arial;
   font-size: 13px;
   padding: 8px 20px 10px;
   text-decoration: none;
   border-right: 1px solid #2b2b2b;
}

ul.menu li a:hover {
   background-color: #2b2b2b;
}

ul.menu li:first-child a:hover {
   border-radius: 4px 0 0 4px;
   -webkit-border-radius: 4px 0 0 4px;
   -moz-border-radius: 4px 0 0 4px;
}

ul.menu li ul {
   display: none;
}

ul.menu li:hover ul {
   display: block;
   position: absolute;
   top: 34px;
   border-radius: 0 0 4px 4px;
   -webkit-border-radius: 0 0 4px 4px;
   -moz-border-radius: 0 0 4px 4px;
   background-color: #2b2b2b;
   z-index: 1000;
}

ul.menu li:hover ul li {
   float: none;
   width: 150px;
   border-right: none;
}

ul.menu li:hover ul li a {
   border-top: 1px solid #4f4f4f;
   border-right: none;
   padding: 6px 20px 8px;
}

ul.menu li:hover ul li a:hover {
   background-color: transparent;
   color: #c1deff;
}

ul.menu li:hover ul li:first-child a:hover {
   border-radius: 0;
   -webkit-border-radius: 0;
   -moz-border-radius: 0;
}   


3. Реально, все работает, но нужно повозиться с настройками цифр в CSS/ Ширина под ваш шаблон и т.п.

Ну, пока все)
Пошел спать)))))

Автор:  анна15 [ 30 июн 2013, 10:29 ]
Заголовок сообщения:  Re: горизонтальное выпадающее меню

мне под другой сайт.но все равно большое вам спасибо.завтра попробую установить, результат покажу!! :)

Автор:  Murmur [ 30 июн 2013, 19:07 ]
Заголовок сообщения:  Re: горизонтальное выпадающее меню

Я сегодня поюзал это меню. Оно получается (при выпадающем подменю) за контентом. Чтобы оно было поверх всего (!) нужно в CSS прописать:

Код:
    .art-content-layout .art-sidebar1 {
    position: relative;
    z-index: 9999;
    }

Автор:  kosta-byrlyk [ 20 июл 2013, 22:07 ]
Заголовок сообщения:  Re: горизонтальное выпадающее меню

Подскажите пожалуйста как выровнять table меню по центру,когда мало пунктов?

Автор:  13bnj [ 11 окт 2013, 12:51 ]
Заголовок сообщения:  Re: горизонтальное выпадающее меню

Большое спасибо за инфу. Очень помогло и реально работает.

Автор:  Van [ 24 фев 2014, 22:13 ]
Заголовок сообщения:  Re: горизонтальное выпадающее меню

Спасибо большое за меню, все классно работает...вот только не могу сделать, чтобы активное меню было другим цветом...

Страница 1 из 1 Часовой пояс: UTC + 3 часа [ Летнее время ]
Powered by phpBB® Forum Software © phpBB Group
http://www.phpbb.com/