Пятница, 28.07.2017, 19:43


Вниз Главная Регистрация RSS
Приветствую Вас, Гость


Радио ТРАНС
Игротека
Наш опрос
Оцените мой сайт
Всего ответов: 88
Статистика
Яндекс.Метрика Яндекс.Метрика

Онлайн всего: 1
Гостей: 1
Пользователей: 0
Друзья сайта
Главная » Статьи » Полезности

Выпадающее меню в Укоз


Веб Мастеру [2]Ликбез [2]
Партнерки [2]Полезности [11]
Уроки по Укос [7]Фоны [1]
Windows [4]WordPress [1]
Мои статьи [3]3 [0]





Вот такое выпадающее двухуровневое меню Для сайтов на УКОСЕ (УКОЗ) можно запросто сделать самостоятельно.

Этот код нужно вставлять в ПУ сайтом - Управление дизайном - Первый (второй) контейнер или туда куда вам захочется!

Конечно в код нужно ввести свои данные-ссылки на существующие статьи на сайте.

Итак меню представляет из себя обычный многоуровневый список:

<ul id="nav">
 <li><a href="">Главная</a></li>
 <li><a href="">Товары</a>
 <ul>
 <li><a href="">Компьютеры</a></li>
 <li><a href="">Мониторы</a></li>
 <li><a href="">Комплектующие</a></li>
 </ul>
 </li>
 <li><a href="">Услуги</a>
 <ul>
 <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>
</ul>


Для редактирования Стилей (внешнего вида) меню есть набор стилей CSS которые также надо будет вставить в
ПУ - Дизайн - Управление дизайном CSS -

Итак - Стили:

*{
 margin:0;
 padding:0
}
#nav{
 font-size:0.7em;
 list-style-type:none;
 width:600px;
 height:25px;
 display:inline-block;
 background:#355C96;
 line-height:25px
}
 #nav li{
 float:left;
 width:120px;
 margin-top:-10000px
 }
 #nav li a{
 width:120px;
 text-decoration:none;
 text-align:center;
 color:#fff;
 position:relative;
 float:left;
 margin-right:-119px;
 margin-top:10000px
 }
 #nav li a:hover, #content #nav li a:focus, #content #nav li a:active{
 background:#DCE2FC;
 margin-right:0;
 color:#355C96
 }
 #nav li ul{
 background:#6286BD;
 float:left;
 margin-top:-25px;
 padding-top:25px;
 margin-bottom:-10000px;
 list-style-type:none
 }
 #nav li ul li{
 float:none;
 margin:0;
 width:auto
 }
 #nav li ul li a{
 float:none;
 display:block;
 margin:0;
 margin-right:-1px;
 background:#6286BD
 }


Редактируя стили, помните, что меню легко «поломать».

Я просто скопировала этот код, и вставила его в конце страницы в стилях CSS ниже
/* ====== forum End ====== */

А затем начала изменять цвет и размеры меню
 
background:#355C96; на  background: #003366;
 color: #FFFFFF; и т.д.

Эти значения вы также можете заменить на свои

ширину -
width:600px; на width:250px; ширина меню

Что бы получился такой же цвет и размер как на скриншоте, можно скопировать и вставить этот код:





/* CSS Document_Menu */
ul#navmenu-v,
ul#navmenu-v li,
ul#navmenu-v ul {
 margin: 0;
 border: 0 none;
 padding: 0;
 width: 240px;
 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:#44aaee 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: #44aaee;
 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: #44aaee;
 color: #FFFFFF;
 border:#44aaee 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: #44aaee;
 border:#44aaee 1px solid;
}



ul#navmenu-v ul,
ul#navmenu-v ul ul,
ul#navmenu-v ul ul ul {
 display: none;
 position: absolute;
 top: 0;
 right: 242px;
}


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;
}


/* END CSS menu */





Посмотреть как выглядит меню в действии и в этом дизайне, можно вот здесь

- http://www.too-tek.kz/

Если вы разберетесь в сути кода, то сможете самостоятельно менять и изменять цвет и размер по своему желанию, в любое удобное для вас время!!! :))

Да, еще - этот код, не работает в ИЕ! Эксплорер не отображает выпадающее меню, в этом браузере будет видно только основное меню!
"Выпадать" в ИЕ ничего не будет....
Но если учитывать, что ИЕ использует совсем небольшой процент пользователей... то можно все таки установить этот код для остальных браузеров





