Меню на css горизонтальное: Горизонтальное меню для сайта

Разное 

Содержание

Горизонтальное меню с CSS — CodeRoad



Я пытаюсь сделать горизонтальное меню с CSS, но наткнулся на препятствие. То, что я пытаюсь сделать, — это сделать так, чтобы первый блок ссылок bblock и последний блок ссылок имели закругленные углы с использованием css3. Мне удалось составить меню, но я не могу добиться желаемого эффекта.

Я попробовал стилизовать эти отдельные элементы списка, но эффект не проявился. Я прикрепляю свои css и html, чтобы кто-нибудь посмотрел. Любые указатели будут оценены по достоинству

<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About Us</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Events</a></li>
<li><a href="#">Gallery</a></li>
<li><a href="#">Testimonials</a></li>
<li><a href="#">Contact</a></li>
</ul>

#nav {
  margin-left: 9px; 
  padding:0; 
  margin-top: 30px; 
  margin-bottom: 10px; 
  list-style:none; 
  clear:both ;   
}   
#nav li {
  float:left; 
  display:block; 
  width:139px; 
  position:relative;
  z-index:500; 
  margin:0 0; 
 border-left: 1px solid #5d564e;
}
#nav li a {
  display:block; 
  padding:8px 5px 0 5px; 
  font-weight:500;  
  height:50px; 
  text-decoration:none; 
  background: #333; 
  color: #fff; 
  text-align:center; 
  border-left: 1px solid #000; 
}
#nav li a:hover {
  color:#fff; 
  background: #3e7e99; 
  text-decoration:underline;  
}
#nav a.
 
 selected {color:#f00;}
html css
Поделиться
Источник RomeNYRR     08 марта 2012 в 20:23

3 ответа

  • Горизонтальное меню Субнавигации с материалом Angular 2+

    Я пытаюсь создать горизонтальное меню субнавигации, подобное этому , используя Angular Material . HTML и CSS на веб-сайте достаточно просты, но есть ли best practice способ сделать это с помощью фреймворка Angular Material?

  • jsf горизонтальное меню facelet

    я пытаюсь сделать горизонтальное меню, используя JSF, Trinidad и facelets, меню создается так: <f:facet name=navigation2> <tr:navigationTree inlineStyle=display: inline-block; background: white; var=item value=#{menuModel.model}> <f:facet name=nodeStamp>…


2

Вот jsfiddle , использующий css3 для закругления внешних углов первого и последнего элементов списка — если я правильно понимаю, что вы пытаетесь сделать.

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

Поделиться kinakuta    

08 марта 2012 в 20:32


0

Вы должны установить overflow:hidden; для ul .

http://jsfiddle.net/KKPmL/1/

#nav{
    border-radius:10px;
    -moz-border-radius:10px;
    -webkit-border-radius:10px;
    overflow:hidden;
}

Это не работает, если экран недостаточно велик для отображения навигации в одной строке.

Второй метод:

http://jsfiddle.net/KKPmL/2/

#nav li:first-child a{
    border-top-left-radius:10px;
    -moz-border-top-left-radius:10px;
    -webkit-border-top-left-radius:10px;
    border-bottom-left-radius:10px;
    -moz-border-bottom-left-radius:10px;
    -webkit-border-bottom-left-radius:10px;
}
#nav li:last-child a{
    border-top-right-radius:10px;
    -moz-border-top-right-radius:10px;
    -webkit-border-top-right-radius:10px;
    border-bottom-right-radius:10px;
    -moz-border-bottom-right-radius:10px;
    -webkit-border-bottom-right-radius:10px;
}

Поделиться Alex     08 марта 2012 в 20:32


0

px не является допустимым значением, вам нужно 0px или просто 0

Также лучше использовать классы first и last

(или аналогичные) на li

Посмотрите здесь для примера
http://jsfiddle. net/WYuNR/

Поделиться yunzen     08 марта 2012 в 20:37

  • Горизонтальное ценовое меню

    Моя цель-создать горизонтальное ценовое меню с тире между товаром и ценой, и я хотел бы, чтобы оно было отзывчивым и хорошо выглядело. Я хочу сделать это в html/css, и я могу жестко закодировать его, но он не будет таким отзывчивым. Item —————- $180

  • Отзывчивое горизонтальное меню без jQuery

    Я ищу отзывчивое горизонтальное меню, которое динамически сворачивает элементы, которые не помещаются в раздел more меню. Довольно точно, как в этом примере: http://www.jqueryscript.net/демо/Responsive-Horizontal-Nav-Menu-with-jQuery-CSS Поскольку я собираюсь использовать его в статической…

Похожие вопросы:


CSS горизонтальное выравнивание меню в ячейке

