Css html горизонтальное меню: Как сделать горизонтальное меню с наклоном?

Содержание

Создание горизонтального меню в CSS

3059 Посещений

Откройте HTML-документ и добавьте в него блок <div> с простым нумерованным списком с тем отличием, что одному из пунктов нужно присвоить id:

<div>

<ul>

<li><a href="#">Пункт 1</a></li>

<li><a href="#">Пункт 2</a></li>

<li><a href="#">Пункт 3</a></li>

<li><a href="#">Пункт 4</a></li>

<li><a href="#">Пункт 5</a></li>

</ul>

</div>

Обратите внимание на то, что решетка (#) ー URL-адрес ссылки. Следующая задача ー сделать так, чтобы пункты меню располагались не один над другим, а рядом. Для этого нужно создать правило CSS:

#menu ul li {

display: inline;

}

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

#menu ul {

border-bottom:2px solid #000000;

margin-left:0;

padding:4px 0;

}

Создадим “прямоугольники”, в которых будут располагаться пункты меню и зададим внутреннее расстояние:

#menu ul li a {

text-decoration:none;

margin-left:3px;

border:1px solid #000000;

padding: 3px 4px;

border-bottom:0;

background:#CEDEFF;

}

Настройте то, как будут отображаться пункты меню, на которые посетитель сайта уже заходил:

#menu ul li a:link {

color:#493;

}

#menu ul li a:visited {

color:#647;

}

#menu ul li a:hover {

color:#000;

background:#6699FF;

border-color:#227

}

Укажите вид пункта текущей страницы и сохраните изменения:

#menu ul li a#nowopen {

background:#fff;

border-bottom: 1px solid #fff;

}

Если вы хотите выровнять меню по центру, добавьте в правило CSS следующее:

#menu {

margin:0 25% 0 25%;

}

Меню в браузере:

горизонтальное » Скрипты для сайтов

7 570 Скрипты / Menu & Nav

Эффект зачеркивания при наведении в меню

Эффект зачеркивания при наведении на пункт в горизонтальном меню. Наиболее эффектно будет смотреться на лендингах, где горизонтальное меню расположено поверх фонового изображения.

5 306 Скрипты / Menu & Nav

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

Небольшой скрипт, который поможет в создании более эстетического адаптивного горизонтального меню. Если размер экрана не позволяет отобразить все пункты горизонтального меню, то данный скрипт перемещает эти пункты в выпадающее меню - "три точки". Использование этого скрипта, позволит отображать адаптивную иконку (гамбургер), тогда, когда вы сами это решите, так как меню теперь будет всегда смотреться аккуратно.

5 661 Скрипты / Menu & Nav

Диагональное меню на CSS

Используя возможности CSS3 в этом уроке сделаем диагональное меню, и напишем media queries, чтобы придать ему адаптивности.

2 687 Скрипты / Menu & Nav

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

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

5 081 Скрипты / Menu & Nav

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

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

2 968 Скрипты / Menu & Nav

Размытое меню на CSS3

Простое горизонтальное меню с эффектом размытия и с элементом адаптивности. Используется CSS3 и HTML5.

2 859 Скрипты / Menu & Nav

HorizontalNav - горизонтальная навигация

JQuery плагин, позволяющий сделать горизонтальную навигацию, которая будет занимать всю ширину контейнера в котором находится. Добавлена также и поддержка IE7.

4 015 Скрипты / Menu & Nav

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

Горизонтальное меню с выпадающими подпунктами. Выпадающие элементы используют jQuery, все остальное оформлено на CSS. В демо включен практически макет сайта, осталось только заполнить центральную часть контентом и нарисовать красивую шапку. Но можно использовать и только саму идею меню.

2 004 Скрипты / Menu & Nav

Меню с эффектом подпрыгивания

Интересное подпрыгивающее меню (bounce), сделанное с помощью псевдо элементов и пользовательских атрибутов на CSS3. В примере простое горизонтальное и горизонтальное с выпадающими под пунктами меню.

2 979 Скрипты / Menu & Nav

