Навигационни ленти с помощта на CSS. CSS и HTML5: Отзивчиво меню за навигация Как да направите навигация в css

• У дома
• Новини
• Контакти
• За нас

Следващата ни задача е да възстановим стиловете на списъка по подразбиране. Трябва да премахнем външната и вътрешната подложка от самия списък и водещите точки от елементите на списъка. След това задайте желаната ширина:

#navbar ( margin: 0; padding: 0; list-style-type: none; width: 100px; )

Най-важната част от нашите промени е предефинирането на вградени елементи към блокови елементи. Сега нашите връзки заемат цялото налично пространство на елементите от списъка, тоест, за да последваме връзката, вече не е необходимо да поставяме курсора точно върху текста.

#navbar a ( цвят на фона: #949494; цвят: #fff; подложка: 5px; украса на текста: няма; тегло на шрифта: получер; ляво поле: 5px плътно #33ADFF; дисплей: блок; ) #navbar li ( border-left: 10px плътен #666; border-bottom: 1px плътен #666; )

Комбинирахме целия код, описан по-горе, в един пример, сега, като щракнете върху бутона за опит, можете да отидете на страницата с примери и да видите резултата:

Заглавие на документа #navbar ( margin: 0; padding: 0; list-style-type: none; width: 100px; ) #navbar li ( border-left: 10px solid #666; border-bottom: 1px solid #666; ) # лента за навигация a (цвят на фона: #949494; цвят: #fff; подложка: 5px; украса на текста: няма; тегло на шрифта: получер; ляво поле: 5px плътно #33ADFF; дисплей: блок; )

• У дома
• Новини
• Контакти
• За нас

Когато задържите курсора на мишката върху елемент от менюто, външният му вид може да се промени, привличайки вниманието на потребителя. Можете да създадете такъв ефект, като използвате псевдокласа: hover.

Нека се върнем към примера за вертикално меню, обсъден по-рано, и да добавим следното правило към листа със стилове:

#navbar a:hover ( background-color: #666; border-left: 5px solid #3333FF; ) Опитайте »

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

Хоризонтално меню може да бъде създадено чрез оформяне на обикновен списък. Показване на свойство за елементи

За да поставите елементи от менюто хоризонтално, първо създайте списък с водещи символи с връзки:

• У дома
• Новини
• Контакти
• За нас

Нека напишем няколко правила за нашия списък, които нулират стила по подразбиране, използван за списъци, и предефинират елементите в списъка от блокови към вградени:

#navbar ( margin: 0; padding: 0; list-style-type: none; ) #navbar li ( display: inline; ) Опитайте »

Сега всичко, което трябва да направим, е да дефинираме стила за нашето хоризонтално меню:

#navbar ( margin: 0; padding: 0; list-style-type: none; border: 2px solid #0066FF; border-radius: 20px 5px; width: 550px; text-align: center; background-color: #33ADFF; ) #navbar a (цвят: #fff; padding: 5px 10px; text-decoration: none; font-weight: bold; display: inline-block; width: 100px; ) #navbar a:hover ( border-radius: 20px 5px ; цвят на фона: #0066FF; ) Опитайте »

Менюто, което ще създадем, ще има основни връзки за навигация, разположени в хоризонталната лента за навигация, и под-елементи, които ще се появяват само когато курсорът на мишката се задържи над елемента от менюто, към който се отнасят тези под-елементи.

Първо трябва да създадем HTML структурата на нашето меню. Ще поставим основните връзки за навигация в списък с водещи символи:

• У дома
• Новини
• Контакти
• За нас

Ще поставим под-елементите в отделен списък, като го вложим в елемента

• У дома
• Новини
• Контакти
  • Адрес
  • Телефон
  • електронна поща
• За нас

Сега нека започнем да пишем CSS код. Първо, трябва да скриете списъка с под-елементи, като използвате декларацията display: none;, така че да не се показват на уеб страницата през цялото време. За да покажем под-елементи, имаме нужда от това, когато задържим курсора на мишката върху елемент

#navbar ul ( дисплей: няма; ) #navbar li:hover ul ( дисплей: блок; )

