Вертикално меню в CSS. Фиксирано странично меню в чист CSS Стандартни CSS стилове за хоризонтално меню

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

В урока ще използваме:

  • дисплей: гъвкав;
  • използвайте преход;
  • ще позиционираме елементите с помощта на позиция.

HTML структура на хоризонталното меню

Първо, нека напишем маркирането за хоризонталното меню. Отваряме нашата среда за разработка, в моя случай това е PhpStorm, създаваме файл index.html, пишем рамката html:5, заменяме lang с ru.

Ще изтрия всички мета с изключение на кодирането, ще напиша заглавието си " том меню».

Между тялото записваме заглавния таг, а в него е блок с класа .dws-menu, в който ще се намира нашето меню. Освен това структурата ще бъде както следва, ще създадем списъци в размер на пет броя. Всеки списък ще има връзка с атрибута href="#". След това ще има икона I с класа .fa .fa-

Щракнете върху Приложи.

Нека напишем името на елементите от менюто ( Начало, Продукти, Услуги, Новини, Контакти).

След това изберете и свържете иконите. Отиваме на уебсайта на Font Awesome, избираме икони за тези елементи от менюто:

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

Папката fonts съдържа шрифтове за икони, а папката css съдържа техните стилове. Компресираните стилове могат да бъдат премахнати от font-awesome.min, включително некомпресиран font-awesome.css.

В index.html свързваме икони и предписваме на всеки елемент свой собствен стил на икона ( У дома, карта за пазаруване, зъбни колела, ти-списък, плик-отворен).

Направихме основната рамка, ще оформим подменюто, след като опишем основния стил, а сега ще създадем файл, в който ще опишем основните стилове на хоризонталното меню style.css и ще го свържем с index.html. За да проверя дали стиловете са свързани, ще създам папка img, ще поставя произволно изображение на фона в нея. Нека напишем връзката на изображението с помощта на фон.

Тяло (фоново изображение: url("../img/ep_naturalwhite.png"); )

Описание на CSS стилове за хоризонталното меню

Първо, нека нулираме всички отстъпи, които различните браузъри могат да задават по подразбиране:

Dws-меню *( поле: 0; подложка: 0; )

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

Горен колонтитул (поле: 200px; семейство шрифтове: Cuprum, Arial, Helvetica, sans-serif; )

Нека скрием маркерите от списъците:

dws-меню ul, .dws-меню ol( стил на списък: няма; )

Нека покажем списъците хоризонтално с display: flax и го направим центриран:

Dws-menu > ul( display: flex; justify-content: center; )

В заглавката, нека направим отстъп само отгоре, напишете margin-top .

Заглавие ( margin-top: 200px;семейство шрифтове: Cuprum, Arial, Helvetica, sans-serif; )

Да проектираме нашето меню, да зададем цвета на бутоните, шрифта и т.н.