Многоуровневое выпадающее меню

Многоуровневое выпадающее меню на CSS2. При этом работает оно в IE5.5, IE6, IE7, IE8, Firefox, Opera, Safari(PC) и Google Chrome.

2 064 Скрипты / Menu & Nav

Многоцветное меню на CSS3

Горизонтальное выпадающее меню, фишка которого состоит в том, что выпадающие блоки могут изменять цвет на тот, по какому из цветных квадратиков вы щелкните мышкой. При этом смена цвета реализована на CSS, а не на jаvascript.

2 697 Скрипты / Menu & Nav

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

Выпадающее меню на CSS3 сделанное на базе UI созданного Владимиром Кудиновым.

Горизонтальное меню для сайта на HTML и CSS — подробная верстка

На чтение 4 мин. Просмотров 360 Опубликовано Обновлено

В этой статье мы расскажем как сделать горизонтальное меню для сайта с помощью HTML и CSS.

HTML код горизонтального меню

Общепринятым считается создание меню с помощью стандартного списка. И так, создадим файл index.html и запишем в него следующий код:

 
<nav>
    <ul>
      <li><a href="">Страница-1</a></li>
      <li><a href="">Страница-2</a></li>
      <li><a href="">Страница-3</a></li>
      <li><a href="">Страница-4</a></li>
      <li><a href="">Страница-5</a></li>
      <li><a href="">Страница-6</a></li>
      <li><a href="">Страница-7</a></li>
    </ul>
 </nav>

Тег <nav> (от англ. Navigation перевод: Навигация), который обрамляет наш список и в HTML верстке указывает на блок с навигационным меню сайта.

Сохранив и открыв файл index.html в браузере мы увидим следующую картину:

Элементы меню стандартно расположились вертикально и у каждого элемента <li> появилась точка слева (так называемая маркером). Давайте оформим меню согласно нашим условиям.

Стилизация меню с помощью CSS

Для того чтобы начать оформлять наше меню создадим файл style.css, куда мы будем вписывать код CSS. А в index.html пропишем путь до созданного файла style.css. Полный код HTML будет выглядеть следующим образом:


<!DOCTYPE html>
<html lang="ru">
<head>
  <title>Sample</title>
  <meta charset="UTF-8">
  <link rel="stylesheet" href="style.css"> <!-- Путь до нашего файла style.css -->
</head>
<body>
  <nav>
    <ul>
      <li><a href="">Страница-1</a></li>
      <li><a href="">Страница-2</a></li>
      <li><a href="">Страница-3</a></li>
      <li><a href="">Страница-4</a></li>
      <li><a href="">Страница-5</a></li>
      <li><a href="">Страница-6</a></li>
      <li><a href="">Страница-7</a></li>
    </ul>
  </nav>
</body>
</html>

Для начала нам необходимо добавить голубой фон нашему меню и сделать внутренние отступы по вертикали и горизонтали, чтобы текст ссылок не прилипал к краям нашего блока с меню. Открываем файл style.css и записываем следующий код:

 
nav {
  padding: 16px 0;
  background-color: #199BCA;
}

В результате фон нашего меню стал голубым и появились внутренние отступы сверху, слева, справа и снизу.


Далее убираем маркеры в виде точек у тега <ul>, а также сбрасываем на ноль значения padding и margin, чтобы убрать лишние отступы у меню. И центрируем наш список по центру горизонтали.



nav ul {
  list-style-type: none;
  padding: 0;
  margin: 0;
  text-align: center;
}


Ну и наконец выравниваем список меню по горизонтали с помощью display: inline-block. Делаем отступы слева для каждого элемента <li> с помощью margin-left: 10px. Для первого элемента <li> используем псевдокласс :first-child со значением margin-left 0px. Для более четкого восприятия ссылок сделаем все буквы и цифры строчными с помощью text-transform со значением uppercase.



nav ul li {
display: inline-block;
  margin-left: 10px;
  text-transform: uppercase;
}
nav ul li:first-child {
  margin-left: 0px;
}


