background
ПОСЛЕДНИЕ ПУБЛИКАЦИИ
ПОДПИСКА
Будь В Курсе
Подпишись, и получай эксклюзивные обновления на свой E-Mail:

Ваш E-Mail полностью защищён

ОБСУЖДЕНИЕ

Горизонтальное меню на css

Горизонтальное меню на css
Просмотров: 2733  Скачан: 270 раз  Комментариев в теме: 0

Простое горизонтальное меню для вашего сайта реализованное на css, по сути это список разделов сайта при навидении курсора мыши на любуй из разделов, открывается подраздел. В меню нет ничего лишнего, все просто и компактно.

Шаг 1 - создание разметки

 

HTML

<div class="container">
    <ul id="topnav"> 
        <li><a href="#">Главная</a></li> 
        <li> 
            <a href="#">О Сайте</a> 
            <span> 
                <a href="#">Компания</a>
                <a href="#">Команда</a>
                <a href="#">Карьера</a>
            </span> 
        </li> 
        <li> 
            <a href="#">Услуги</a> 
            <span> 
                <a href="#">Что вы делаете</a>
                <a href="#">Чем дышите</a>
                <a href="#">Отзывы</a> 
            </span> 
        </li> 
        <li> 
            <a href="#">Портфолио</a> 
            <span> 
                <a href="#">Веб-дизайн</a>
                <a href="#">Развитие</a>
                <a href="#">Графика</a>
                <a href="#">SEO и интернет-маркетинг</a>
                <a href="#">И так далее</a> |
                <a href="#">И тому подобное</a> 
            </span> 
        </li> 
        <li><a href="#">Контакт</a></li> 
    </ul>
</div>

Шаг 2 - подключение стилей

 

CSS

<style>
*{margin: 0;padding: 0;}
.container {
 width: 700px; 
 margin: 200px auto;
 font: 10px normal Verdana, Arial, Helvetica, sans-serif;
}

ul#topnav {
 margin: 0;
 padding: 0;
 float: left;
 width: 700px;
 list-style: none;
 position: relative;
 font-size: 1.2em;
 background:#2B2B2B;
}

ul#topnav li :hover {
 background:#00ccff;
 }
 
ul#topnav li {
 float: left;
 border-right: 1px solid #555;
}

ul#topnav li a {
 padding: 10px 15px;
 display: block;
 color:#fff;
 text-decoration: none;
}

ul#topnav li span {
 float: left;
 padding: 15px 0;
 position: absolute;
 left: 0; top:35px;
 display: none;
 width: 700px;
 background: #00ccff;
 color: #fff;
/*--Внизу справа скругление угла--*/
 border-bottom-right-radius: 5px;
 -moz-border-bottom-right-radius: 5px;
 -khtml-border-bottom-right-radius: 5px;
 -webkit-border-bottom-right-radius: 5px;
/*--Внизу слева скругление угла--*/
 border-bottom-left-radius: 5px;
 -moz-border-bottom-left-radius: 5px;
 -khtml-border-bottom-left-radius: 5px;
 -webkit-border-bottom-left-radius: 5px;
}

ul#topnav li:hover span {
 display: block; 
 }
 
ul#topnav li span a {
 display: inline; 
 }
 
ul#topnav li span a:hover {
 text-decoration: underline;
}
</style>
Материалы по теме:

Полноэкранное меню на css и JQueryПолноэкранное меню на css и JQuery

Полно-экранное меню на css и Jquery с меняющимся фоном....

Горизонтальное меню с ползункомГоризонтальное меню с ползунком

Стильное горизонтальное меню с ползунком, который следует за курсором мыши....

Горизонтальное выпадающее меню на cssГоризонтальное выпадающее меню на c...

Выпадающее меню в темном стиле, реализованное полностью на css...

Горизонтальное выпадающее меню с помощью jqueryГоризонтальное выпадающее меню с по...

Горизонтальное меню в темном стиле с выпадающими пунктами....

Оригинальное меню в виде клочка бумагиОригинальное меню в виде клочка бум...

Меню в оригинальном стиле, в виде потёртого клочка бумаги....

Горизонтальное мега меню на css3Горизонтальное мега меню на css3

Отличное горизонтальное меню с большое количество пунктов....
Интересные публикации:

ClockerClocker

Универсальный html шаблон Clocker, на главной странице располагается слайдер, есть портфолио, выпадающее меню, заготовка контактной формы......

Миниатюра изображений плагин «Grid Navigation Effects»Миниатюра изображений плагин «Grid Navig...

Оригинальная навигация в виде миниатюр изображений, если быть точнее, то это jQuery плагин «Grid Navigation Effects» который может похвастаться своими...

Фиксированная форма обратной связи «Contactable 1.5»Фиксированная форма обратной связи «Cont...

Стильная форма обратной связи, а если быть точнее то это jquery плагин Contactable v1.5, который работает на AJAX и имеет встроенную проверку полей на...

Скрипт почтовой рассылки писем SendMailСкрипт почтовой рассылки писем

SendMail - это инструмент для организации рассылки почтовых сообщений с вашего сайта любой информации и включает в себя всё то, что нужно email-маркет...

Valenti v1.1.8Valenti v1.1.8

Многофункциональная журнальная тема с полной адаптивной вёрсткой для WordPress....

Вертикальное разноцветное меню АккордеонВертикальное разноцветное меню Аккордеон

Красивое разноцветное меню (Аккордеон.

Набор градиентных кнопок на css3Набор градиентных кнопок на css3

Неплохой набор кнопок, в нем вы найдёте кнопки разного цвета, (округлённые, прямоугольные, маленькие)....
  • Текущий 1.67/5
  • 1
  • 2
  • 3
  • 4
  • 5

Рейтинг: 1.7/5( Голосов 9 )

Комментариев в теме: (0)

Авторизация:
YandexGoogleVKMail.ruTwitterFacebookOdnoklassniki


Ваше имя:
Сайт:
Ваша почта:
RSS
Комментарий:
Введите символы:
captcha
Обновить