Dws-menu > ul li a( display: block; background: #ececed; padding: 15px 30px 15px 40px; font-size: 14px; color: #454547; text-decoration: none; text-transform:uppercase; )

След това позиционираме иконите, присвояваме позиция на списъците: относителна; за допълнително центриране на иконите:

dws-меню > ul li( позиция: относителна; )

dws-menu > ul li > a i.fa (position: absolute; top: 15px; left: 12px; font-size: 18px; )

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

Dws-меню > ul li:first-child( border-left: 1px solid #b2b3b5; ) .dws-menu > ul li:last-child( border-right: 1px solid #babbbd; )

Създаване на разделители за LI списъци:

.dws-меню > ul li( позиция: относителна; border-right: 1px плътен #c7c8ca; }

Менюто е придобито външен вид, тогава можете да започнете да описвате стилове на задържане.

Анимирайте хоризонталното меню при задържане

Dws-menu li a:hover( фон: #454547; цвят: #ffffff; сянка на кутията: 1px 5px 10px -5px черно; преход: всички 0,3s лекота; )

И за да накарате този ефект да изчезне плавно, добавете този стил към връзката в покой:

.dws-menu > ul li a( display: block; background: #ececed; padding: 15px 30px 15px 40px; font-size: 14px; color: #454547; text-decoration: none; text-transform:uppercase;преход: всички 0.3s лекота; )

Главното меню е готово и можете да започнете да описвате подменютата и техните подменюта.

Описване на CSS/HTML падащо меню

Отваряме index.html и добавяме например допълнително меню към продуктите. Между списъците LI вмъкваме UL , в него ще поставим пет списъка, в които ще има връзки с атрибут herf=”#” .

ul>li*5>a

Щракнете върху Приложи, напишете името на елементите ( Дрехи, електроника, храна, инструменти, живот. химия).

  • облекло
  • електроника
  • Храна
  • Инструменти
  • Ген. химия

След това отваряме style.css и описваме стиловете на подменюто.

Изберете втория списък и му дайте позиция: абсолютно; , задайте минималната ширина на 150 пиксела.

/*подменю*/ .dws-menu li ul( позиция: абсолютна; мин. ширина: 150px; )

Нека напишем границата на 1 връх към списъците.

Dws-меню li > ul li( граница: 1px solid #c7c8ca; )

За връзки в подменюто задайте подложката на 10 пиксела, премахнете трансформацията на текста и направете фона с няколко тона по-тъмен фон: #e4e4e5; .

Dws-меню li > ul li a( padding: 10px; text-transform: none; background: #e4e4e5; )

След това ще създадем друго вложено меню. Нека отидем на файла за маркиране и например в "Електроника" формираме менюто по аналогия, както направихме преди. Опишете заглавията на параграфите ( Фотоапарати, компютри, телефони) и запазете.

  • електроника
    • камери
    • Компютри
    • телефони

    • Те се показват, но са скрити под главното меню, сега позиция: абсолютна; вложен UL и го изместете със 150 пика. от страната:

    Dws-меню li > ul li ul( позиция: абсолютна; дясно: -150px; горе: 0; )

    /*подменю*/ .dws-menu li ul( позиция: абсолютна; мин. ширина: 150px;дисплей: няма; )

    И за техния външен вид ще изберем списъците при задържане и ще ги покажем с помощта на display: block; .

    dws-menu li:hover > ul( display: block; )

    Сега можете да добавяте многостепенни менюта, като просто копирате UL блока, променяйки неговите елементи.

    • У дома
    • Продукти
      • облекло
        • Обувки
        • Якета
        • Панталони
      • електроника
        • камери
        • Компютри
        • телефони
          • Samsung
          • Flf
          • Ябълка
      • Храна
      • Инструменти
      • Ген. химия
    • Услуги
      • Услуга 1
      • Услуга 2
      • Услуга 3
    • Новини
    • Контакти

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

    .dws-меню > ul li a( дисплей: блок; /* Постоянна връзка - използвайте за редактиране и споделяне на този градиент: http://colorzilla.com/gradient-editor/#c9c9c9+0,f6f6f6+2,c4c5c7+98,757577+100;Custom+3 */ фон: #c9c9c9 ; /* Стари браузъри */ фон: -moz-linear-gradient(top, #c9c9c9 0%, #f6f6f6 2%, #c4c5c7 98%, #757577 100%); /* FF3.6-15 */ фон: -webkit-linear-gradient(top, #c9c9c9 0%,#f6f6f6 2%,#c4c5c7 98%,#757577 100%); /* Chrome10-25,Safari5.1-6 */ фон: линеен градиент (до дъно, #c9c9c9 0%,#f6f6f6 2%,#c4c5c7 98%,#757577 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ филтър: progid:DXImageTransform.Microsoft.gradient(startColorstr="#c9c9c9", endColorstr="#757577",GradientType=0); /* IE6-9 */ подложка: 15px 30px 15px 40px; размер на шрифта: 14px; цвят: #454547; текст-декорация: няма; преобразуване на текст: главни букви; преход: всички 0.3s лекота; ).dws-menu li a:hover( /* Постоянна връзка - използвайте за редактиране и споделяне на този градиент: http://colorzilla.com/gradient-editor/#e0e1e5+0.454547+2.454547+98,e0e1e5+100 */ фон: #e0e1e5; /* Стари браузъри */ фон: -moz-linear-gradient(top, #e0e1e5 0%, #454547 2%, #454547 98%, #e0e1e5 100%); /* FF3.6-15 */ фон: -webkit-linear-gradient(top, #e0e1e5 0%,#454547 2%,#454547 98%,#e0e1e5 100%); /* Chrome10-25,Safari5.1-6 */ фон: линеен градиент (до дъно, #e0e1e5 0%,#454547 2%,#454547 98%,#e0e1e5 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ филтър: progid:DXImageTransform.Microsoft.gradient(startColorstr="#e0e1e5", endColorstr="#e0e1e5",GradientType=0); /* IE6-9 */ цвят: #ffffff; кутия-сянка: 1px 5px 10px -5px черно; преход: всички 0.3s лекота; )

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

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

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

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

    Таговете се използват за създаване на менюта.

    Пример за използване на html тагове за създаване на меню в кода по-долу:

    • У дома
    • Услуги
    • цени
    • Контакти

    Стандартни CSS стилове за хоризонтално меню

    ul ( list-style: none; /*премахване на маркери за списък*/ margin: 0; /*премахване на подложка*/ padding-left: 0; /*премахване на подложка*/ ) a (text-decoration: none; /*премахване на подчертаване текст на връзката*/ ) li ( float:left; /*Поставете списъка хоризонтално, за да реализирате менюто*/ margin-right:5px; /*Отстъп на елементите от менюто*/ )

    Получаваме готово горно меню в заглавката, без никакви специални стилове и звънци и свирки, това може да се нарече рамката на вашето бъдеще красиво меню. Ако копирате и поставите този html и css, ще изглежда така.

    Примерна рамка (шаблон) за вашето бъдещо меню

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

    Има и няколко други CSS методиизползва се, за да направи менюто хоризонтално в допълнение към float:left; , например display:inline-block; или display:flex; , но се препоръчва да използвате описания по-горе метод.

    Нека попълним нашия шаблон за меню с различни стилове и го направим красив.

    Примери за красиво хоризонтално меню за уебсайт

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

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

    Просто синьо меню с отделни елементи

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

    По-долу са стиловете това меню. HTML остава същият като в менюто "skeleton".

    Ul ( list-style: none; /*премахване на маркери за списък*/ margin: 0; /*премахване на подложка*/ padding-left: 0; /*премахване на подложка*/ margin-top:25px; /*indent top*/ ) a ( text-decoration: none; /*премахнете подчертаването на текста на връзката*/ background:#30A8E6; /*добавете фон към елемент от менюто*/ color:#fff; /*променете цвета на връзката*/ padding:10px; /*добавете подложка */ font-family: arial; /*промяна на шрифта*/ border-radius:4px; /*добавяне на заобляне*/ -moz-transition: всички 0.3s 0.01s лекота; /*направете плавен преход*/ -o-transition : всички 0,3 s 0,01 s лекота; -webkit-transition: всички 0,3 s 0,01 s лекота; ) a:hover ( background:#1C85BB;/*добавете ефект на задържане*/) li ( float:left; /*поставете списък хоризонтално към прилагане на менюто*/ margin-right:5px; /*Отстъп на елементите от менюто*/ )

    Главно меню, разположено на цветна линия с червен фон

    css стил меню на цветна линия

    ul ( list-style: none; /*премахване на маркери за списък*/ margin: 0; /*премахване на подложка*/ padding-left: 0; /*премахване на подложка*/ margin-top:25px; /*indent top*/ фон :#FF4444; /*добавяне на фон към цялото меню (замяната на този параметър ще промени цвета на цялото меню)*/ височина: 50px; /*задаване на височината*/ ) a ( text-decoration: none; /* премахнете подчертаването на текста на връзката* / background:#FF4444; /*добавете фон към елемента от менюто (замяната на тази настройка ще промени цвета на всички елементи от менюто)*/ color:#fff; /*променете цвета на връзката* / padding:0px 15px; /*добавете padding*/ font-family: arial; /*променете шрифта*/ line-height:50px; /*подравнете менюто вертикално*/ display: block; border-right: 1px solid # F36262; /*добавете рамка вдясно*/ -moz-transition : всички 0,3s 0,01s лекота; /*направете плавен преход*/ -o-transition: всички 0,3s 0,01s лекота; -webkit-transition: всички 0.3s 0.01s лекота; ) a:hover ( background:#D43737;/ *добавете ефект на задържане*/ ) li ( float:left; /*поставете списък хоризонтално за реално меню*/ )

    Падащо меню в HTML+CSS

    За изпълнение допълнително падащо (падащо) меню в сайтаза всеки елемент от менюто трябва да добавим допълнителен списък с елементи към HTML кода за всяка връзка от хоризонталното меню и да променим CSS стиловете. В стиловете ще използваме прост трик - промяна на показването на падащото меню при задържане на курсора на елемента, от който се нуждаем горно меню. Например, нека вземем елемента "услуги".

    Пример за създаване на просто падащо меню

    HTML код на падащото меню

    • У дома
    • Услуги
      • Услуга 1
      • Дълга служба 2
      • Услуга 3
    • цени
    • Контакти

    Падащи CSS стилове

    ul ( list-style: none; /*премахване на маркери за списък*/ margin: 0; /*премахване на подложка*/ padding-left: 0; /*премахване на подложка*/ margin-top:25px; /*indent top*/ фон :#819A32; /*добавяне на фон към цялото меню*/ височина: 50px; /*задаване на височината*/ ) a ( text-decoration: none; /*премахване на подчертаването на текста на връзката*/ background:#819A32 ; /*добавете фон към елемент от менюто*/ цвят:#fff; /*променете цвета на връзките*/ padding:0px 15px; /*добавете подложка*/ font-family: arial; /*променете шрифта*/ line-height :50px; /*подравнете менюто спрямо вертикалите*/ display: block; border-right: 1px solid #677B27; /*добавете рамка вдясно*/ -moz-transition: all 0.3s 0.01s ease; /*направете плавен преход*/ -o-преход: всички 0.3s 0.01s лекота; -webkit-transition: всички 0.3s 0.01s лекота; ) a:hover ( фон:#D43737;/*Добавете ефект на задържане*/ ) li ( float :left; /*Поставете списъка хоризонтално, за да реализирате менюто* / position:relative; /*задайте позицията за позициониране*/ ) /*Стилове за скритото падащо меню* / li > ul (позиция:абсолютна; отгоре:25px; дисплей: няма; ) /*Направете скритата част видима*/ li:hover > ul ( display:block; width:250px; /*Задайте ширината на падащото меню*/ ) li:hover > ul > li ( float:none; /* Премахнете хоризонталното позициониране* / )

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

    Опитах се да ви разкажа възможно най-накратко как да създадете основно хоризонтално меню, да направите няколко шаблона, как да добавите прости стилове към него и да го направите по-красив, как да направите падащо меню за вашия сайт. За улеснение съм събрал всички менюта, представени по-горе, в един html файл, който можете да изтеглите по-долу. Изглежда като на екранната снимка:

    Благодаря ви за вниманието.

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

    Елементите на списъка могат да съдържат не само връзки, но и заглавия, икони, снимки. С помощта на вертикалното меню можете да правите коментари в сайта, списък с категории и др.

    1. Вертикално меню със заглавие

    Изчистен елегантен дизайн. Подходящ за стайлинг категории в сайта. При задържане на мишката елементът от списъка променя цвета на връзката.

    Категории

    * (box-sizing: border-box; margin: 0;) .widget (padding: 20px 30px; background: white; font-family: "Roboto", sans-serif; ) .widget-title (text-transform: главни букви ; разстояние между буквите: 2px; цвят: #222; размер на шрифта: 16px; padding-left: 15px; margin-bottom: 15px; border-left: 2px solid #b99d61; ) .widget-list (padding: 0; list -style: none; ) .widget-list a:before ( content: "\2014"; margin-right: 14px; ) .widget-list a (text-decoration: none; outline: none; display: block; padding: 6px 0; разстояние между буквите: 1px; тегло на шрифта: 300; цвят: #444; преход: .3s линеен; ) .widget-list a:hover (цвят: #b99d61;)

    2. Вертикално меню в стил "карта на метрото"

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

    .metro ( стил на списък: няма; подложка: 0; марж: 30px 0 0 50px; border-left: 5px solid #DAE4F1; ) .metro li (line-height: 2em;) .metro ul ( margin: 20px 0 20px 15px; padding: 0; border: none; list-style: none; ) .metro ul:before, .metro ul:after ( съдържание: ""; ширина: 5px; височина: 28px; фон: #DAE4F1; позиция: относителна ; display: block; left: -9px; ) .metro ul:before ( transform: rotate(-45deg); margin-top: -15px; ) .metro ul:after ( transform: rotate(45deg); bottom: -20px ; ) .metro ul li (граница-вляво: 5px плътно #DAE4F1;) .metro ul li:първо-дете ( margin-top: -5px; padding-top: 5px; ) .metro ul li:last-child ( padding -bottom: 9px; margin-bottom: -25px; ) .metro a ( text-decoration: none; display: block; font-family: "Noto Sans", sans-serif; color: #4A4B4D; ) .metro a: преди (съдържание: ""; дисплей: inline-block; фон: #CA682D; ширина: 12px; височина: 12px; ляво: -9px; позиция: относителна; border-radius: 50%; margin-right: .5em; )

    3. Вертикално меню с ефект на задържане

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

    Категории

    .category-wrap ( padding: 15px; background: white; width: 200px; box-shadow: 2px 2px 8px rgba(0,0,0,.1); font-family: "Helvetica Neue", Helvetica, Arial, sans -serif;) .category-wrap h3 (размер на шрифта: 16px; цвят: rgba(0,0,0,.6); margin: 0 0 10px; padding: 0 5px; позиция: относителна; ) .category-wrap h3:след (съдържание: ""; ширина: 6px; височина: 6px; фон: #80C8A0; позиция: абсолютна; дясно: 5px; дъно: 2px; сянка на полето: -8px -8px #80C8A0, 0 -8px #80C8A0 , -8px 0 #80C8A0; ) .category-wrap ul ( list-style: none; margin: 0; padding: 0; border-top: 1px solid rgba(0,0,0,.3); ) .category- wrap li (поле: 12px 0 0 0px;) .category-wrap a ( text-decoration: none; display: block; font-size: 13px; color: rgba(0,0,0,.6); padding: 5px ; позиция: относителна; преход: .3s линеен; ) .category-wrap a:after ( съдържание:"\f18e"; font-family: FontAwesome; позиция: абсолютна; дясно: 5px; цвят: бял; преход: .2s линеен ; ) .category-wrap a:hover (фон: #80C8A0 ; цвят:бял; )

    4. Вертикално меню с икони

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

    Категории

    * (box-sizing: border-box; margin: 0;) .widget (padding: 20px; border: 5px solid #f1f1f1; background: #fff; border-radius: 5px; font-family: "Roboto", sans- serif; ) .widget h3 ( margin-bottom: 20px; text-align: center; font-size: 24px; font-weight: normal; color: #424949; ) .widget ul ( margin: 0; padding: 0; list -style: няма; ширина: 250px; ) .widget li ( border-bottom: 1px solid #eaeaea; padding-bottom: 15px; margin-bottom: 15px; ) .widget li:last-child ( border-bottom: none; margin-bottom: 0; padding-bottom: 0; ) .widget a (text-decoration: none; color: #616a6b; display: inline-block; ) .widget li:before (font-family: FontAwesome; font-size : 20px; vertical-align:bottom; цвят: #dd3333; margin-right: 14px; ) .widget li:nth-child(1):before (content:"\f1fc";) .widget li:nth-child( 2):before (съдържание:"\f0d0";) .widget li:nth-child(3):before (content:"\f0cd";) .widget li:nth-child(4):before (content:" \f028";) .widget li:nth-child(5):before (съдържание:"\f03d";)

    5. Вертикално меню с картинки

    Този пример може да се използва за проектиране на блокове с нови продукти, подобни продукти и т.н. уебсайт на онлайн магазин.

    Jpeg">

    Продукт 1
    ₽ 2000
    Продукт 2
    ₽ 2500
    Продукт 3
    ₽ 2070
    @import url("https://fonts.googleapis.com/css?family=Open+Sans:300,400,600"); .col (ширина: 300px; фон: бял; подложка: 20px; граница: 1px плътно #eeeeee; семейство шрифтове: "Open Sans", sans-serif; ) .col * (поле: 0;) .widget-title ( margin: 0 0 30px; line-height: 1; text-transform: uppercase; letter-spacing: 1px; font-size: 20px; color: #242424; overflow: hidden; ) .widget-title:after ( съдържание: " "; позиция: относителна; дисплей: inline-block; ширина: 100%; вертикално подравняване: средата; дясно: -15px; margin-right: -100%; border-top: 2px solid #cca86d; ) .price-line (margin-bottom: 20px;) .price-line:last-child (margin-bottom: 0;) .price-line:after ( съдържание: ""; дисплей: таблица; ясно: и двете; ) .product-image ( ширина: 80px; float: ляво; ) .product-image a ( display: block; outline: none; ) .product-image img ( display: block; width: 100%; ) .product-content ( float: left; margin -left: 20px; ) .product-title (размер на шрифта: 18px; margin-bottom: 10px; line-height: 1; ) .product-title a (text-decoration: none; color: #242424; ) .price -кутия (цвят: #666; размер на шрифта: 18px; височина на реда: 1; ) .star-rating ( margin-bottom: 10px; font-size: 13px; position: relative; font-family: "FontAwesome"; ) .star-rating:before ( content: "\f005 \f005 \f005 \f005 \ f005"; позиция: абсолютна; горе: 0; ляво: 0; цвят: #FF9919; )

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

    Стъпка 1. Свържете шрифта с икони, създайте празен документ

    Можете да намерите подробна информация за работата с шрифта FontAwesome и линк към самия проект в моя пост -.

    Ето кода на страницата със свързаните файлове:

    Фиксирано странично меню

    Стъпка 2: Добавяне на HTML маркиране на фиксираното меню

    Ето кода за маркиране за нашето фиксирано меню:

    Както забелязахте, приложих етикета

    Стъпка 3. Добавяне на подменю HTML Markup

    Подменюто е същият списък като главното меню, плюс етикета , който показва иконата „карета отляво“, изпълнява функцията на определена „опашка“, повече подробности на снимката по-долу 🙂


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

    Стъпка 4 Оформяне на фиксираната странична лента

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

    #sidebar-menu ( position: fixed; /* коригираме нашето меню */ top: 200px; /* позиция на менюто спрямо горния край на браузъра */ left: 0; /* залепете менюто към левия край * / подложка: 10px; фон: # 323A45; цвят: #FFF; border-radius: 0 8px 8px 0; ) #sidebar-menu li ( позиция: относителна; курсор: показалец; ) #sidebar-menu li i ( /* Set иконите с фиксиран размер, височина и височина на линията трябва да са еднакви */ ширина: 27px; височина: 27px; височина на линия: 27px; радиус на границата: 4px; фон: #3CB7E7; подравняване на текст: център; ) #sidebar-menu li+li (margin-top: 4px;) #sidebar-menu b ( display: none; position: absolute; /* позицията спрямо левия край е равна на ширината на li елемента */ ляво: 27px; отгоре: 0; височина: 27px; /* ширината е равна на разстоянието между блоковото меню и подменюто */ ширина: 16px; височина на реда: 27px; фон: прозрачен; цвят: #323A45; /* позиционирайте иконата себе си вдясно, така че визуално да изглежда заедно с блока на подменюто */ text-align: right; ) #sidebar -menu li > ul ( показване: няма; позиция: абсолютна; отгоре: -10px; ляво: 42px; ширина: 120px подложка: 10px фон: #323A45; радиус на границата: 8px ) #sidebar-menu li:hover b, #sidebar-menu li:hover ul (display: block;) #sidebar-menu li a ( display: block; padding: 4px 8px; border-radius: 4px; цвят: #FFF ; -webkit-transition: всички .2s; -moz-transition: всички .2s; -ms-transition: всички .2s; -o-transition: всички .2s; преход: всички .2s; ) #sidebar-menu li a :hover ( дисплей: блок; фон: #3CB7E7; )

    Ако имате въпроси относно стайлинга, пишете в коментарите към тази публикация, ще се радвам да отговоря.
    Това е всичко! Готово е коригирано странично меню 🙂

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

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

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

    1 . Така че по подразбиране върви или при влизане в портала.

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

    3 . Тук беше направен клик, който показа всички заявени заявки.

    Да започнем инсталацията:



    ZORNET.RU





    css

    раздел (
    ширина:100%;
    max-width:1198px;
    margin:0pxauto;
    дисплей: маса;
    позиция: роднина;
    }

    Заглавие (
    ширина:100%;
    дисплей: маса;
    цвят на фона: #175812;
    margin-bottom:50px;
    }

    #kamtukagnpos(
    поплавък: наляво;
    размер на шрифта: 25px;
    преобразуване на текст: главни букви;
    цвят: #ffab2;
    тегло на шрифта: 600
    подложка: 19.8px 0px;
    }

    #kamtukagnpos:hover(
    текстова сянка: 0px 0px 6px rgba(255, 250, 250, 0.67);
    }

    Nav(
    ширина: авто;
    float:right;
    }

    Навул(
    дисплей: маса;
    float:right;
    }

    Nav ul li(
    float:left;
    }

    Nav ul li:last-child(
    padding-right:0px;
    }

    Nav ul li a (
    цвят: #e4f2ff;
    размер на шрифта: 19px;
    подложка: 24px 19px;
    дисплей: inline-block
    текстова сянка: 0 1px 0 #2e2f2e;
    }

    Nav ul li a: задръжте курсора на мишката (
    цвят на фона: #143a06;
    цвят: #fff9c8;
    преход: всичките 0.7s облекчават 0s;
    текстова сянка: 0 1px 0 #282b28;
    }

    Nav ul li a: задръжте i (
    цвят: #fdf7c9;
    преход: всичките 0.7s облекчават 0s;
    текстова сянка: 0 1px 0 #1c1d1c;
    }

    Nav ul li a i (
    padding-right: 9px;
    цвят: #f4faff;
    преход: всичките 0.7s облекчават 0s;
    текстова сянка: 0 1px 0 #202120;
    }

    Navigation-menusaita ul(
    дисплей: маса;
    ширина:24px;
    }

    Меню за навигация ul li(
    ширина:100%;
    височина:3px;
    цвят на фона:#e9f0f7;
    margin-bottom:4px;
    }

    Менюто за навигация в li:last-child(
    margin-bottom:0px;
    }

    Вход, етикет(
    дисплей: няма;
    }

    екран само за @media и (максимална ширина: 1440px)(
    раздел (
    максимална ширина:95%;
    }
    }

    екран само за @media и (максимална ширина: 980px)(
    заглавка (
    padding:20px 0px;
    }

    #kamtukagnpos(
    padding:0px;
    }

    Вход(
    позиция: абсолютна;
    отгоре: -9999px;
    ляво: -9999px;
    фон:няма;
    }

    Вход:fous(
    фон:няма;
    }

    етикет(
    float:right;
    подложка:8px 0px;
    дисплей: inline-block;
    курсор:показател;
    }

    Вход: отметнато ~ nav(
    дисплей:блок;
    }

    Nav(
    дисплей: няма;
    позиция: абсолютна;
    дясно:0px;
    отгоре:53px;
    цвят на фона:#174810;
    padding:0px;
    z-индекс:99;
    }

    Навул(
    ширина: авто;
    }

    Nav ul li(
    float:няма;
    padding:0px;
    ширина:100%;
    дисплей: маса;
    }

    Nav ul li a(
    цвят:#f7f2f2;
    font-size:15px;
    padding:10px 20px;
    дисплей:блок;
    граница-отдолу: 1px плътен rgba(204, 197, 197, 0.1);
    }

    Nav ul li a i(
    цвят:#f9f5d5;
    padding-right:13px;
    }
    }

    екран само за @media и (максимална ширина: 480px) (
    секция (максимална ширина: 90%;)
    }

    @media only екран и (максимална ширина: 360px) (
    label(padding:5px 0px;)
    #kamtukagnpos(размер на шрифта: 20px;)
    nav(top:47px;)
    }


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