А теперь немого приведем в порядок визуальное оформление горизонтального меню убрав нижнее подчеркивание и окрасим текст в белый цвет. Для этого тегу <a> применим следующие CSS свойства:



a {
  color: #fff;
  text-decoration: none;
}


В результате получим окончательный пример меню:

Итог: в этой статье мы рассмотрели как сделать меню горизонтально с помощью CSS.

В следующей статье мы рассмотрим как сделать мобильное меню с помощью CSS и JQUERY

Выпадающее горизонтальное меню на css

Для того, чтобы использовать выпадающее горизонтальное меню, достаточно скопировать его html-код в нужное место на вашей странице, и добавить css в ваш файл стилей.

<ul>
<li><a href="#">Меню 1</a>
<ul>
<li><a href="#">Подменю 1</a></li>
<li><a href="#">Подменю 2</a></li>
<li><a href="#">Подменю 3</a></li>
</ul>
</li>
<li><a href="#">Меню 2</a>
<ul>
<li><a href="#">Подменю 1</a></li>
<li><a href="#">Подменю 2</a></li>
<li><a href="#">Подменю 3</a></li>
</ul>
</li>
<li><a href="#">Меню 3</a>
<ul>
<li><a href="#">Подменю 1</a></li>
<li><a href="#">Подменю 2</a></li>
<li><a href="#">Подменю 3</a></li>
</ul>
</li>
<li><a href="#">Меню 4</a></li>
<li><a href="#">Меню 5</a></li>
</ul>

Работоспособность данной конструкции проверена в трех основных браузерах: Mozilla Firefox, Opera, и Internet Explorer.

Этот CSS проходит проверку по стандарту CSS3 !

* {
margin:0;
padding:0;
}
#nav {
font:13px verdana, arial, helvetica, sans-serif;
list-style-type:none;
width:100%;
height:25px;
display:inline-block;
background:#A39E92;
line-height:25px;
}
#nav li{
float:left;
width:120px;
margin-top:-10000px;
}
#nav li a {
width:120px;
text-decoration:none;
text-align:center;
color:#3A3732;
position:relative;
float:left;
margin-right:-119px;
margin-top:10000px;
}
#nav li a:hover, #nav li a:focus, #nav li a:active {
background:#797466;
margin-right:0;
color:#fff;
}
#nav li ul {
background:#A39E92;
float:left;
margin-top:-25px;
padding-top:25px;
margin-bottom:-10000px;
list-style-type:none;
}
#nav li ul li {
float:none;
margin:0;
width:auto;
}
#nav li ul li a {
float:none;
display:block;
margin:0;
margin-right:-1px;
background:#BFBCB5;
}

Скачать выпадающее горизонтальное меню

Иногда работающие в IE и Firefox'е стили, неработают или работают не корректно в Oper'е и наоборот, перед тем как применить "рецепт" проверяйте его работу в разных браузерах.

Подборка различных менюшек. 1 часть - горизонтальные меню | «NARDOdesign» - школа веб-дизайна | Разработка и создание сайтов | Графический веб-дизайн | Фирменный стиль | Как создавать сайты | Инструкции по созданию сайтов

Если Вас интересуют качественные и новые HTML и CSS темплейты, уникальные и свежие JavaScript решения, актуальные уроки по фотошопу и графическому дизайну, рекомендации и примеры уроков по созданию красивых и оригинальных сайтов, или Вы хотите быть в курсе последних новинок и трендов в веб разработке? Тогда Вы попали именно туда! Также не останутся в стороне вопросы связанные с продвижением сайта в поисковиках – СЕО и оптимизация. Рассмотрим основные моменты качественного наполнения сайта – копирайтинг , веб-райтинг, нейминг итд. Надеюсь у нас Вам понравиться 😉