У меня есть горизонтальное меню CSS в ячейке таблицы. Я установил выравнивание ячейки на align=right .., и меню CSS находится в этой ячейке, но оно не выровнено по правому краю… смотрите код HERE…


css — горизонтальное меню — фон-цвет

У меня есть горизонтальное меню. Я хочу, чтобы вокруг меню была граница (не вся строка, а только пространство меню). Когда я ставлю границу на ul, она охватывает всю строку, когда я ставлю границу…


Скрыть горизонтальное переполнение меню CSS

У меня есть горизонтальное выпадающее меню CSS в http:/ / www.stevemoorecpa.dreamhosters.com / Моя проблема в том, что ширина меню выходит за пределы оболочки сайта, и я не могу заставить его…


Горизонтальное меню Субнавигации с материалом Angular 2+

Я пытаюсь создать горизонтальное меню субнавигации, подобное этому , используя Angular Material . HTML и CSS на веб-сайте достаточно просты, но есть ли best practice способ сделать это с помощью…


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

я пытаюсь сделать горизонтальное меню, используя JSF, Trinidad и facelets, меню создается так: <f:facet name=navigation2> <tr:navigationTree inlineStyle=display: inline-block; background:. ..


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

Моя цель-создать горизонтальное ценовое меню с тире между товаром и ценой, и я хотел бы, чтобы оно было отзывчивым и хорошо выглядело. Я хочу сделать это в html/css, и я могу жестко закодировать…


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

Я ищу отзывчивое горизонтальное меню, которое динамически сворачивает элементы, которые не помещаются в раздел more меню. Довольно точно, как в этом примере:…


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

Я пытаюсь сделать горизонтальное выпадающее меню в CSS. Однако он появляется вертикально: Я хочу, чтобы два самых верхних пункта меню были горизонтальными. Что я могу сделать, кроме как сделать…


Верхнее горизонтальное меню Prestashop 1.6

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

..


Горизонтальное меню только с изображением Css

Я новичок в Asp.net и CSS . Мне нужно показать только горизонтальное меню Изображения, как это image 1 image 2 image 3 image 4 Поэтому я попробовал вот так CSS #UlIcon { height: 100%;…

Создаем горизонтальное выпадающее меню на CSS – Zencoder

В предыдущей статье “Создаем вертикальное меню на CSS” был освещен вопрос построения вертикального меню с подменю.

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

со значениями и .

При построении горизонтального меню нужно быть внимательным с принципом специфичности CSS, то есть — с вложенностью и каскадностью правил. Хорошим подспорьем в этом вопросе является SASS (SCSS), благодаря которому исключаются ошибки при соблюдении каскадности и наследовании свойств.

Код, написанный на SASS (SCSS) короче и логически читается проще, чем CSS. Поэтому, рекомендую изучить этот вопрос в статьях “SASS (SCSS) в картинках — Часть 1”, “SASS (SCSS) в картинках — Часть 2”.

Мы же приступим к созданию горизонтального меню с подменю “на коленках”. Почему говорю так? Дело в том, что существует масса готовых примеров и кода, а также генераторов различных меню. Но они неинтересны — нам нужно разобраться в принципе построения и возможности самому написать такую навигацию. Как обычно, начинаем с каркаса меню, выполненного на HTML:

<ul>
  <li>
    <a href="#">Link_1</a>
      <ul>
      <li>
        <a href="#">Link_1-1</a>
      </li>
      <li>
        <a href="#">Link_1-2</a>
      </li>
      <li>
        <a href="#">Link_1-3</a>
      </li>
      <li>
        <a href="#">Link_1-4</a>
      </li>
    </ul>
  </li>
  <li>
    <a href="#">Link_2</a>
  </li>
  <li>
    <a href="#">Link_3</a>
      <ul>
      <li>
        <a href="#">Link_3-1</a>
      </li>
      <li>
        <a href="#">Link_3-2</a>
      </li>
      <li>
        <a href="#">Link_3-3</a>
      </li>
    </ul>
  </li>
  <li>
    <a href="#">Link_4</a>
  </li>
  <li>
    <a href="#">Link_5</a>
      <ul>
      <li>
        <a href="#">Link_5-1</a>
      </li>
      <li>
        <a href="#">Link_5-2</a>
      </li>
      <li>
        <a href="#">Link_5-3</a>
      </li>
      <li>
        <a href="#">Link_5-4</a>
      </li>
      <li>
        <a href="#">Link_5-5</a>
      </li>
    </ul>
  </li>
</ul>

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

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

Приступим к оформлению нашего меню с помощью CSS. Сразу оговорюсь, что примеры кода, представленного здесь, написаны на SASS (SCSS). Начнем с того, что расположим навигацию горизонтально:

.hormenu{
  margin: 50px 0 0 50px;
  overflow: hidden;
  li{
    float: left;
    margin-left: 1px;
    &:first-child{
      margin-left: 0;
    }

Думаю, ничего загадочного в этой части кода нет. Делаем отступ для меню и располагаем элементы внутри него горизонтально с помощью свойства . Предотвращаем схлопывание () блока-родителя , прописав для него .

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

Далее оформляем ссылки внутри пунктов . Делаем ссылки блочными, чтобы кликабельной была вся область пункта навигации и задаем для нее высоту. Также указываем интерлиньяж, чтобы выровнять текст по вертикали и для выравнивания по горизонтали. Цвет фона и цвет текста — как обычно.

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

Возможна ситуация, когда пункт подменю по ширине будет больше, чем пункт основного меню, и тогда ребенок “растянет” своего родителя.

При скрытии же подменю пункты основного меню будут “сжиматься”, уменьшая ширину до своей собственной. Вот для этой цели и применяется явное задание ширины элемента :

a{
  display: block;
  line-height: 25px;
  height: 25px;
  width: 130px;
  text-align: center;
  background-color: #ccc;
  color: #ccc - #555;
  position: relative;
}

Продолжим стилизацию нашей навигации и займемся подменю, а точнее — его подпунктами . Уберем у этих элементов плавание влево и левый , чтобы они не наследовали эти свойства. Убираем плавание, чтобы элементы расположились вертикально, а левый — убрать “лесенку”:

li{
  float: none;
  margin: 0 0 1px 0;

Стилизуем ссылки пунктов подменю. Делаем фоновую заливку чуть светлее, чтобы отличалась от основного меню, а текст — чуть темнее по той же причине. Ну и анимация пунктов при наведении курсора мыши:

a{
  background-color: #ccc + #111;
  color: #ccc - #333;
  &:hover{
    background-color: #ccc + #222;
  }
}

Теперь самое главное — сделаем подпункты меню выпадающими. Для этого сначала спрячем его, убрав из DOM-модели HTML-документа с помощью значения свойства :

.sub-hormenu{
  display: none;

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

&:hover .sub-hormenu{
  display: block;
}

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

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

. arrow:after{
  content: '';
  position: absolute;
  top: 50%;
  left: 80%;
  width: 0;
  height: 0;
  border-top: 4px solid #ccc - 666;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  margin-top: -2px;
}

Вот, в принципе, и все. Основная задача выполнена и горизонтальное меню с выпадающим подменю у нас работает. Конечно, можно озадачиться целью “окрасить” активный пункт основного меню в тот же цвет, что и у подменю. Но эта проблема не входит в рассмотрение поставленной нами задачи. Ниже представлен полный код правил CSS (SCSS) для нашего меню:

@import "compass/reset";

 a{
   text-decoration: none;
 }

 .arrow:after{
   content: '';
   position: absolute;
   top: 50%;
   left: 80%;
   width: 0;
   height: 0;
   border-top: 4px solid #ccc - 666;
   border-left: 4px solid transparent;
   border-right: 4px solid transparent;
   margin-top: -2px;
 }

 .hormenu{
   margin: 50px 0 0 50px;
   overflow: hidden;
   li{
     float: left;
     margin-left: 1px;
     &:first-child{
       margin-left: 0;
     }
     &:hover . sub-hormenu{
       display: block;
     }
     .sub-hormenu{
       display: none;
       li{
         float: none;
         margin: 0 0 1px 0;
         a{
           background-color: #ccc + #111;
           color: #ccc - #333;
           &:hover{
             background-color: #ccc + #222;
           }
           &:after{
             content: none;
           }
         }
       }
     }
     a{
       display: block;
       line-height: 25px;
       height: 25px;
       width: 130px;
       text-align: center;
       background-color: #ccc;
       color: #ccc - #555;
       position: relative;
     }
   }
 }

… и то, как оно выглядит:

На этом все.

cssdropdown menu

Горизонтальное резиновое меню | Vavik96

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

See the Pen Горизонтальное резиновое меню by vavik (@vavik96) on CodePen.


В качестве структуры для меню используем обычный список ul с элементами li. Кроме того, вместо ul и li можно использовать обычные блоки div, результат будет такой же.

HTML

<div>
    <ul>
        <li><a href="#">Main</a>
        </li>
        <li><a href="#">About company</a>
        </li>
        <li><a href="#">Development</a>
        </li>
        <li><a href="#">Products</a>
        </li>
        <li><a href="#">Store</a>
        </li>
        <li><a href="#">Contacts</a>
        </li>
    </ul>
</div>

Для того, чтобы меню тянулось на всю ширину страницы, пишем для ul правила display: table; width: 100%, обнуляем все отступы margin и padding. Для пунктов li указываем display: table-cell, а также float: none (в случае если для элементов уже прописано правило float: left, которое не позволит растянуть меню на всю ширину родительского контейнера). Ссылки внутри li объявляются блоками для удобства их дальнейшего «раскрашивания»: ссылка растянется на всю ширину элемента li. Дописываем различные правила для текста, фона и необходимые отступы. Важное замечание: данный способ не будет работать в IE7 и ниже.

CSS

.menu {
    display: table;
    width: 100%;
    margin: 0;
    padding: 0;
}

.menu li {
    display: table-cell;
    float: none;
}

.menu li a {
    display: block;
    padding: 8px 15px;
    background: #2767A0;
    font-family: Tahoma;
    font-size: 12px;
    color: #fff;
    text-decoration: none;
    text-align: center;
    text-transform: uppercase;
}

.menu li a:hover {
    background: #528CBF;
    transition: all 0.3s ease;
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0. 3s ease;
    -o-transition: all 0.3s ease;
}

Источник

Подборка различных менюшек. 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

Как сделать горизонтальное меню в Joomla 2.5

 

 

В дистрибутиве  Joomla 2.5 не предусмотрено горизонтальное расположение меню (в отличае от дистрибутива  Joomla 1.5). Но  у многих вебмастеров возникает желание или  необходимость установить горизонтальное меню для своего проекта. Как его сделать?

Приведу несколько примеров как сделать горизонтальное меню для сайта.

 

Как самостоятельно создать горизонтальное меню

Для начала нужно создать меню и присвоить ему заголовок и системное имя (тип меню). 

Затем создать модуль меню и привязать его к раннее созданному пункту меню. 

Затем в настройках шаблона изменить css стиль шаблона css/template.css. Допишите в конце такой код:

#main ul {
display: block;
text-align: left;
color:#2a6bb2;
}
#main  ul li {
display: inline;
margin: 0 !important;
padding: 0;
}

Где main нужно заменить на системное имя вашего меню.

 

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

Для данной задачи будем использовать шаблон Joomla 2.5, который создадим при помощи программы Artisteer. Про программу смотрите: Artisteer программа — помощник web-мастера

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

Далее устанавливаем шаблон на сайт при помощи Менеджера расширений и активируем его.  Таким образом была проведена предварительная подготовка для работы по созданию горизонтального выпадающего меню.
Теперь пришла очередь меню. Создание меню проводим стандартным методом. Создаем пункты меню и подпункты меню, которые будут в горизонтальном меню.
Как сделать подпункт меню? Да очень просто, при создании пункта меню или в режиме его редактирования указать для него «Родительский элемент».

 

На данном скриншоте представлен пример пункта и подпунктов горизонтального меню:
пункт меню — Файл robots.txt для Joomla 2.5
подпункт меню — robots.txt Ошибки и рекомендации.
Аналогичным образом строится иерархия для всех остальных пунктов.

Созданный модуль меню устанавливаем в позиции шаблона “User3”.

После проведения всех вышеприведенных действий будет на сайте горизонтальное  выпадающее меню.

 

Создать горизонтальное меню при помощи модуля ARI Ext Menu

 

Многофункциональный модуль меню Joomla 2.5 ARI Ext Menu предназначен для создания как горизонтального, так и вертикального меню. Выбор типа меню и настройка данного меню описано в статье:
Многофункциональный модуль меню Joomla 2.5

Что такое CSS спрайт? Горизонтальное меню на CSS спрайтах

Как запустить видеоурок:
  1. Разархивировать скачанный файл.
  2. Открыть папку index.
  3. Запустить файл index. html в браузере.
В прошлом уроке по CSS мы освоили очень полезную фишку — установка на сайт заглушки старых браузеров. В этом видеоуроке мы будем создавать горизонтальное меню при помощи CSS спрайтов.

Что такое спрайт?

Спрайт — это изображение, в состав которого включено некоторое количество более мелких изображений. На своих экранах вы видите пример спрайта. В нем находится 12 маленьких изображений. Давайте посмотрим, что мы имеем на данный момент, и что мы будем иметь в конце видеоурока. Мы видим горизонтальное меню, которое располагается по центру экрана вне зависимости от его ширины. При наведении на пункт меню, у нас меняется фон и цвет текста. При нажатии на пункт меню, у нас тоже меняется фон, но браузер Opera моей версии этого не отображает. Однако все другие современные браузеры это показывают. Поэтому в этом видеоуроке мы будем работать с браузером Firefox.

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

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

Первым делом давайте вернем наши три абзаца текста в блок content.

 <div>
 <div>
 <img src="img/trash_full.png" alt="">
 <h4>Что такое Lorem Ipsum?</h4><img src="img/man_grey.png"><p>Lorem Ipsum - это текст-"рыба", часто используемый в печати и вэб-дизайне. Lorem Ipsum является стандартной "рыбой" для текстов на латинице с начала XVI века. В то время некий безымянный печатник создал большую коллекцию размеров и форм шрифтов, используя Lorem Ipsum для распечатки образцов. Lorem Ipsum не только успешно пережил без заметных изменений пять веков, но и перешагнул в электронный дизайн.</p><br>

<h4>Где его взять?</h4><img src="img/f_user.png"><p>Есть много вариантов Lorem Ipsum, но большинство из них имеет не всегда приемлемые модификации, например, юмористические вставки или слова, которые даже отдалённо не напоминают латынь.  Если вам нужен Lorem Ipsum для серьёзного проекта, вы наверняка не хотите какой-нибудь шутки, скрытой в середине абзаца. Также все другие известные генераторы Lorem Ipsum используют один и тот же текст, который они просто повторяют, пока не достигнут нужный объём. </p><br>

<h4>Почему он используется?</h4><img src="img/barak_obama.png"><p>Давно выяснено, что при оценке дизайна и композиции читаемый текст мешает сосредоточиться. Lorem Ipsum используют потому, что тот обеспечивает более или менее стандартное заполнение шаблона, а также реальное распределение букв и пробелов в абзацах, которое не получается при простой дубликации "Здесь ваш текст.. Здесь ваш текст.. Здесь ваш текст.." Многие программы электронной вёрстки и редакторы HTML используют Lorem Ipsum в качестве текста по умолчанию, так что поиск по ключевым словам "lorem ipsum" сразу показывает, как много веб-страниц всё ещё дожидаются своего настоящего рождения. </p><br>
<h4>Откуда он появился?</h4><img src="img/photo. png"><p>Многие думают, что Lorem Ipsum - взятый с потолка псевдо-латинский набор слов, но это не совсем так. Его корни уходят в один фрагмент классической латыни 45 года н.э., то есть более двух тысячелетий назад. Ричард МакКлинток, профессор латыни из колледжа Hampden-Sydney, штат Вирджиния, взял одно из самых странных слов в Lorem Ipsum, "consectetur", и занялся его поисками в классической латинской литературе. </p><br>
 </div>
 </div>

После каждого шага мы будем проверять, как это смотрится в браузере.

Вторым этапом давайте уберем верхнее изображение. Мы не будем исключать его из кода, а просто зададим ему минусовой z-индекс.

 #header img#pic2 {
 width: 100px;
 height: 100px;
 position: absolute;
 top: 68px;
 left: 490px;
 z-index: -2;
 }

Далее нам нужно определиться с тем, в каком блоке будет располагаться наше меню. Мы можем его расположить в блоке контента либо в оболочке wrapper. Нам нужно, чтобы наше меню находилось в центре экрана, но позиционировать меню мы будем по центру блока, в котором оно находится и никак иначе. Если оно будет находиться в блоке content, то оно будет позиционироваться по центру блока content, но так как наше правое меню больше, чем левое, то блок с нашим горизонтальным меню не будет находиться по центру. Именно поэтому нам нужно располагать наше меню по центру оболочки wrapper. Возможно, это сейчас непонятно, но если вы попробуете расположить меню в блоке content, а потом в оболочке wrapper, то вы заметите разницу.

Давайте пропишем код меню на нашей странице. Я его вставляю после блока content, так как оно должно располагаться над этим блоком.

 <ul>
 <li>
 <a href="page.html" title="Главная">Главная</a>
 </li>

<li>
 <a href="#" title="Обо мне">Обо мне</a>
 </li>
 <li>
 <a href="#" title="О сайте">О сайте</a>
 </li>
 <li>
 <a href="#" title="Контакты">Контакты</a>
</li>
 </ul>

Давайте разберем код нашего меню. Это обычный ненумерованный список. Он имеет идентификатор menu, внутри него есть теги <li></li> — пункты нашего меню, внутри которых находятся ссылки на страницы нашего сайта. В каждом пункте меню по одной ссылке. Сохраняем и смотрим, что у нас получается.

Мы видим, что меню отобразилось ниже всего сайта и виден только пункт меню «Главная» и половина пункта «Об авторе». Чтобы это исправить, нам нужно добавить стили для идентификатора нашего меню.

Переходим в таблицу стилей. Наш спрайт имеет ширину 420 пикселей и высоту 180 пикселей. Для списка с идентификатором menu мы задаем абсолютное позиционирование. Так как оболочка wrapper у нас имеет позиционирование относительное, то это меню будет позиционироваться относительно оболочки wrapper. Потом мы задаем меню left, равный 50%. Чтобы наше меню располагалось по центру крана, мы прописываем ему margin-left, равный -210 пикселей — половина ширины нашего спрайта. Благодаря таким манипуляциям, наше меню будет находиться по центру не зависимо от ширины экрана. Я надеюсь, это понятно. Ну и последний пункт — top в 70 пикселей. Он нужен нам для того, чтобы меню располагалось не в самом верху страницы, а на пересечении хедера и контента.

 ul#menu {
 margin-left: -210px;
 position: absolute;
 left: 50%;
 top: 70px;
 }

