RUB
Платежи проходят через сервис ROBOKASSA
visa/mastercard
Visa / MasterCard
qiwi
qiwi
yandex
yandex
beeline
beeline
mts
mts
tele2
tele2
alfa
alfa
sber
sber
ПОСЛЕДНИЕ ПУБЛИКАЦИИ
ПОДПИСКА
Будь В Курсе
Подпишись, и получай эксклюзивные обновления на свой E-Mail:

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

ОБСУЖДЕНИЕ

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

Горизонтальное меню на css
Просмотров: 2880  Скачан: 277 раз  Комментариев в теме: 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 и JQueryРаскрывающиеся горизонтальное меню ...

Красивое раскрывающиеся горизонтальное меню, реализованное на css и jquery. Меню отлично подойдёт для сайта дизайнера или фотографа....

Фиксированная панель с навигацией на css3Фиксированная панель с навигацией н...

Панель фиксируется внизу страницы и имеет не большую навигацию, что очень удобно если вам нужно вывести какие то важные ссылки или информацию....

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

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

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

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

Меню с фоновым изображением «Tab Menu»Меню с фоновым изображением «Tab Me...

Меню с фоновым изображением, при переходе по разделам меню, выбранный вами раздел......

Горизонтальное меню на jQuery «Slick Menu»Горизонтальное меню на jQuery «Slic...

Меню в довольно интересном стиле, меню раскидано в виде картинок, при наведении курсора мыши на картинку......
Интересные публикации:

Cлайдер КарусельCлайдер Карусель

Слайдер картинок, с бесконечной прокруткой, в слайдере имеется красивый эффект......

Социальная выпадающая панель на cssСоциальная выпадающая панель на css

Неплохая социальная панель, при наведении курсора мыши, панель, плавно раскрывается, за тем уже видны сами иконки....

ZeniZeni

Красивый шаблон построенный на html5 для блога или портфолио, на главной странице расположен привлекательный слайдер......

Слайдер на jQuery для сайтаСлайдер на jQuery для сайта "Estro - jQu...

Красивый слайдер на jQuery для прокрутки изображения (картинки) на вашем сайте....

3D плакат с анимацией на чистом css33D плакат с анимацией на чистом css3

3D анимация на чистом css3, добиться такого эффекта удаётся с помощью свойства -webkit-perspective....

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

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

JQuery ползунокJQuery ползунок

Красивый горизонтальный JQuery ползунок (Slider) для сайта, реализованный с помощью JQuery....
  • Текущий 1.60/5
  • 1
  • 2
  • 3
  • 4
  • 5

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

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

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


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