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/ |