Далее мы задаем стили тегам <li>, которые находятся в нашем меню. Каждому пункту меню мы задаем фоновое изображение — наш спрайт. Следует заметить, что фон не должен повторяться. Чтобы наши пункты меню располагались горизонтально, мы прописываем им обтекание left. Ставим значения высоты и ширины каждому пункту меню. Если посмотреть на примере, то синий прямоугольник показывает ширину и высоту каждого пункта меню.

 ul#menu li {
 background: url('img/menu.png') no-repeat;
 float: left;
 height: 60px;
 width: 105px;
 }

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

Теперь давайте добавим стили для ссылок. Значение display: block делает наши ссылки блочным элементом. Мы им задаем ширину и высоту 100%, что означает, что они будут занимать всю область пункта меню. Свойство text-indent с большим отрицательным значением прячет наш текст ссылки за область экрана. Зачем нам текст ссылки, если у нас есть спрайт, на котором мы увидим и фон, и текст?

 ul#menu li a {
 display: block;
 height: 100%;
 width: 100%;
 text-indent: -9999px;
 }

Сохраняем. Смотрим, что получается. У нас исчез текст ссылки, и пункт меню стал полностью кликабельным. Хочу сказать, что половину дела мы уже сделали.

Давайте перейдем в код и добавим еще стили для трех состояний пункта меню home: простое состояние, состояние при наведении и состояние при нажатии. Это только для одного пункта меню. В каждом состоянии мы прописываем лишь одно свойство — background-position. А вот значения в разных состояниях отличаются.

 ul#menu li#home {
 background-position: 0px 0px;
 }

