Pure меню стил с CSS3
И така, въоръжени с търпение и детски креватчета (които се нуждаят от нея), започнете от "пълнеж" мъртъв код, за да се създаде жив и динамичен навигационното меню. Започваме, както винаги, с изграждането в HTML, обикновен списък на нашите менюта.
HTML маркиране
Както можете да видите, маркирането изглежда скандално проста, направен под формата на елементарен неподреден списък. За да вдъхне нов живот и да се придаде обжалва този списък, ще се прибегне до помощта на "магия» CSS 3, и по-точно, да се работи с параметрите на Cascading Style Sheets. Присвояване списък идентификатор идентификатор = "основната навигация". и първата точка клас = "първи", както и в CSS, Правене на магия във волята на формата, цвета и функционалността на нашето меню на бъдещето.
CSS3 оформление
При проектирането на менюто с помощта на граничен радиус заоблени ъгли и линеен градиент на функцията на начина, по който с не много отдавна, и любимата ми опера, като се започне с 11-та версия най-накрая направи включва подкрепа за градиент. Е, IEshka твърде надува и в крак с колеги, дори и с помощта на специален филтър.
Като направи всичко по-горе, в отработените газове и да получите чудесен резултат и тя ще изглежда по следния начин:
Всичко се оказа добре. В първия пример, когато мишката върху менюто, ние използвахме стандартна подчертаване. Нека да усложни стил, отстранете подчертават връзките и добавете хубав ефект. Голяма част няма да се раздели космите, а просто промяна на посоката на градиента, когато мишката върху елемент от менюто:
В резултат на това, ние получаваме един напълно различен изглед на активните навигационни точки:
Сигурно сте забелязали, че първа точка в нашето меню, когато мишката върху него, в действителност не е валиден, от лявата страна ъглите се появяват веднага, което не е добре за симетрия обшивам картина. Подобряване на ситуацията не е лесно, защото е необходимо да се добавят някои промени в първи клас. създаден специално за напредъка на първия параграф.
Нищо извънредно, не сме извършили, добавихте граничен радиус функция на горния и долния ляв ъгъл. Ако всичко е направено правилно (в противен случай тя може да не), то трябва да се окаже голям, лек, и най-важното е напълно функционална навигационното меню:
Това е всичко, скъпи мои приятели, аз се осмеляват да тихо се надявам, че ще останете доволни от резултата. И ако изведнъж, някой ще иска да се промени в менюто, това ще бъде направено много бързо, да експериментира с параметрите на стилове, може да направи всеки, най-невероятните и невъобразими резултати. Не се уморяват да повтарям, че бъдещето принадлежи на новите стандарти на работа и техники в уеб програмиране, аз ще се опитам да продължи да ви запознае с най-невероятни открития и решения на уеб дизайна. Следващия път ще кажа как правилно и без излишни жестове, можете бързо да добавите лентата за търсене в менюто за навигация в WordPress.
Материалът е изготвен, преведен и доведени до ума, въз основа на развитие, със сигурност един уважаван Burzhuina: Bavota Сан
Всичко ще бъде благодарен, ако подкрепа за проекта - добавяне на блог, за да AdBlock изключения и да споделите връзка към запис в своите социални мрежи:
Свързани статии