Премахваме отстъпите и маркерите по подразбиране и от двата списъка. Ние правим списъчни елементи с навигационни връзки плаващи, образувайки хоризонтално меню, но за списъчни елементи, съдържащи под-елементи, задаваме float: none; така че да изглеждат един под друг.

#navbar, #navbar ul ( margin: 0; padding: 0; list-style-type: none; ) #navbar li ( float: left; ) #navbar ul li ( float: none; )

След това трябва да се уверим, че нашето падащо подменю не избутва съдържанието под лентата за навигация надолу. За да направим това, ще зададем позициите на списъка: относителна; , и списък, съдържащ подпозиции позиция: абсолютна; и добавете горно свойство със стойност 100%, така че абсолютно позиционираното подменю да се показва точно под връзката.

#navbar ul ( дисплей: няма; позиция: абсолютна; горна: 100%; ) #navbar li ( float: ляво; позиция: относителна; ) #navbar ( височина: 30px; ) Опитайте »

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

Сега просто трябва да стилизираме двата ни списъка и падащото меню ще е готово:

#navbar ul ( дисплей: няма; цвят на фона: #f90; позиция: абсолютна; горна: 100%; ) #navbar li: hover ul ( дисплей: блок; ) #navbar, #navbar ul ( поле: 0; подложка: 0; list-style-type: none; ) #navbar (височина: 30px; цвят на фона: #666; padding-left: 25px; min-width: 470px; ) #navbar li (float: ляво; позиция: относителна; височина: 100%; ) #navbar li a ( дисплей: блок; подложка: 6px; ширина: 100px; цвят: #fff; декорация на текст: няма; подравняване на текст: център; ) #navbar ul li ( float: няма; ) #navbar li:hover (фонов цвят: #f90; ) #navbar ul li:hover (фонов цвят: #666; )

Каним ви да се запознаете с нова техника за създаване на адаптивни (адаптивни) менюта без използване на Javascript. Той използва чисто и семантично HTML5 маркиране. Менюто може да бъде подравнено вляво, в центъра или вдясно. Това меню включва насочване, което е по-удобно за потребителите. Освен това има индикатор, който показва елемента от менюто „running/threading“. Работи на всички мобилни и настолни браузъри, включително Internet Explorer!

Мишена

Целта на този урок е да ви покаже как да превърнете обикновено меню в падащо меню на малък дисплей.

Този трик ще бъде по-полезен за навигация с много връзки, като на екранната снимка по-долу. Можете да съберете всички бутони в елегантно падащо меню.

Nav HTML маркиране

Ето маркирането за навигация. Етикетът е необходим за създаване на падащо меню с CSS свойство за абсолютна позиция. Ще обясним това в урок по-късно. Класът .current сочи към връзките на активното/текущото меню.

• Портфолио
• Илюстрация
• Уеб дизайн
• Печатни медии
• Графичен дизайн

CSS за навигация (десктоп изглед) е доста елементарен, така че няма да навлизаме в твърде много подробности тук. Обърнете внимание, че посочихме display:inline-block вместо float:left в NAV на елемента

елемент.

/* навигация */ .nav (позиция: относителна; марж: 20px 0;) .nav ul (марж: 0; подложка: 0;) .nav li (марж: 0 5px 10px 0; подложка: 0; списък-стил: няма; дисплей: inline-block; ) .nav a (padding: 3px 12px; text-decoration: none; color: #999; line-height: 100%; ) .nav a:hover (color: #000; ) . nav .current a ( фон: #999; цвят: #fff; радиус на границата: 5px; )

Централно и дясно подравняване

Както бе споменато по-горе, можете да промените подравняването на бутоните с помощта на „text-align“.

/* дясна навигация */ .nav.right ul ( подравняване на текст: вдясно; ) /* централна навигация */ .nav.center ul ( подравняване на текст: център; )

Поддръжка на Internet Explorer

HTML5 етикет и медийни заявки не се поддържат от Internet Explorer 8 и по-стари версии. Включете CSS3-mediaqueries.js (или respond.js) и html5shim.js, за да осигурите резервна поддръжка. Ако не искате да добавите html5shim.js, заменете етикета с етикет.

Това е мястото, където започва забавлението - правене на менюта отзивчиви с медийни заявки! На 600px задаваме навигационния елемент на относителна позиция, за да можем да поставим

списък с менюта в горната част с абсолютна позиция. Скрили сме всички елементи
• указвайки display:none, но оставяйки .current
• показва се като блок. След това при задържане на NAV настройваме всичко
• за display:block (това ще даде резултата от падащия списък). Добавихме графична икона към елемента check.current, за да покажем, че елементът е активен. За да подравните менюто в центъра и вдясно, използвайте свойството за ляво и дясно позициониране
  списък.

  @media screen и (максимална ширина: 600px) ( .nav ( позиция: относителна; мин. височина: 40px; ) .nav ul (ширина: 180px; подложка: 5px 0; позиция: абсолютна; горе: 0; ляво: 0 ; граница: плътен 1px #aaa; фон: #fff url(images/icon-menu.png) без повторение 10px 11px; border-radius: 5px; box-shadow: 0 1px 2px rgba(0,0,0,. 3); ) .nav li ( дисплей: няма; /* скрий всички

  • елементи */ поле: 0; ) .nav .current ( дисплей: блок; /* показва само текущ
  • item */ ) .nav a ( display: block; padding: 5px 5px 5px 32px; text-align: left; ) .nav .current a ( background: none; color: #666; ) /* при навигация */ . nav ul:hover (фоново изображение: няма;) .nav ul:hover li (дисплей: блок; поле: 0 0 5px;) .nav ul:hover .current (фон: url(images/icon-check.png) no-repeat 10px 7px; ) /* дясна навигация */ .nav.right ul ( ляво: auto; дясно: 0; ) /* централна навигация */ .nav.center ul ( ляво: 50%; margin-left: - 90px;))

    Високи реализации!

    Позволява ви да промените набора от CSS класове за елемент от менюто.

    Използване на add_filter("nav_menu_css_class", "filter_function_name_8591", 10, 4); функция filter_function_name_8591($classes, $item, $args, $depth)( // филтър... връща $classes; ) $classes (масив)

    CSS класове, които се прилагат към даден елемент

  • елемент от менюто. Пример:

    Array( => menu-item => menu-item-type-post_type => menu-item-object-page => menu-item-265) $item (WP_Post)

    Текущият обект на елемент от менюто. Пример:

    WP_Post Object ( => 265 => 1 => 2018-04-07 09:45:46 => 2018-04-07 06:45:46 => => Обратна връзка => => публикува => затворено => затворено = > => 265 => => => 2018-04-19 00:20:29 => 2018-04-18 21:20:29 => => 0 => http://wp-test.ru/ ? p=265 => 1 => nav_menu_item => => 0 => raw => 265 => 0 => 214 => page => post_type => Page => http://wp-test.ru/post- 99 => Обратна връзка => => => => Масив ( => => menu-item => menu-item-type-post_type => menu-item-object-page) => => => =>) $args (stdClass)

    Обект с аргументи от функцията wp_nav_menu(). Пример:

    StdClass Object ( => WP_Term Object ( => 21 => Моето първо меню => moe-pervoe-menu => 0 => 21 => nav_menu => => 0 => 3 => raw) => div => = > => основно-меню => => 1 => wp_page_menu => => => => => => запазване => 0 => => основно) $depth (номер)Ниво на елемент от менюто. Добавен във версия 4.1.0. Използва се за отстъп. Елементите от горното меню имат $depth = 0, вложените имат $depth = 1 и т.н.

    Примери #1 Добавете CSS клас само към определен елемент от менюто

    Да предположим, че трябва да добавим допълнителен CSS клас към елемента от менюто „Обратна връзка“ (id=265) и само ако този елемент се показва в меню, прикрепено към областта на основното меню, тогава:

    Add_filter("nav_menu_css_class", "change_menu_item_css_classes", 10, 4); функция change_menu_item_css_classes($classes, $item, $args, $depth) ( if($item->ID === 265 && $args->theme_location === "primary")( $classes = "special-css-class "; ) връща $класове; )

    Влизаме в оформлението:

    • Обратна връзка
    • Всички статии
    • Карта на сайта
    #1 Премахнете CSS класове от всички елементи на менюто

    Нека премахнем всички CSS класове от всички елементи от менюто на сайта.

    Add_filter("nav_menu_css_class", "__return_empty_array");

    Получаваме оформлението:

    • Обратна връзка
    • Всички статии
    • Карта на сайта

    Освен това, както в първия пример, можете да използвате условия. Нека премахнем CSS класовете от всички елементи на менюто и да добавим наш собствен CSS клас към елементите на менюто от основната област на менюто:

    Add_filter("nav_menu_css_class", "change_menu_item_css_classes", 10, 4); функция change_menu_item_css_classes($classes, $item, $args, $depth) ( if ($args->theme_location === "primary") ( $classes = [ "my-css" ]; ) else ( $classes = ; ) върне $класове; )

    Получаваме оформлението:

    • Обратна връзка
    • Всички статии
    • Карта на сайта
    Бележки
    • От версия 4.1.0 беше добавен параметърът $depth.
    Списък на промените

    От версия 3.0.0	Въведено.
    От версия 4.1.0	Параметърът $depth беше добавен.

    Още веднъж се обръщам към темата за създаване на навигация за сайт, използвайки изключително . Почти всички съвременни браузъри поддържат основни функции, което ви позволява по-гъвкаво да персонализирате ефектите и външния вид на навигационните ленти, без да свързвате javascript или допълнителни файлове с изображения, като използвате само команди.
    Днес ще разгледаме структурата и техниката на изпълнение на навигационно меню с падащи под-елементи. Ще украсим външния вид на панела с помощта на , ще закръглим ъглите и ще добавим малко сянка за шрифта.

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

    HTML маркиране

    Оформих цялата структура на менюто под формата на неподреден списък, като го поставих в блок div със специфичен клас „menu-nav“ за обвързване към .

    < div class = "menu-nav" > < ul> < li class = "first" >< a href= "#" >У дома< li>< a href= "#" >Уроци< ul> < li>< a href= "#" >HTML/CSS< li>< a href= "#" >Фотошоп< li>< a href= "#" >Dreamweaver< li>< a href= "#" >Светкавица< li>< a href= "#" >Видео< ul> < li>< a href= "#" >Youtube< li>< a href= "#" >Vimeo< li>< a href= "#" >Rutube< li>< a href= "#" >Програми< ul> < li>< a href= "#" >Система< li>< a href= "#" >Безопасност< li>< a href= "#" >Мултимедия< li>< a href= "#" >интернет< li>< a href= "#" >На линия< ul> < li>< a href= "#" >Услуги< li>< a href= "#" >Wordpress< ul> < li>< a href= "#" >Плъгини< li>< a href= "#" >WP теми< li>< a href= "#" >Относно сайта< li>< a href= "#" >Контакти

    • У дома
    • Уроци
      • HTML/CSS
      • Фотошоп
      • Dreamweaver
      • Светкавица
    • Видео
      • Youtube
      • Vimeo
      • Rutube
    • Програми
      • Система
      • Безопасност
      • Мултимедия
      • интернет
    • На линия
      • Услуги
    • Wordpress
      • Плъгини
      • WP теми
    • Относно сайта
    • Контакти

    Както можете да видите от примера с код, за да създам падащи панели, добавих друго малко парче прост код към някои елементи от менюто, за да създам неподреден списък:
    

    Сега можете да добавяте падащи списъци към всеки елемент от главното меню. Ако погледнете кода по-долу, ще видите как към елемента от менюто (4) е добавен падащ списък с под-елементи:
    

    < ul> < li>Параграф 1< li>Точка 2< li>Точка 3< li>Точка 4< ul> < li>алинея 1< li>Подточка 2< li>Подточка 3< li>Подточка 4

    • Параграф 1
    • Точка 2
    • Точка 3
    • Точка 4
      • алинея 1
      • Подточка 2
      • Подточка 3
      • Подточка 4

    Без CSS стил, целият този дизайн ще изглежда просто като списък. Нека видим как да проектираме нашето падащо меню с помощта на CSS.
    

    CSS

    Ние използваме CSS, за да стилизираме външния вид и функционалността на нашето меню. Първото нещо, което трябва да направите, е да създадете CSS файл, да го наименувате и да го запишете във формат като: style.css.

    Забележка: Уверете се, че сте поставили следния код в главата на вашия HTML документ, между таговете ....., за да извикате CSS файла:

    < link rel= "stylesheet" type= "text/css" href= "style.css" />

    Сега, след като имате файл style.css, можем да започнем да добавяме стилове и да експериментираме с опции и функции. За по-голяма яснота добавих коментари към някои от параметрите на CSS кода:
    

    /*Основа*/ * (марж: 0; подложка: 0;) тяло( семейство шрифтове: Helvetica, Arial, sans-serif; размер на шрифта: 14px; фон: #474747 url(bg.png); ) #контейнер (ширина: 960px; /*Ширина на контейнера*/ margin: 10px автоматично; ) /*Меню*/ . menu- nav ( позиция: относителна; ширина: 100%; /*Ширина на лентата с менюта*/ височина: 50px; размер на шрифта: 14px; цвят: #999; margin: 0 auto; margin-top: 20px; /*Цвят и фонов градиент на лентата с менюта*/ фон: #395593; фон: - moz- линеен градиент (отгоре, #647db5, #395593); фон: - webkit- градиент (линеен, ляво горе, ляво долу, от (#647db5), към (#395593)); фоново изображение: - o- линеен градиент (отгоре, rgb(100, 125, 181), rgb(57, 85, 147)) ; текстова сянка: 0 - 1px 0 #111; граница: 1px solid #444; /*Заоблени ъгли на лентата с менюта*/ border- радиус: 8px; - moz- border- радиус: 8px; - khtml- border- радиус: 8px; - webkit- border- радиус: 8px; ) . menu-nav ul (списък- стил: няма; цвят: #FFF; ) . menu- nav ul li ( float: ляво; позиция: относителна; ) . menu- nav ul li a ( border- дясно: 1px solid #364f87; border- left: 1px solid #7189c0; padding: 17px; display: block; text-decoration: none; text- align: center; color: #FFF; фон: #395593; фон: - moz- линеен градиент (отгоре, #647db5, #395593); фон: - webkit- градиент (линеен, ляво горе, ляво долу, от (#647db5), до (#395593)) ; фоново изображение: - o- линеен градиент (отгоре, rgb(100, 125, 181) , rgb(57, 85, 147)) ; текстова сянка: 0 - 1px 0 #111; ) . меню- навли. първо a ( border- radius: 8px 0 0 8px; - moz- border- radius: 8px 0 0 8px; - khtml- border- radius: 8px 0 0 8px; - webkit- border- radius: 8px 0 0 8px; ) / *Цвят на фона и градиент при задържане*/ . menu- nav ul li a: hover (фон: #647db5; фон: - moz- линеен- градиент(отгоре, #395593, #647db5); фон: - webkit- градиент(линеен, ляво горе, ляво долу, от(#) 395593), до (#647db5)); фоново изображение: - o- линеен градиент (отгоре, rgb(57, 85, 147), rgb(100, 125, 181)) ; цвят: #fff;) . menu- nav ul li ul ( дисплей: няма; ) . menu- nav ul li: hover ul ( display: block; position: absolute; min- width: 200px; left: 0; margin- top: - 1px; ) . menu- nav ul li: hover ul li a ( display: block; color: #ffffff; width: 110px; text- align: center; border- bottom: 1px solid #283f74; border- top: 1px solid #366ea6; background: #364f87; ). menu- nav ul li ul li: първо дете a ( border- top: none; ) . menu- nav ul li ul li: last- child a ( border- bottom- left- radius: 5px; border- bottom- right- radius: 5px; - moz- border- radius- bottomleft: 5px; - moz- border- radius - долу вдясно: 5px; - webkit- граница- долу- вдясно- радиус: 5px; - webkit- граница- долу- ляво- радиус: 5px; ) . menu- nav ul li: hover ul li a: hover ( фон: #395593; цвят: #ffffff; )

    /*Основа*/ * (поле: 0; подложка: 0;) тяло( семейство шрифтове:Helvetica,Arial, sans-serif; размер на шрифта:14px; фон: #474747 url(bg.png); ) #контейнер ( ширина:960px; /*Ширина на контейнера*/ марж: 10px автоматично; ) /*Меню*/ .menu-nav (позиция:относителна; ширина: 100%; /*Ширина на лентата с менюта*/ височина:50px; размер на шрифта :14px; цвят:#999; margin: 0 auto; margin-top: 20px; /*Цвят и градиент на фона на лентата с менюта*/ фон: #395593; фон: -moz-linear-gradient(top, #647db5, #395593) ; фон: -webkit-градиент(линеен, ляво горе, ляво долу, от(#647db5), до(#395593)); фоново изображение: -o-линеен градиент(горе,rgb(100, 125, 181) , rgb(57, 85, 147)); text-shadow: 0 -1px 0 #111; border: 1px solid #444; /*Заоблени ъгли на лентата с менюта*/ border-radius: 8px; -moz-border- радиус: 8px; -khtml-border-radius: 8px; -webkit-border-radius: 8px;) .menu-nav ul (list-style:none; цвят: #FFF;) .menu-nav ul li (float: ляво; позиция:относително;) .menu-nav ul li a (border-right:1px solid #364f87; border-left:1px solid #7189c0; padding:17px; дисплей:блок; текст-декорация:няма; подравняване на текст: център; цвят:#FFF; фон: #395593; фон: -moz-linear-gradient(top, #647db5, #395593); фон: -webkit-градиент (линеен, ляво горе, ляво долу, от (#647db5), до (#395593)); фоново изображение: -o-линеен градиент (отгоре, rgb (100, 125, 181), rgb (57, 85, 147)); текстова сянка: 0 -1px 0 #111; ) .menu-nav li.first a ( border-radius: 8px 0 0 8px; -moz-border-radius: 8px 0 0 8px; -khtml-border-radius: 8px 0 0 8px; -webkit-border-radius: 8px 0 0 8px; ) /*Цвят и градиент на фона на курсора*/ .menu-nav ul li a:hover ( фон: #647db5; фон: -moz-linear-gradient(top, #395593, #647db5); фон: -webkit-градиент (линеен, ляво горе, ляво долу, от (#395593), до (#647db5)); фоново изображение: -o-линеен градиент (отгоре, rgb (57, 85, 147), rgb ( 100, 125, 181)); цвят:#fff; ) .menu-nav ul li ul ( дисплей: няма; ) .menu-nav ul li:hover ul ( дисплей: блок; позиция: абсолютна; мин. ширина: 200px ; left:0; margin-top: -1px; ) .menu-nav ul li:hover ul li a ( display:block; color:#ffffff; width: 110px; text-align: center; border-bottom: 1px solid #283f74; border-top: 1px solid #366ea6; background: #364f87; ) .menu-nav ul li ul li:first-child a ( border-top:none; ) .menu-nav ul li ul li:last - дете a ( border-bottom-left-radius: 5px; border-bottom-right-radius: 5px; -moz-border-radius-bottomleft: 5px; -moz-border-radius-bottomright: 5px; -webkit-border-bottom-right-radius: 5px; -webkit-border-bottom-left-radius: 5px; ) .menu-nav ul li:hover ul li a:hover (фон:#395593; цвят:#ffffff;)

    Това е всичко. След като поставите кода по-горе във вашия лист със стилове, вашето падащо меню ще бъде напълно стилизирано и готово за работа. Когато използвате чист CSS3, имайте предвид, че не всички браузъри поддържат еднакво добре новите стандарти. Например в по-старите версии на IE това меню ще изглежда малко по-различно, въпреки че това „спирачки при напредък“ има свои собствени патерици))).

    С цялото си уважение, Андрю