Театр начинается с вешалки – так принято говорить. Для большинства пользователей в сети мнение об удобности и юзабилити сайта завязано не только на его дизайне и внешней привлекательности. Большое значение имеет удобная навигация. Очень часто в погоне за стилем молодые и не очень веб-дизайнеры пытаются изобрести велосипед создавая громоздкие и несуразные менюшки, которые может быть, и несут эстетику в массы, но совсем не предназначены для быстрого и понятного путешествия по сайту. В итоге клиент такого сайта зачастую не может с первого раза найти то, что именно ему нужно, это ведет к раздражению и не восприятию сайта – а ведь изначально задачу планировали ровно противоположную. Поэтому мой девиз – не перемудри! Старайтесь меню делать такое, чтобы клиент с первого взгляда  мог определиться в какой раздел ему нужно.  Соблюдайте логику при создании разделов и по возможности  создавайте меньше вложенных списков – среднестатистический юзер не ищет головоломки в сети и хочет видеть и понимать все и сразу. 
Предлагаю Вашему вниманию подборку различных менюшек, глядя на них, возможно Вы почерпнете что-то полезное для Вас.

Мега подборка различных менюшек на любой вкус.

Часть первая – горизонтальные меню.

 

Сетка аккордеон на JQuery

 

Большая сетка аккордеон с применением Query JavaScript. Удобно для больших мега-меню. Выделенный пункт увеличивается как по горизонтали так и по вертикали.

Демо | Скачать

 

Простое меню с большими элементами

 

Простое меню с применением jQuery. Полноценно работает в Safari и Chrome.

Демо | Скачать

 

Меню в стиле гаражных дверей на jQuery

Простая менюшка с эффектом открытия гаражных ворот при наведении

Демо | Скачать

 

JavaScript выпадающего меню в несколько уровней

 

Демо | Скачать

 

Огромное горизонтальное меню на основе javascript #1

 

Демо | Скачать

 

Огромное горизонтальное меню на основе javascript #2

 

Демо | Скачать

 

Огромное горизонтальное меню на основе javascript #3

 

Демо | Скачать

 

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

 

Демо | Скачать

 

Анимационное меню  на JQuery

 

Демо | Скачать

 

Затухающее меню с JQuery

 

Красивое простое меню с эффектом затухания.

Демо | Скачать

 

Большое выпадающее меню в верху сайта

 

Демо | Скачать

 

Apple style меню

 

Демо | Скачать

 

Выпадающее Apple style меню Nav с HTML5, CSS3 и JQuery

 

Демо | Скачать

 

Минималистичное мультиуровневое меню

 

Демо | Скачать

 

Магическая линия на JQuery

 

Меню с интерсным эффектом задержки фона или подчеркивания. Базируется на JQuery.

Демо | Скачать

 

Минималистичное jQuery меню

 

Минималистичное меню с выпадающим списком, работает даже в старых версиях броузеров (IE 6)

Демо | Скачать

 

Интересное вертикальное меню

 

Демо | Скачать

 

Необычное раздвижное меню на Mootools

 

Демо | Скачать

 

Интересное горизонтальное разъезжающееся меню

 

Демо | Скачать

 

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

 

Демо | Скачать

 

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

 

Демо | Скачать

 

Полнофункциональное меню с применением jQuery

 

Демо | Скачать

 

Крутая анимация при помощи CSS и JQuery

 

Демо | Скачать

 

Анимированные меню при помощи jQuery

 

Демо | Скачать

 

Размывающееся CSS меню

 

Демо

 

Элегантное меню на CSS

 

Демо | Скачать

 

Большое меню на CSS

 

Демо | Скачать

 

Анимированное меню с применением CSS

 

Демо

 

CSS выпадающее мега-меню

 

Демо | Скачать

 

Статичное меню на jQuery

 

Демо | Скачать

 

Очень стильное и красивое меню с применением jQuery

 

Демо | Скачать

 

Стильное анимированное меню

 

Демо | Скачать

 

Красивое горизонтальное выезжающее меню

 

Демо | Скачать

 

Стильное меню на jQuery с применением слайдов

 

Демо | Скачать

 

Элегантное меню

 

Демо | Скачать

 

Меню на основе CSS3

 

Демо

 

