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

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

ОБСУЖДЕНИЕ

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

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

Горизонтальное прокручивающиеся меню «Scrollable Menu»Горизонтальное прокручивающиеся мен...

Прокручивающиеся меню в виде картинок, меню фиксируется внизу страницы, при наведении курсора мыши на......

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

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

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

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

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

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

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

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

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

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

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

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

Lotus Flower v1.2Lotus Flower v1.2

Lotus Flower - это современный универсальный шаблон для WordPress с адаптивной вёрсткой и большим функционалом....

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

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

Navigation SlaiderNavigation Slaider

Простой слайдер на jquery, имеет меню расположенное с левой стороны, также вы можете задать текст, который будет......

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

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

Горизонтальное прокручивающиеся меню «Scrollable Menu»Горизонтальное прокручивающиеся меню «Sc...

Прокручивающиеся меню в виде картинок, меню фиксируется внизу страницы, при наведении курсора мыши на......

ZeniZeni

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

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

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

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


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