ul#menu li#home:hover {
 background-position: 0px -60px;
 }
 ul#menu li#home:active {
 background-position: 0px -120px;
 }

Давайте посмотрим на примере. Синий прямоугольник показывает вам пункт меню home. Мы видим, что этот пункт включает лишь левую верхнюю часть всего спрайта. Также мы видим две оси: ось Х (значение left) и ось Y (значение top). Простое состояние пункта меню home находится в значении ноль по оси X и Y. Если мы посмотрим, то мы это и прописали. При наведении на пункт меню у нас должна высвечиваться другая часть спрайта. Чтобы это сделать, мы должны переместить фон вверх, а чтобы переместить его вверх, нам нужно задать значение top в -60 пикселей. Здесь обязательно обратите внимание, что мы двигаем не пункт меню, а спрайт. Именно поэтому у нас значение будет отрицательным. То есть по оси Х получается 0 пикселей, а по оси Y — -60. Посмотрим это в коде. Так и есть. Для третьего состояния принцип тот же. По оси X получается 0 пикселей, а по оси Y — -120.

Давайте сохраним и проверим в браузере, что у нас получилось. Наводим мышку на пункт меню «Главная» — она меняет у нас фон и цвет текста. А теперь попробуем нажать. Фон становится чуть темнее.

Теперь давайте пропишем стили для второго пункта меню «Об авторе». Здесь у нас уже будет отрицательное значение и по оси Х. Мы ставим -105 пикселей по оси Х, а дальше все происходит по тому же принципу.

 ul#menu li#author {
 background-position: -105px 0px;
 }
 ul#menu li#author:hover {
 background-position: -105px -60px;
 }
 ul#menu li#author:active {
 background-position: -105px -120px;
 }