Стильное меню на основе CSS

 

Демо

 

Простое меню на JavaScript

 

Демо

 

Стильное меню-аккордеон с картинками

 

Демо | Скачать

 

Меню в виде перекрывающихся вкладок

 

Демо | Скачать

 

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

 

Демо | Скачать

 

CSS выпадающее меню

 

Демо | Скачать

 

Минималистичное CSS меню с выпадающим списком

 

Демо

 

CSS меню с анимацией

 

Демо | Скачать

 

Стильная навигация при помощи CSS3

 

Демо | Скачать

 

Необычное горизонтальное меню

 

Демо | Скачать

 

Стильное выпадающее меню с применением jQuery а также CSS

 

Демо | Скачать

 

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

 

 Демо | Скачать

 

Стильное горизонтальное меню на основе CSS

 

Демо | Скачать

 

Исчезаюшее меню с jQuery

 

Демо



Please enable JavaScript to view the comments powered by Disqus. blog comments powered by Disqus

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

Меню – один из главных элементов на веб-странице. Практически на каждом сайте используется меню, хотя сегодня они настолько разнообразны, что некоторые даже сложно такими назвать. Сегодня мы попробуем сделать простое, но практичное горизонтальное меню, используя только CSS и HTML.

 

HTML

По традиции, начнем с HTML разметки. Ничего сложного – меню будет опираться на список.

<ul>
        <li><a href="#">О нас</a></li>
        <li>
                <a href="#">Статьи</a>
                <ul>
                        <li><a href="#">HTML</a></li>
                        <li><a href="#">CSS</a></li>
                        <li><a href="#">jQuery</a></li>
                </ul>
        </li>
        <li>
                <a href="#">Видео курс</a>
        </li>
        <li>
                <a href="#">Материалы</a>
        </li>
        <li>
                <a href="#">Форум</a>
        </li>
</ul>

Обратите внимание на вложенный список во второй пункт списка. Часто главных пунктов меню не достаточно, нужно что бы они разбивались на подпункты. Для этого мы используем вложенный список.

CSS

Дальше рассмотрим стили нашего меню.

#menu {
        padding: 0;
        margin: 0;
        font-family:  Verdana;
        }
#menu li {
        list-style: none;
        float: left;
        height: 30px;
        padding: 0;
        margin: 0;
        width: 150px;
        text-align: center;
        background:  #95DF8E;
        position: relative;
        padding-top: 12px;
        }
#menu li ul {
        list-style: none;
        padding: 0;
        margin: 0;
        width: 150px;
        display: none;
        position: absolute;
        left: 0;
        top: 42px;
        }
#menu li ul li {
        float: none;
        height: 30px;
        margin: 0;
        width: 150px;
        text-align: center;
        background: #95DF8E;
        }
#menu li a {
        display: block;
        width: 150px;
        height: 30px;
        color:    #006A35;
        text-decoration: none;
        }

  #menu li:hover ul{
          display: block;
          }
  #menu li:hover{
          background: #35C835;
          }

Как видите, ничего сложного и страшного тут нету. С помощью display:none мы прячем наши подпункты, а при наведение снова показуем их. Так же при наведение мы изменяем цвет заливки, что бы пользователь видел, что он нажимает.

Готово!

Надеюсь, эта простая статья поможет вам, и вдохновит на новые проекты. В скором времени я расскажу как улучшить наше меню с помощью библиотеки jQuery.

CSS Вертикальная панель навигации


Вертикальная панель навигации

Чтобы создать вертикальную панель навигации, вы можете стилизовать элементы внутри списка, в дополнение к коду с предыдущей страницы:

Объяснение примера:

  • дисплей: блок; - Отображение ссылок как блочных элементов составляет целое область ссылки кликабельна (не только текст), и это позволяет нам указать ширину (а также отступы, поля, высота и т. д.если хотите)
  • ширина: 60 ​​пикселей; - Элементы блока занимают всю ширину, доступную по умолчанию. Мы хотим указать ширину 60 пикселей

Вы также можете установить ширину

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *