RedStar | Дата: Пятница, 15.08.2014, 19:30 | Сообщение # 1 |
Полковник
Группа: Администраторы
Сообщений: 170
Статус: Offline
| Пример 1. Базовое горизонтальное CSS меню для сайта или как сделать простейшее CSS меню из HTML списка
HTML код меню:
Код <title>Создание базового горизонтального меню для сайта CSS методами</title> </head> <body> <ul class="css-menu-1"> <li><a href="#">Главная</a></li> <li><a href="#">HTML уроки</a></li> <li><a href="#">CSS уроки</a></li> <li><a href="#" class="selected">CSS меню</a></li> <li><a href="#">Справочник</a></li> </ul>
CSS код меню:
Код ul.css-menu-1 { list-style: none }
ul.css-menu-1 li { display: inline }
ul.css-menu-1 li a { font-family: Tahoma, Geneva, sans-serif; text-decoration: none; background: #5c6cb7; font-weight: bold; color: #ffaa00; padding: 6px 10px 6px 10px }
ul.css-menu-1 li a:hover { padding: 6px 10px 6px 10px; font-weight: bold; background: #364d95; color: #ff9900 }
ul.css-menu-1 li a.selected { background: #364e95 }
|
|
| |
RedStar | Дата: Пятница, 15.08.2014, 19:36 | Сообщение # 2 |
Полковник
Группа: Администраторы
Сообщений: 170
Статус: Offline
| Пример 2. Создание меню для сайта CSS методами
или как сделать CSS меню без использования изображения
HTML код меню:
Код <title>Создание меню для сайта CSS методами</title> </head> <body> <ul class="css-menu-2"> <li><a href="#">Главная</a></li> <li><a href="#">CSS уроки</a></li> <li><a href="#" class="selected">CSS меню</a></li> <li><a href="#">Справочник</a></li> </ul>
CSS код меню:
Код ul.css-menu-2 { list-style: none; border-bottom: 1px #888899 solid; padding-bottom: 10px }
ul.css-menu-2 li { display: inline; margin-right: 5px }
ul.css-menu-2 li a { color: #888899; text-decoration: none; background: #f7f7f9; border: 1px #bbbbcc solid; border-bottom: none; padding: 10px 14px }
ul.css-menu-2 li a:hover { padding: 14px 14px 10px 14px }
ul.css-menu-2 li a.selected { color: #555566; background: #ffffff; border: 1px #888899 solid; border-bottom: 1px #ffffff solid; padding: 14px 14px 10px 14px }
|
|
| |
RedStar | Дата: Пятница, 15.08.2014, 19:42 | Сообщение # 3 |
Полковник
Группа: Администраторы
Сообщений: 170
Статус: Offline
| Пример 3. Красивое горизонтальное CSS меню для сайта
или как сделать CSS меню для сайта без использования изображения
HTML код меню:
Код <title>Создание красивого горизонтального CSS меню для сайта</title> </head> <body> <div id="css-menu"> <ul> <li><a href="#"> <span class="text-top">Главная</span> <span class="text-bottom">О нашем проекте</span> </a></li> <li><a href="#"> <span class="text-top">Справочник</span> <span class="text-bottom">CSS справочник</span> </a></li> <li><a href="#"> <span class="text-top">CSS уроки</span> <span class="text-bottom">Для начинающих</span> </a></li> <li><a href="#"> <span class="text-top">CSS меню</span> <span class="text-bottom">Коллекция CSS меню</span> </a></li> </ul> </div>
CSS код меню:
Код #css-menu ul { list-style: none; font-family: Georgia, serif; font-size: 18px; font-style: italic; line-height: 1.4em; border:2px solid #000000; border-left: 1px solid #000000; float: left; padding: 0; margin: 12px 0 25px 24px }
#css-menu ul li { float: left }
#css-menu ul li a { display: block; text-decoration: none; background-color: #595959; padding: 5px 10px 0 10px; color: #fefefe; width: 120px; border-right: 1px solid #797979; border-left: 1px solid #191919 }
#css-menu ul li a span { display: block }
#css-menu ul li a span.text-top { border-bottom: 1px solid #595959 }
#css-menu ul li a:hover span.text-top { border-bottom: 1px dashed #fefefe; color: #ffddbb }
#css-menu ul li a span.text-bottom { visibility: hidden; font-size: 11px; text-align: right }
#css-menu ul li a:hover span.text-bottom { visibility: visible }
|
|
| |
RedStar | Дата: Пятница, 15.08.2014, 19:49 | Сообщение # 4 |
Полковник
Группа: Администраторы
Сообщений: 170
Статус: Offline
| Пример 4. Горизонтальное меню для сайта CSS методами
или как сделать CSS меню для сайта без использования изображения
HTML код меню:
Код <title>Создание горизонтального CSS меню без изображения</title> </head> <body> <ul class="css-menu-3"> <li><a href="#">Главная</a></li> <li><a href="#">HTML уроки</a></li> <li><a href="#">CSS уроки</a></li> <li><a href="#" class="selected">CSS меню</a></li> <li><a href="#">Справочник</a></li> </ul>
CSS код меню:
Код ul.css-menu-3 { list-style: none; border-bottom: 5px solid #bb0000; border-top: 1px solid #114477; padding: 11px; background: #336699 }
ul.css-menu-3 li { display: inline }
ul.css-menu-3 li a { color: #fefefe; text-decoration: none; background: #225588; border: 1px solid #225588; border-bottom: 1px solid #114477; margin: 0; padding: 10px 14px 10px 14px }
ul.css-menu-3 li a:hover {border-left: 1px solid #114477; border-right: 1px solid #114477}
ul.css-menu-3 li a.selected { color: #fefefe; background: #bb0000; border: 1px #cc0000 solid; border-bottom: 1px solid #bb0000; border-left: 1px solid #770000; padding: 10px 14px 10px 14px }
|
|
| |