Сохраняем. Смотрим, что получается. Второй пункт меню тоже заработал.

То же самое делаем и с остальными пунктами меню.

 ul#menu li#about {
 background-position: -210px 0px;
 }

ul#menu li#about:hover {
 background-position: -210px -60px;
 }

ul#menu li#about:active {
 background-position: -210px -120px;
 }

ul#menu li#contact {
 background-position: -315px 0px;
 }

ul#menu li#contact:hover {
 background-position: -315px -60px;
 }
ul#menu li#contact:active {
 background-position: -315px -120px;
 }

Все пункты меню у нас работают, и на этом можно было бы закончить, но мы видим, что меню мешает заголовку первого абзаца. Эта проблема решается быстро. Нам просто нужно задать отступ от верхнего края для блока content. Зададим 20 пикселей.

 #content {
 background-color: #fff;
 margin: 20px 20% 0 120px;
 padding-bottom: 40px;
 }

Вторая возможная проблема — это когда мы будем уменьшать сайт, то наше горизонтальное меню может залезть на левое и правое меню. Чтобы этого не случилось, мы уже знаем, что нам нужно задать минимальную ширину для блока wrapper. Меняем 600 пикселей на 720.

 #wrapper {
 width: 80%;
 min-width: 720px;
 max-width: 1200px;
 border-left: 1px solid #ccc;
 border-right: 1px solid #ccc;
 margin: 0 auto;
 background-color: #fff;
 text-align: left;
 min-height: 100%;
 height: auto !important;
 height: 100%;
 position: relative;
 }

