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

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

ОБСУЖДЕНИЕ

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

Горизонтальное меню на css
Просмотров: 3359  Скачан: 293 раз  Комментариев в теме: 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>
Материалы по теме:

Горизонтальное меню в виде куба «Boxes Menu»Горизонтальное меню в виде куба «Bo...

Меню в виде куба с красивым эффектом трансформации....

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

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

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

Горизонтальное меню на css3 с замечательным эффектом....

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

Красивое горизонтальное меню, используется изображения и анимация текста....

Jquery меню горизонтальноеJquery меню горизонтальное с анимир...

Оригинальное Jquery меню для вашего сайта с анимированным фоном, меню представлено в трёх вариантах на ваш выбор....

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

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

Выпадающее меню на css3Выпадающее меню на css3

Красивое выпадающее меню с применением иконического шрифта, меню полностью на css3......
Интересные публикации:

Новостной слайдер «Lof JSliderNews 2.0»Новостной слайдер «Lof JSliderNews 2.0»

Неплохой новостной слайдер, отлично подойдёт для вывода последних новостей на сайте, в слайдере есть дополнительная панель с миниатюрами......

Слайдер (слайд-шоу) на css и jqueryСлайдер (слайд-шоу) на css и jquery

Довольно простой слайдер с предусмотренным слайд-шоу, если вам нужно, что-то простое, без каких либо наворотов (дополнительных панелей, кнопок и т.д)...

Прозрачная форма регистрации с прогресс баромПрозрачная форма регистрации с прогресс ...

Стильная прозрачная форма регистрации на css3 и JQuery. В форме имеется прогресс бар показывающий пользователю процесс заполнения формы....

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

Выпадающее мульти меню, как вариант вывода безграничного количества пунктов....

Paris ClarkParis Clark

Красивый html шаблон Paris Clark, на главной странице используется привлекательный слайдер, имеется портфолио, контактная форма......

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

Стильное горизонтальное меню с выдвижными иконками

ZeniZeni

Красивый шаблон построенный на html5 для блога или портфолио, на главной странице расположен привлекательный слайдер......
  • Текущий 1.60/5
  • 1
  • 2
  • 3
  • 4
  • 5

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

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

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


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