css стилях, вы можете размести под категорию любую инфо..." /> css стилях, вы можете размести под категорию любую инфо..." /> css стилях, вы можете размести под категорию любую инфо..."/>
Горизонтальное меню css стилях для uCoz
25.10.2017 109 0 milan_shubin

Горизонтальное меню css стилях для uCoz

Описание меню:
Сегодня решил выложить Горизонтальное меню, который был создан в css стилях, вы можете размести под категорию любую информацию, меню создан в обычном виде также вы можете его сделать уникальным через стили и сделать адаптивным .

Установка:

Html:

Код
<ul id="menu">  
   <li><a href="#">TURBO-S.UCOZ.RU</a>  
   <ul>  
   <li><a href="#">TURBO-S.UCOZ.RU 1</a></li>  
   <li><a href="#">TURBO-S.UCOZ.RU 2</a></li>  
   </ul>  
   </li>  
   <li><a href="#">ЗАГАЛОВКА 2</a>  
   <ul>  
   <li><a href="#">TURBO-S.UCOZ.RU 1</a></li>  
   <li><a href="#">TURBO-S.UCOZ.RU 2</a></li>  
   </ul>  
   </li>  
   <li><a href="#">ЗАГАЛОВКА 3</a>  
   <ul>  
   <li><a href="#">TURBO-S.UCOZ.RU 1</a></li>  
   <li><a href="#">TURBO-S.UCOZ.RU 2</a></li>  
   </ul>  
   </li>  
</ul>

(CSS):

Код
ul,  
   li {  
   list-style: none;  
   /* убираем маркеры списков */  
   margin: 0;  
   /* обнуляем внешние поля */  
   padding: 0;  
   /* обнуляем внутренние отступы */  
   }  
     
   #menu {  
   width: 100%;  
   height: 71px;  
   /* высота основного меню */  
   background-color: rgba(255, 13, 0, 0, 4);  
   /* Цвет фона и значение прозрачности */  
   font: bold 14px/25px Arial, sans-serif;  
   /* стили шрифта */  
   }  
     
   #menu li {  
   float: left;  
   /* элементы списков всплывают влево */  
   background-color: rgba(255, 13, 0, 0.6);  
   /* Цвет фона и значение прозрачности */  
   position: relative;  
   /* относительное позиционирование */  
   }  
     
   #menu ul li {  
   float: none;  
   /* отменяем всплытие для внутренних элементов списков */  
   }  
     
   #menu a {  
   display: block;  
   /* делаем ссылки блоками */  
   color: #fff;  
   /* цвет текста ссылок */  
   text-decoration: none;  
   /* убираем подчеркивание */  
   white-space: nowrap;  
   /* запрещаем перевод строк */  
   padding: 5px 10px;  
   /* внутренние отступы */  
   border-bottom: 1px solid #DDDDDD;  
   /* Параметры границы */  
   border-right: 1px solid #DDDDDD;  
   /* Параметры границы */  
   }  
     
   #menu ul a {  
   min-width: 200px;  
   /* минимальная ширина подпунктов */  
   width: auto !important;  
   /* для поддержки IE6 */  
   width: 200px;  
   /* для IE6 */  
   }  
     
   #menu ul {  
   position: absolute;  
   /* абсолютное позиционирование внутренних списков */  
   display: none;  
   /* скрываем внутренние списки */  
   }  
     
   #menu li:hover ul,  
   #menu li.ie6 ul {  
   display: block;  
   /* делаем внутренние списки блочными при наведении мыши на внешние элементы LI */  
   }  
     
   #menu li:hover ul a,  
   #menu li.ie6 ul a {  
   background-color: rgba(255, 13, 0, 0.2);  
   /* Цвет фона и значение прозрачности */  
   }  
     
   #menu li:hover a,  
   #menu li ul a:hover,  
   #menu li.ie6 a {  
   background-color: rgba(255, 13, 0, 0.6);  
   /* Цвет фона и значение прозрачности */  
   }

Вот и всё!

Материал предоставил workman.
Файлы для скачивания отсутствуют.
Поблагодарить автора Автор: milan_shubin
ИсточникМатериал взят с другого сайта
Комментарии (0)
Добавить комментарий
Прокомментировать