Сохраняем. Проблема решена.

Поздравляю вас с новыми знаниями. Чтобы их не забыть, вам следует их потренировать на практике. Создайте, например, какое-нибудь красивое вертикальное меню или оформите с помощью спрайтов весь свой сайт. Возможно, это покажется удивительным. Как это так — весь сайт оформить с помощью спрайтов? Но хочу вам сказать, что многие интернет сайты делают большую часть своего оформления при помощи CSS спрайтов, так как они сокращают скорость загрузки сайта. Все-таки есть разница: загрузите вы одно изображение или штук двадцать.

Сервис создания CSS спрайтов

Напоследок  хочу вас познакомить с сайтом, который поможет вам в создании CSS спрайтов — http://csssprites.com. Если у вас уже есть изображения. Например, одно — фон страницы, другое — фон меню, третье — фон хедера, то при помощи кнопки «Обзор» вы их можете загрузить на этот сайт. Если вам требуется больше изображений, то нажмите «need more?». В опциях вы можете отрегулировать отступы между элементами, рамку для изображений, положение элемента (слева или сверху) и фоновый цвет (прозрачный либо RGB). Потом нажимаете кнопку «generate!», после чего у вас генерируется изображение. Чуть ниже у вас есть таблица. В левой колонке указаны все участвующие изображения, а справа указаны стили, чтобы использовать эти изображения. Спрайт вы можете загрузить в формате png либо просмотреть его в формате html. У нас получился спрайт, состоящий из четырех изображений.

Спасибо за внимание. До встречи в следующем видеоуроке!

30 горизонтальных меню для сайта

1. Темно синее CSS меню.

Меню в темно синем стиле 100% ширины.

Демо
Скачать

 2. Стильное зеленое меню.

Меню в зеленом стиле подойдет для многих цветов фона.

Демо
Скачать

 3. Глянцевое меню.

Чёрное меню с оранжевым эффектом при наведении и зеркальным отблеском, применяется на белом фоне.

Демо
Скачать
4. Стильное коричневое меню.

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

Демо
Скачать

 5. Черное глянцевое меню.

Черное меню с глянцевым эффектом на белом фоне.

Демо
Скачать

 6. Округлое синее меню.

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

Демо
Скачать
7. Разноцветное меню

Разноцветное меню с эффектом разгибания уголка при наведении.

Демо
Скачать

 8. Шоколадный стиль меню.

Меню в шоколадном стиле с эффектом выпуклости при наведении.

Демо
Скачать

 9. Блейзер меню.

Блейзер меню, с интересным эффектом при наведении которое, может быть использовано на любом светлом фоне.

Демо
Скачать
10. Flasy меню.

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

Демо
Скачать

 11. Orcom меню.

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

Демо
Скачать

 12. Oplaz Css меню.

Css меню с простым эффектом при наведении курсора, шириной 700 px и зеркальным эффектом.

Демо
Скачать
13. Quaza CSS меню.

Темно красное меню, длиной 700 px с простым эффектом при наведении и оранжевым активным пунктом.

Демо
Скачать

 14. Flosy CSS меню.

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

Демо
Скачать

 15. Vonso CSS меню.
CSS меню с красивым фоном.

Демо
Скачать
16. Razer меню.

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

Демо
Скачать

 17. Brány CSS меню.

Простое меню с закругленными углами.

Демо
Скачать

 18. Capzl CSS меню.

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

Демо
Скачать
19. Skin CSS меню.

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

Демо
Скачать

 20. Nozml меню.

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

Демо
Скачать

 21. Rapak CSS меню.

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

Демо
Скачать
22. Czoo CSS меню.

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

Демо
Скачать

 23. Sapy CSS меню.

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

Демо
Скачать

 24. Голубое CSS меню.

