елемент от вграден в блок. Освен това към елементите на списъка са добавени лява и долна рамка.

#navbar a ( цвят на фона: #949494; цвят: #fff; подложка: 5px; украса на текста: няма; тегло на шрифта: получер; ляво поле: 5px плътно #33ADFF; дисплей: блок; ) #navbar li ( border-left: 10px solid #666; border-bottom: 1px solid #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: none;) #navbar (височина: 30px; background-color: #666; padding-left: 25px; min-width: 470px; ) #navbar li (float: left; position: relative; височина: 100%;) #navbar li a ( display: block; padding: 6px; width: #fff; text-decoration: none; text-align: center; ) #navbar ul li (float: none; ) #navbar li:hover (фонов цвят: #f90; ) #navbar ul li:hover (фонов цвят: #666; )

За лесна навигация из сайта се използва меню на всички страници, за да може потребителят да разбере какво и къде имате. Почти винаги в горната част на страницата (в хедъра) има хоризонтално меню за раздели (категории) на сайта, а вертикално меню е изписано в лентата на сайта (в колона) и служи за навигация през статиите.

От статията ще разберете как да направите меню за html уебсайт, какво ще трябва да напишете за това, за да получите хоризонтално и вертикално меню в css или меню с падащ списък.

За да направим меню (всякакъв вид), ще използваме списък с водещи символи, към който директно ще прикрепим собствен клас и ще напишем нашите параметри за този клас с необходимите стойности.

Например, за да създадем меню, използваме списък с class class="menu" (всяко име на клас, само латински букви), а html кодът ще изглежда така:

• Начало
• Статии
• За мен
• Новини

В стила за менюто посочих необходимите свойства с необходимите стойности:

Задължителни CSS параметри и стойности

• марж: 0;
• - премахнете всички отстъпи в списъка, в противен случай браузърът ще замени стойностите по подразбиране от 20px;

list-style-type: няма;

Ето как се създава меню на html страници, а сега нека да преминем към създаването на хоризонтално меню и да разгледаме всичко с примери.

• Начало
• Статии
• За мен
• Новини

За да покажем хоризонтално меню с помощта на списък, просто трябва да добавим само един параметър към горния код: display: inline; така че елементите на менюто да са подравнени на един ред и да следват един след друг хоризонтално. Също така ще добавим подложка между елементите на менюто, като използваме margin.

Имаме готово хоризонтално меню, остава само да му придадем красив външен вид.

Нека да дадем на всеки елемент в хоризонталното меню гранична рамка и да го направим със скосени ръбове, да го запълним с определен цвят на фона (добавете фон за елемента от менюто) и да променим външния вид на връзката.

• Начало
• Статии
• За мен
• Новини

Хоризонталното меню ще се покаже така:

Тъй като хоризонталното меню в повечето случаи се изписва в хедъра на сайта, в примера добавих фон към менюто, който можете да промените, за да съответства на цвета на хедъра.

И за по-голяма яснота направих елементите от менюто центрирани с помощта на свойството text-align: center; , който може да бъде премахнат (автоматично подравнен вляво) или зададен на подравняване на текст: вдясно;

и хоризонталното меню ще се появи в десния край.

Как да направите вертикално меню с CSS

Вертикалното меню в CSS се прави и проектира на страницата почти по същия начин като хоризонталното, само че тук се променя в .menu-2 li (... параметър със стойността на дисплея: блок; (показва блоков елемент ), което му дава вертикално показване на елементи от менюто.

И още едно допълнение към вертикалното меню: тъй като в повечето случаи то се намира в страничната колона на сайта, която е с фиксирана ширина, сме принудени да зададем ширината на width: 100%;

• Първи елемент от менюто
• Втори елемент от менюто
• Трети елемент от менюто
• Четвърти елемент от менюто

Ето как ще се появи вертикалното меню на страницата:

Бъдете внимателни!
Написах го за вертикално меню вместо странична колона на сайта, така че ще го изтриете и ще изтриете същото в края на кода.

Създаването на падащо меню с помощта на CSS е доста лесно. Просто ще добавим няколко параметъра към съществуващия код за вертикалното меню, което ще отговаря за падащия списък с елементи от менюто.

Не забравяйте да запомните!
За да може падащото меню да се показва стриктно срещу водещата връзка, трябва да напишете position: relative; в CSS за тага li, където се намира тази връзка. , а за падащото меню позиция: абсолютно;

Нека напишем html кода за падащото меню в CSS.

• Първи елемент от менюто
• ) .menu-4 .podmenu li, .podmenu .podmenu-2 li ( margin: 0; padding: 0; background-color: #ccc; border-left: 0 solid #273ed9; преход: всички 0.7s улесняват 0s; дисплей : block;) .menu-4 .podmenu li a, .podmenu .podmenu-2 li a ( border-left: 0 solid #900000; padding: 4px 10px; font-size: 14px; border-bottom : 1px пунктиран #999;) .menu-4 .podmenu li a:hover, .podmenu .podmenu-2 li a:hover ( цвят: #0e25c0;
  • Втори елемент от менюто ⇒
  • първа алинея
  • Втора алинея
    • Трета алинея ⇒
    • Първи линк
    • Втора връзка
    • Трета връзка
  • Четвърта връзка
• Четвърта алинея
  • Трета алинея ⇒
  • Първи линк
  • Втора връзка
  • Трета връзка
• Четвърти елемент от менюто

Трети елемент от менюто ⇒

Вижте как ще изглежда на страницата падащо меню, използващо CSS.

Падащото меню е написано по абсолютно същия начин за хоризонтални навигационни оформления. Единственото нещо е, не забравяйте да промените стойностите на параметрите отгоре и отляво (горен и ляв отстъп).
Вижте!

Как само с 3 промени в CSS нашето вертикално навигационно оформление с падащо меню се превърна в хоризонтално навигационно оформление с падащо меню.

• CSS промени за падащото меню
• Замяна в .saitbar - ширина: 240px;
• на ширина: 100%;
• Замяна в .menu-4 li - дисплей: блок;

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

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

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

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

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

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

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

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

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

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

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

/*Основа*/ * (поле: 0; подложка: 0;) тяло( семейство шрифтове:Helvetica,Arial, sans-serif; размер на шрифта:14px; фон: #474747 url(bg.png); ) #контейнер ( ширина:960px; /*Ширина на контейнера*/ марж: 10px автоматично; ) /*Меню*/ .menu-nav (позиция:относителна; ширина: 100%; /*Ширина на лентата с менюта*/ височина:50px; размер на шрифта :14px; margin-top: 20px /фон на лентата на менюто: #395593; от (#647db5), до (#395593)); 0 -1px 0 #444; заоблени ъгли на лентата с менюта: 8px; -webkit-border-radius: 8px; menu-nav ul (list-style:none; цвят: #FFF;) .menu-nav li (float:left; position:relative; .menu-nav ul li a (border-right:1px solid #364f87;

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

С най-добри пожелания, Андрей

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

В този урок ще създадем просто, но ефективно адаптивно меню, което е много лесно за персонализиране за използване във всеки проект.

Нека добавим прост неподреден списък с осем връзки. Демонстрацията на урока е много чувствителна към броя на елементите от менюто, а именно всички настройки се правят за осем елемента.

• RUSELLER
• Контакти
• клиенти
• Работи
• аудио
• Изтегляне
• Блог
• Контакт

За да направим менюто по-интересно и полезно, нека добавим ред текст под надписа на главното меню. Има много начини за решаване на такъв прост проблем. В нашия урок ние просто вмъкваме нов ред и добавяме малък елемент за втория ред. По този начин можем да стилизираме надписа, без да използваме допълнителни div, класове и идентификатори.

• RUSELLER
  Начало
• Контакти
  Нашият екип
• клиенти
  Нашите приятели
• Работи
  Нашата работа
• аудио
  Чуйте ни
• Изтегляне
  полезно
• Блог
  Прочетете за нас
• Контакт
  Пишете ни

Ето как ще изглежда нашето меню след извършените операции:

Ще започнем CSS кода, като използваме универсален селектор за нулиране на полета и подложки и присвояване на свойството box-sizing: border-box на всички елементи на страницата. Тази стъпка ще ни помогне лесно да зададем размерите на елементите в проценти, дори когато използваме рамки.

* (padding: 0; margin: 0; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; )

Преди да започнем да дефинираме стилове на елементи, нека зададем набор от свойства за родителския елемент. Първо, нека зададем ширината му на 90%. Сега нашият контейнер ще се разтегне, за да покрие цялото налично пространство, но ще остане място за образуване на свободна зона в дизайна. Също така ще поставим контейнера в центъра, като използваме автоматично определяне на размерите на полетата.

Ще стилизираме и неподредения списък, за да избегнем използването на етикети.

Сега нека започнем да дефинираме стилове за елементи от менюто.

Nav li a ( display: block; float: left; width: 12.5%; padding: 10px; background: #444; border-right: 1px solid #fff; цвят: #fff; шрифт: 700 13px/1.4 "PT Serif" , Helvetica, Verdana, sans-serif; text-decoration: none; text-transform: uppercase ) /*МАЛЪК ТЕКСТ*/ nav small (цвят: #aaa; шрифт: 100 11px/1 Helvetica, Verdana, Arial, sans -серифна трансформация на текст: няма;

Първо дефинираме формуляр за всеки елемент от списъка. Ние правим всички връзки блокови елементи, преместваме ги наляво, задаваме ширина и малък отстъп. Получаваме доста голям правоъгълник с ширина 12,5% в резултат на изчисленията 100% / 8 (брой елементи от менюто).

След това определяме външния вид. Задайте фон и рамка.