Поправено уеб меню в чист CSS. Вертикално меню на CSS стил меню на цветна линия
Поправено уеб меню в чист CSS. Вертикално меню на CSS стил меню на цветна линия
02.12.2016
Добър ден, скъпи читатели. Днес ще анализираме темата " як Робити хоризонтално менюусукан HTML и CSS". Менюто, като правило, се намира в заглавката на сайта и също така се публикува от най-важната страна, нарича се още главно меню. Предвид силата на користувачите, те непрекъснато ще натискат. Това, как разработвате и какъв дизайн поставяте менюто, ще повлияят на поведението на преобразуването, конверсията и общото впечатление за вашия сайт и, разбира се, върху .
HTML код за хоризонтално меню
Ако дълго време менюто за сайта беше ограбено на снимки, таблици, флаш и може би на някои други неща, но в наше време това е най-популярният и дори правилен метод за създаване на менюта с використични тагове "списък".
Пример за използване на html тагове за създаване на меню в кода по-долу:
Головна
Услуги
Цени
Контакти
Стандартни CSS стилове за хоризонтално меню
ul ( стил на списък: няма; /*премахване на маркерите на списъка*/ поле: 0; /*премахване на допълване*/ padding-left: 0; /*премахване на подпълване*/ ) a ( текстова декорация: няма; /*премахване на подпълване Изпращане на текст */ ) li ( float:left; /*Разпространение на списъка хоризонтално за изпълнение на менюто*/ margin-right:5px; /*Добавяне на достъп до елементи от менюто*/ )
Трябва да подготвим топ менюто в хедър, без специални стилове, за да може да се нарече рамката на вашето бъдещо красиво меню. Ако копирате и поставите във вашите html и css, ще изглежда така.
Придънно към рамката (шаблона) на бъдещото ви меню
Лесно е да завършите всичко, вие, очевидно, искате по-красиво меню на марката, но без да разбирате основите, просто не можете да създадете добро меню без извинения в html и css.
Използвам само няколко други CSS метода, които се използват за създаване на меню с хоризонтален пурпурен float:left; например display:inline-block; или display:flex; , но е препоръчително да се използва методът використ, има още описания.
Нека си припомним нашия шаблон за меню с различни стилове и персонализирано йога харним.
Приложете хоризонтално меню на странична лента за уебсайта
Наведнъж ще донеса поръсване с готови приложения от дизайна на хоризонталното меню.
Можете сами да създадете "красив" за вашия сайт, а не да сърфирате в интернет. Най-простото нещо, което трябва да направите, е да вземете за основа едно от приложенията по-долу
Просто меню в син цвят с различни елементи
CSS стилове за горното меню
Стилове с долни шевове това меню. HTML се презаписва от същото нещо като менюто "wireframe".
Ul ( list-style: none; /*премахване на маркерите на списъка*/ поле: 0; /*премахване на полето*/ padding-left: 0; /*премахване на полето*/ margin-top:25px; /*премахване на горното поле*/ ) a ( text-decoration: none; /*премахнете фона на текста */ background:#30A8E6; /*добавете фона към елемента от менюто*/ color:#fff; /*премахнете цвета на цвета*/ padding:10px; /*добавете вход*/ font-family: arial;/*минимизирайте шрифта*/ border-radius:4px;/*добавете закръгленост*/ плавен преход*/ -o-преход: всички 0.3s 0.01s лекота; -webkit-преход: всички 0.3s 0.01s лекота; ) a:hover ( background:#1C85BB;/*Добавяне на ефект на задържане на курсора*/ ) li ( float:left; /*Разпространение на списъка хоризонтално за прилагане на менюто*/ margin-right:5px; /*Добавяне на достъп до елементи от менюто*/ )
Головне меню, roztashovane на цветната линия с червена пепел
CSS стил меню на цветна линия
ul ( list-style: none; /*премахване на маркерите на списъка*/ поле: 0; /*премахване на полето*/ padding-left: 0; /*премахване на полето*/ margin-top:25px; /*премахване на горното поле*/ background:#FF4444;/*добавяне на фон към елемента от менюто (заменяйки този параметър, вие запомняте цвета на цялото меню)*/ височина: 50px; / background:#FF4444;/*добавяне на фон към елемента от менюто ( заменяйки този параметър, вие запомняте цвета на цялото меню) елементи от менюто)*/ color:#fff; font-family: arial;/*промяна на шрифта*/ line-height:50px;/* вертикално подравняване на менюто*/ дисплей: блок; : всички 0,3s 0,01s лекота; /* Работен плавен преход*/ -o-преход: всички 0,3s 0,01s лекота; *добавете ефект при задържане на курсора*/ ) li ( float:ляво; /*Поставете списък хоризонтално за реално преход на менюто*/ )
Меню с джаджи в HTML+CSS
За изпълнение меню с допълнение, което се появява (отваря) на сайтаЗа всеки елемент от менюто трябва да добавим допълнително пренасочване на HTML кода на елемента, за да го изпратим от хоризонталното меню и да променим CSS стиловете. В стиловете ще добавим прост трик - промяна на дисплея на менюто, което се отваря, за допълнителни насоки относно елемента, от който се нуждаем в горно меню. Например, да вземем елемента "слуги".
Пример за създаване на просто меню, което можете да видите
HTML код за падащо меню
Головна
Услуги
Услуга 1
Довга сервиз 2
Сервиз 3
Цени
Контакти
CSS стил на падащото меню
ul ( list-style: none; /*премахване на маркерите на списъка*/ поле: 0; /*премахване на полето*/ padding-left: 0; /*премахване на полето*/ margin-top:25px; /*премахване на горното поле*/ background:#819A32;/*добавяне на фон към това меню*/ височина: 50px;/*задаване на височина*/ ) a ( text-decoration: none; елемент от менюто*/ color:#fff;/*минимизиране на цветовата настройка* / padding: 0px 15px;/*добавяне на граница*/ font-family: arial; вертикално*/ дисплей: блок; граница вдясно: 1px плътно #677B27;/*добавяне на десен контур*/ 0,01s лекота; -webkit- преход: всички 0,3s 0,01s лекота; / позиция:относителна; /*Задайте позицията за позициониране*/ ) /*Стилове за закачено меню* / li > ul (позиция:абсолютна; отгоре:25px; дисплей: няма; ) /*Работен прикрепен част от видимото* / li:hover > ul ( display:block; width:250px; /*Set menu width*/ ) li:hover > ul > li ( float:none; /*Задаване на хоризонтална позиция * /)
И за да разберете, ако вие сами сте виновни за слуги от тази категория, препоръчвам ви да се запознаете с материала:.
Опитах се да ви разкажа възможно най-накратко как да създадете чисто ново хоризонтално меню, как да създадете пръскане от шаблони, как да добавите нови прости стилове и как да създадете сладко меню, как да създадете меню, което виждате за вашия сайт. За по-голяма яснота избрах всички менюта, представени по-горе в един html файл, който можете да изберете по-долу. Можете да го видите на екранната снимка:
За уважение.
С актуализациите всичко може да бъде адаптивно в сайта, без хоризонталното меню, което също може да бъде приятелско на всички екрани. Отчаяно погледнете класическата навигация, виконан в чист стил, без да блъскате JS. В собствен стил, можете да отидете на много сайтове, тъй като това е направено в прост, стандартен вид, но с наличието на ефекти. Освен това, ако погледнете мобилни телефони, бутонът ще се появи автоматично правилната страна, когато се натиснат, бутоните за шрифта няма да се появят на цялата ширина, но всичко е изрядно, от една и съща страна бутоните за шрифтове ще се гледат визуално един друг.
Както можете да разберете, тогава тук бяха спечелени най-простите HTML списъци, всички с цел да се покажат всички списъци, за които е известно, че са необходими за прехода на тези chi іnshої категории. Концепцията се състои във факта, че е хубаво да подредите навигационния списък в хоризонтален изглед, но когато е мобилен, той автоматично ще стане вертикален, както е показано на изображенията, които са прикрепени към материала.
Веднага след като бъде прикрепен към заявката за кожата, самият търговец може да промени тази тема или тези фигури, които са по-подходящи тематично. Самото меню е създадено в тъмнозелена цветова схема, като се избира всеки един, което рядко е възможно. Но можете радикално да промените всичко, като влезете в стила на CSS и там можете да поставите стила на дизайн, от който се нуждаете, и най-вече да го отпишете като основа на интернет ресурса.
1
. Така че за zamovchuvannyam отидете или pіd час отивам до портала.
2
. Вече се чудим мобилно устройство, и въпреки това не щракнаха върху менюто.
3
. Тук направиха щракване, че се появиха всички запитвания, че ще попитат.
Nav ul li( float:няма; padding:0px; ширина:100%; дисплей: маса; }
Nav ul li a ( цвят:#f7f2f2; размер на шрифта:15px; padding:10px 20px; дисплей:блок; border-bottom: 1px плътен rgba(204, 197, 197, 0.1); }
Nav ul li a i( цвят:#f9f5d5; padding-right:13px; } }
екран само @media и (макс. ширина: 480px) ( секция (максимална ширина: 90%;) }
@media само екран и (максимална ширина: 360px) ( етикет(допълване:5px 0px;) #kamtukagnpos(font-size: 20px;) nav(отгоре:47px;) }
Пред него, как да го кажа, след това с уважение погледнете отстрани на демонстрацията и наистина оценете как работи всичко, но зад факта няма нищо подобно, дори ако посочите ресурса за придаване на ефекта, когато задържите курсора на мишката всички табели отиват към тунела, който е по-богат и по-красив.
Добрата навигация в сайта също е важна за блогърите. За її помощ vodvіduvach shvidko знам Ще ми трябва странаблог. Оценете интелигентността на сайта и системите за търсене. В тази статия знаете как да създадете хоризонтално меню за Blogger със сливащи се икони. Меню с копчета-икони, създадени на CSS. За да разгледате менюто, щракнете върху бутона по-долу:
Как да вмъкна хоризонтално css меню с икони в Blogger
Отидете в раздела „Шаблон“, поставете курсора върху редактора (било то място),
Натиснете Ctrl + F, за да потърсите кода и да намерите уликата за кода ]]>
Поставете следния код преди cim кода: ..
/* CSS кодът за менюто започва тук bloggertrix.com */ #btrix-nav (марж: 100px auto;list-style: none;width: 632px;height: 87px;overflow-y: hidden;) #btrix-nav li (float: left;) #btrix-nav li (дисплей: блок;цвят: бял;ширина: 120px;височина: 61px; margin-top: 24px;text-decoration: none;text-align: center;border-top: 1px плътно #bbb; граница -отдолу: 1px плътно #555;) #btrix-nav li a span.aname (шрифт: удебелен 17px/61px "Arial";цвят: #fff;text-transform: uppercase;cursor: pointer;position: relative;top: 0;transition: top .5s ease; текстова сянка: 1px 1px 1px rgba(0, 0, 0, 0.5);) #btrix-nav li a img (позиция: относителна; отгоре: 0; преход: отгоре .5s лекота;) #btrix-nav li a:hover (курсор: показалец;) #btrix-nav li:hover img (отгоре: -85px;) #btrix-nav li a:hover .aname (отгоре: 85px;) #btrix-nav li:nth-child(1) a (фон: #3eb006;border-radius: 5px 0 0 5px;border-left: 1px плътно #bbb;) #btrix-nav li:nth-child(2) a (фон: #9bc704;) #btrix-nav li:nth-child(3) a (фон: #0dc3ff;) #btrix-nav li:nth-child(4) a (фон: #51a2ec;) #btrix-nav li:nth-child(5) a (background: #6e3cab;border-radius: 0 5px 5px 0;border-right: 1px solid #555;)
Сега отидете в раздела "Дизайн",
Добавете нов HTML / JavaScript елемент и добавете кода:
Въведете кода, който е добавен към HTML / JavaScript притурката, необходимите промени:
Иконата # промяна на съобщението от необходимата страна на блога (например от страната на етикета, от страната на „контактите“, страна на главатаблог в)
изпратено на снимката, виждам я оранжево, заменете директно, като изпратите икона-картина за конкретния артикул.
Артикул, визия синьо, назовавайки страните на CSS менюто.
Преместване на HTML елемент? JavaScript е необходим в публикацията в блога „Дизайн“.
За вашето меню можете да завъртите икони, лога и други изображения в png нека да видим през фона. За да разберете нуждата от снимки, по-добре е да търсите икони. Например, iconsearch.com
Tse list posilan, scho доведе до различни странисайт. Изглежда лошо, ако списъкът е изпратен да замени прости маркери, допълнен с икони и е необходимо да промените графиката. Как да направя заявка пред базата данни?
HTML код
Mіzh тагове липредписано е а(# timchasova stub), в средата има два блокови елемента обхват. Първи участък - етикет ис класа на иконата, кода, който е копиран от сайта Страхотен шрифт. На друг обхват- Назовете съобщението, след това текста.
Велосипеди
мотоциклети
Автобуси
Автомобили
Вертолиоти
След свързване между таговете главашрифт на икона Страхотен шрифт- менюто може да изглежда така.
CSS стилове
За кочана на Google шрифтизберете приятелски шрифт за допълнителна кирилица, така че менюто да е руско вертикално.
Копирайте кода за връзка за избрания шрифт и го поставете в cssфайл.
При селектора тялоПиша името на избрания шрифт и го задавам на rozmіr.
Тяло ( марж: 0; допълване: 0; семейство шрифтове: "Marck Script", без засечки; размер на шрифта: 20px;
}
Позицията на нашето меню е подобна на прозореца на браузъра, 10% по-висока и 20% по-висока. Разбрах, че тези номера са взети от "стелите", ще си имаш своя воня.
Ul ( позиция: абсолютна; Топ 10%; ляво: 20%
}
Фиксираме ширината на менюто с 200 пиксела.
Ширина: 200px
Отидохме до елементите от менюто в списъка. Вземане на маркери от точки ли.
Ул Ли ( списък-стил: няма;
}
Означаваме рамката на звяра и дъното, които правят елементите от менюто един вид.
Не окачвайте рамки и разпределения между иконите и имената на съобщенията.
Малка дясна рамка за етикета а, който е елемент на ред, а до елемент на ред рамката не може да бъде разбита. Ето защо етикетът е показан аблоков елемент.
Ul li a ( дисплей:блок;
}
Сега можете да зададете рамка, да подредите допълнително съобщение и да запишете цвета на съобщението.
Граница вдясно: 1px плътно #131313; текст-украса: няма; цвят: #131313;
Оженете се за лявата рамка.
етикети обхват- блок елементи, в средата на които ще има текст, до обхватпредставено от елемент на редов блок.
Ul li a span ( позиция: относителна; дисплей: вграден блок
}
Трябват ни за първото обхват, в средата на който ще има икона, задайте стиловете, които ще изглеждат като друг обхват. За кого първи обхватсмислен псевдоклас - span:nth-child(1) ta stilizuemo yogo okremo. Нека зададем дясната и лявата рамка и ширината.
Ul li a span:nth-child(1) ( ширина: 30px border-left: 1px плътно #131313; граница вдясно: 1px плътно #131313;
}
Иконите стават в средата с полета от 10 пиксела от всички страни.
подравняване на текста: център; допълване: 10px
Иконите ще бъдат с тъмен цвят, размер 20 пиксела върху червени листни въшки.
Цвят: #131313; размер на шрифта: 20px; фон: #f44336;
Друг псевдоклас изисква да бъдат посочени само полета.
Ul li a span:nth-child(2) ( допълване: 10px
}
Сега вертикално менюпридобива остатъчния си вид. Удивете се на целия код и резултата.
Іsnuє маса готово решениеза сгъване на такива панели помогнете на jQuery, okremі плъгини и модули за различни системи keruvannya сайт. Всичко е по-добре, но е възможно, за внедряването на плъзгащи се панели всичко е възможно CSS? Очевидно можете! Ale с уважение))) като погледнем назад към онези, които обаче не всички браузъри са добри в поддържането на текущата мощ на CSS3.
Неотдавна решението за "виждане на планината" и дупето на робот. Един от първите коментари беше следният: „да преминем към мотора ...“. Защо b i n i? Нека да)).
Днес ще ви разкажем и ще ви покажа в приложението, като с помощта на „CSS magic“ можете да започнете да работите, напълно функционално, меню, с щракване. За кочана, зад установената традиция, удивлявайки се на живия дупе на роботизирания панел, далече, в същото време някой има нужда от него, можем да разгледаме цялото оформление, какво, как и сега. Приготвяне на ястия, приготвяне на опции от менюто, като лява, дясна ръка:
HTML маркиране
Нека да разгледаме таблото за превключване в качеството на един вид победоносен стандартен прапор ():
Може би квадратче за отметка в горната част на документа или по-скоро непосредствено след етикета
. Скритият атрибут се записва, без посредник да посочва лагера „прикачване“ за този елемент, както и уникален идентификатор, id="nav-toggle" например, за свързване с атрибута for на етикета
https://2.bp.blogspot.com/-vcR6lUGsroY/Ug5ATZk8oZI/AAAAAAAAAA00/XENkFMaBgv0/s1600/btrix-home.png" />
