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

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

ОБСУЖДЕНИЕ

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

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

Многоуровневое горизонтальное меню на css3Многоуровневое горизонтальное меню ...

Отличное горизонтальное выпадающее многоуровневое меню на css3....

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

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

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

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

Горизонтальное меню с меняющимся фономГоризонтальное меню с меняющимся фо...

Красивое меню, с меняющимся фоном, когда вы переходите по категориям, фон автоматически......

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

Неплохое горизонтальное меню с выдвигающимися иконками. Когда вы переходите по навигации, иконки......

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

Меню с выпадающими пунктами на css

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

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

Карусель изображений «Feature Carousel»Карусель изображений «Feature Carousel»

Стильная карусель изображений с подписями к изображению, если быть точнее, то это плагин «Feature Carousel», плагин довольно полезен, с его помощью мо...

Сборка кнопок на cssСборка кнопок на css

Лёгкая подборка кнопок на css, в подборку вошли восемь разных кнопок созданных с помощью css....

ClockerClocker

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

Прозрачная контактная форма на css3Прозрачная контактная форма на css3

Прозрачная контактная форма на CSS3 в тёмном стиле. В форме реализована проверка полей......

Слайдер в стиле AppleСлайдер в стиле Apple

Стильный слайдер в стиле Apple на css и jquery, в слайдере используется красивый эффект перехода между категориями....

стильные кнопки css3Стильные кнопки css3

В данном примере представлены красивые кнопки для сайта реализованные на чистом css3....

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

Слайдер картинок, с бесконечной прокруткой, в слайдере имеется красивый эффект......
  • Текущий 1.75/5
  • 1
  • 2
  • 3
  • 4
  • 5

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

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

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


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