Среда, 25.04.2018, 00:14


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


Радио ТРАНС
Игротека
Наш опрос
Чего желаете?
Всего ответов: 84
Статистика
Яндекс.Метрика Яндекс.Метрика

Онлайн всего: 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)
Просмотров: 5649 | Комментарии: 1 | Теги: выпадающее меню | Рейтинг: 0.0/ 0
Всего комментариев: 1
1  
Rusbitor.in-Казахстанский торрент трекер!!!Бесплатный трафик для Мегалайнеров!!!

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

 

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

 

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

 

 Коды скрипты

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

  • Чудо ферма \ Virtual farm 97
  • Именем короля 3. Коллекционное издание 100
  • Cities XL Platinum 2013 84
  • Браузер Maxthon 204
  • Download Master 5.12.1.1283 190
  • RIFT – многопользовательская онлайн игра 215
  • Будущее настоящего прошлого_скачать 347
  • Улесье. Коллекционное издание 158
  • Darck Orbit – браузерная игра 206
  • Articles – лучшая Wikipedia в кармане 182
  • iSendSMS - для отправки SMS и MMS 237
  • Lunascape 6.2 Универсальный браузер 197
  • XnView Full-один из лучших просмотрщиков -конверторов графических файлов 224
  • CSE HTML Validator Lite 8.04 210
  • Редактор Inedita 180

  • Govorilka 3.1 Rus Говорун_Скачать бесплатно 29988
  • FrontPage 2003 Русская версия 11698
  • Игра "Фараон и Клеопатра" скачать бесплатно 6944
  • Mozilla Firefox 8.0.1 - русская версия скачать 4223
  • Новый Супер Марио 4182
  • Игра в Длинные нарды 4066
  • Медитация для привлечения Любви 3774
  • Сборник_Программа настроев Г.Н.Сытина скачать 2923
  • FFrontPage 2007 Русская версия 2856
  • Авто выключение компьютера_WinMend Auto Shutdown 2673
  • Астрон Дизайн - 3D моделирование Вашего дома 2126
  • Спец эффекты с ВебКамерой 2106
  • Штука - игра в карты 1811
  • Если хочешь быть счастливым - Литвак Михаил 1574
  • Программа для быстрого создания Flash-анимации 1535

  • Вид комментариев не использующий картинки всё в CSS стиле 290
  • Красивый блок друзей сайта 371
  • Оригинальный вид опроса ucoz 325
  • Проверка на вирусы [Dr.Web] 345
  • Flash игра для сайта Аэрохокей с Микки 366
  • Измененная Онлайн статистика uCoz 308
  • Красивый светлый мини профиль 354
  • Кнопки вверх и вниз с функцией запоминания позиции 455
  • Флэш игра избей Джастина Бибера 324
  • Радио FreshClub 339
  • Кнопка наверх в виде ракеты с эффектом огня 373
  • Скрипт баннеров 88х31 для системы ucoz 373
  • Отправить SMS с сайта 289
  • Кнопка "Вверх" для сайта, блога или форума 293
  • Перевод страниц сайта 336

  • Вид комментариев для темных дизайнов от Артема Малкова 289
  • Новый вид кто онлайн для ucoz 289
  • Коте для вашего сайта 289
  • Новый вид опроса 289
  • Отправить SMS с сайта 289
  • Формы поиска для uCoz 289
  • Перевод на другие языки для uCoz 289
  • Радио для сайта new 289

  • RIFT – многопользовательская онлайн игра 215
  • FileZilla — лучший бесплатный FTP-менеджер 205
  • ЛЕЧЕБНЫЕ СИСТЕМЫ КИСТЕЙ И СТОП 631
  • Firefox 21.0 НЕ глючная версия 205
  • Спец эффекты с ВебКамерой 2106
  • Если хочешь быть счастливым - Литвак Михаил 1574
  • Ресторанная империя 333


  • Внимание!

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

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