Меню с красивым фоном, имеющим изогнутый вид.

Демо
Скачать
25. Cremy CSS меню.

Меню с затемненными уголками пунктов, может быть использовано на светлых и темных фонах.

Демо
Скачать

 26. Sloon CSS меню.

Светлое меню с оранжевыми активными пунктами.

Демо
Скачать

 27. Artine CSS меню.

Креативное горизонтальное меню.

Демо
Скачать
28. Woody CSS меню.

Меню с необычным оформлением пунктов.

Демо
Скачать

 29. Серебристое меню.

Серебристое меню с удивительным эффектом при наведении курсора, может использоваться на белом фоне.

Демо
Скачать

 30. Глянцевое меню.

Черное глянцевое меню с зеркальным отражением и синим эффектом при наведении курсора.

Демо
Скачать

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

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

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

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

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

    и удалить ширину , поскольку они будут занимать всю ширину, доступную при отображении в виде блочных элементов. Результат будет тот же, что и в нашем предыдущем примере:

    .

    Пример

    ул {
    тип-стиль-список: нет;
    маржа: 0;
    отступ: 0;
    ширина: 60 ​​пикселей;
    }

    ли а {
    дисплей: блок;
    }

    Попробуй сам »

    Примеры вертикальной панели навигации

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

    Пример

    ul {
    list-style-type: none;
    маржа: 0;
    отступ: 0;
    ширина: 200 пикселей;
    цвет фона: # f1f1f1;
    }

    li a {
    дисплей: блокировать;
    цвет: # 000;
    отступ: 8 пикселей 16 пикселей;
    текст-оформление: нет;
    }

    / * Изменить цвет ссылки при наведении * /
    li a: hover {
    цвет фона: # 555;
    цвет: белый;
    }

    Попробуй сам »

    Активная / текущая ссылка для навигации

    Добавьте «активный» класс к текущей ссылке, чтобы пользователь знал, на какой странице он находится:

    Центральные ссылки и добавить границы

    Добавьте text-align: center к

  • или для центрирования ссылок.

    Добавьте свойство border в

      , чтобы добавить границу вокруг панели навигации. Если ты тоже хочешь границ внутри панели навигации, добавьте border-bottom ко всем элементам
    • , кроме последний:

      Пример

      ul {
      border: 1px solid # 555;
      }

      li {
      выравнивание текста: по центру;
      нижняя граница: твердое тело 1px # 555;
      }

      li: последний ребенок {
      нижняя граница: нет;
      }

      Попробуй сам »

      Полноразмерная фиксированная вертикальная панель навигации

      Создать полноразмерную «липкую» боковую панель навигации:

      Пример

      ul {
      list-style-type: none;
      маржа: 0;
      отступ: 0;
      ширина: 25%;
      цвет фона: # f1f1f1;
      высота: 100%; / * Полная высота * /
      положение: фиксированное; / * Заставить прилипнуть, даже при прокрутке * /
      перелив: авто; / * Включить прокрутку, если в боковой навигации слишком много контента * /
      }

      Попробуй сам »

      Примечание: Этот пример может некорректно работать на мобильных устройствах.



      Простая горизонтальная панель навигации CSS с использованием встроенного блока | автор: Chun Ming Wang

      Эффект от каждой строчки кода можно наблюдать с помощью простого образа докера Browser-Sync.

      HTML-код горизонтальной панели навигации выглядит следующим образом.

      Горизонтальную панель навигации можно создать двумя разными способами.Один использует встроенный блок , а другой использует float . В этой статье представлен только метод inline-block .

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

       * {
       размер коробки: рамка-рамка; 
      } body {
       margin: 0; 
       отступ: 0; 
       цвет фона: #ccc; 
      } nav ul {
       стиль списка: нет; 
       отступ: 0; 
       маржа: 0; 
       цвет фона: # 444; 
       выравнивание текста: по центру; / * шаг 6 * / 
      } nav li {
       display: inline-block; / * шаг 1 * / 
       width: 20%; / * шаг 4 * / 
       margin-right: -4px; / * шаг 5 * / 
      } nav a {
       display: block; / * шаг 2 * / 
       text-decoration: none; / * шаг 3 * / 
      } / * общий стиль текста * / 
       nav a {
       font-family: sans-serif; 
       высота: 40%; / * по центру по вертикали * / 
       line-height: 40%; / * по центру по вертикали * / 
       color: #fff; 
      } nav a: hover {
       background-color: # 005f5f; 
      } 
       nav a.активный {
       background-color: #eee; 
       цвет: # 444; Курсор 
      : по умолчанию; 
      }

      Шаг 1: установите display: inline-block для каждого

    • внутри
Автор записи

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

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