Источник: http://www.alexilin.ru/new-dropdown-menu/
Категория: Полезности | Добавил: Fantom (07.05.2011)
Просмотров: 5190 | Комментарии: 1 | Теги: выпадающее меню | Рейтинг: 0.0/ 0
Всего комментариев: 1
1  
Rusbitor.in-Казахстанский торрент трекер!!!Бесплатный трафик для Мегалайнеров!!!

Добавлять комментарии могут только зарегистрированные пользователи.
[ Регистрация | Вход ]

 

Новое на сайте

 

Самое популярное

 

 Коды скрипты

Случайная статья

  • Cities XL Platinum 2013 68
  • Чудо ферма \ Virtual farm 85
  • Именем короля 3. Коллекционное издание 85
  • Браузер Maxthon 185
  • Download Master 5.12.1.1283 176
  • Улесье. Коллекционное издание 144
  • Articles – лучшая Wikipedia в кармане 167
  • RIFT – многопользовательская онлайн игра 201
  • Darck Orbit – браузерная игра 190
  • Будущее настоящего прошлого_скачать 331
  • iSendSMS - для отправки SMS и MMS 225
  • Lunascape 6.2 Универсальный браузер 178
  • Редактор Inedita 168
  • CSE HTML Validator Lite 8.04 201
  • FileZilla — лучший бесплатный FTP-менеджер 191

  • Govorilka 3.1 Rus Говорун_Скачать бесплатно 29739
  • FrontPage 2003 Русская версия 11583
  • Игра "Фараон и Клеопатра" скачать бесплатно 6833
  • Mozilla Firefox 8.0.1 - русская версия скачать 4209
  • Новый Супер Марио 4125
  • Игра в Длинные нарды 4048
  • Медитация для привлечения Любви 3749
  • Сборник_Программа настроев Г.Н.Сытина скачать 2890
  • FFrontPage 2007 Русская версия 2809
  • Авто выключение компьютера_WinMend Auto Shutdown 2657
  • Астрон Дизайн - 3D моделирование Вашего дома 2110
  • Спец эффекты с ВебКамерой 2091
  • Штука - игра в карты 1742
  • Программа для быстрого создания Flash-анимации 1517
  • Если хочешь быть счастливым - Литвак Михаил 1481

  • Оригинальный вид опроса ucoz 298
  • Время в Москве 255
  • Красивый блок друзей сайта 326
  • Игровое онлайн радио Tort.FM 365
  • Информер последних комментариев 311
  • Как сделать топ пользователей,по количеству файлов,и постов 252
  • Информер новых материалов 324
  • Новое меню от Diz-cs 489
  • Подробная статиска с использованием Информера на uCoz 266
  • Помощь сайту webmoney 273
  • Топ файлов с картинками 350
  • Скрипт последних комментариев для Ucoz 315
  • Информер лучшие файлы 371
  • Форма поиска сайта с переключателем с yandex и google 272
  • Светло - синея просилка для регистраций на сайте 328

  • Коте для вашего сайта 250
  • Флэш проигрыватель с большим количеством радиостанций.. 250
  • Новый вид соотношения гостей и пользователей 251
  • Простой и красивый вид формы опроса 251
  • Формы поиска для uCoz 251
  • Новый цветной вид опроса v.2.0 uCoz 251
  • Скрипт кнопки на верх для вашего сайта 251
  • Мини профиль с временем суток и функциональным меню 251

  • Программа для быстрого создания Flash-анимации 1517
  • WorldView - Мир через веб камеру 228
  • Код флеш плеера. Музыка 808
  • Астрон Дизайн - 3D моделирование Вашего дома 2110
  • Drakensang Online -игра в стиле фэнтези! 175
  • Aimp - популярный аудио плеер 385
  • Гипноз для девушек 594


  • Внимание!

    ВСЕ скачанные файлы с интернета, (и с нашего сайта, так же) перед запуском на своем компьютере рекомендуется ОБЯЗАТЕЛЬНО проверить Вашей антивирусной программой!
    Все файлы и программы взяты с интернет пространства.
    Администрация сайта не несет никакой ответственности за использование и последствия данных программ и файлов

    Вверх Главная Регистрация RSS
    Приветствую Вас, Гость