.
Az alaptartály belsejébe helyezzük a szükséges tartalmat.
) a css-ben éppen a „hamburger gomb” formájában alakul ki, melynek segítségével kapcsolatot létesítünk a rejtett jelölőnégyzettel . Ehhez kötelező, a for attribútum nevének meg kell egyeznie a jelölőnégyzet azonosítójával. Üres onclick attribútumot használ az iOS
weboldal <
ul>
<
li><
a href=
"#1"
>Egy
<
li><
a href=
"#2"
>Két
<
li><
a href=
"#3"
>Három
<
li><
a href=
"#4"
>Négy
<
li><
a href=
"#5"
>Öt
<
li><
a href=
"#6"
>Hat
<
li><
a href=
"#7"
>Hét
Egy Két Három Négy Öt Hat Hét Ezzel az oldalmenü elrendezésünk véget ért. Igaz, van még egy teljesen opcionális funkció, ez a háttérben a fő tartalom halványítása, amikor a panel be van kapcsolva. Ha kell, csak
<
div class
=
"mask-content"
>
A demóban ezt a funkciót alapból kizártam a munkából, kommentálva ezt a blokkot, ha hirtelen szüksége van rá, akkor könnyen megtalálhatja és ugyanolyan könnyen bekapcsolhatja))).
Tehát minden szükséges elem a helyén van, marad a legfontosabb és legérdekesebb, a formálás megjelenés , színét, formáját, és mozgást ad étlapunknak. Mindezt kizárólag CSS-sel fogjuk megtenni. Nincs JavaScript vagy további képek.
css Nem írok le minden szabályt és tulajdonságot, mivel közvetlenül a css kódot .
/** * Átkapcsolható oldalsó navigációs sáv * bal kattintásra kicsúszik */ . nav( /* a szélesség tetszőleges, kísérletezzen nyugodtan */ szélesség: 320 képpont minimális szélesség: 320 képpont; /* rögzítse és állítsa a panel magasságát a maximumra */ magasság: 100%; pozíció: rögzített; felső: 0 alsó: 0 margó: 0 /* a panel eltolása (elrejtése) az oldal bal széléhez képest */ balra: -320 képpont; /* bélés */ padding: 15px 20px; /* sima átmenet panel eltolás */ - webkit-átmenet: balra 0. 3s; - moz-átmenet: balra 0. 3s; átmenet: balra 0. 3s; /* határozza meg a panel háttérszínét */ háttér: #16a085; /* a többi elem tetején */ z-index: 2000 ; ) /** * Panelváltó gomb * címke
*/
. nav-toggle( /* abszolút pozíció */ pozíció: abszolút; /* a panel bal széléhez képest */ balra: 320 képpont; /* párnázás a panel felső szélétől */ felső: 1em; /* bélés */ párnázás: 0,5em /* a választógomb háttérszínének meghatározása * gyakrabban a panel háttérszínének megfelelően */ háttér: örököl; /* szöveg színe */ színe: #dadada; /* kurzor típusa */ kurzor: pointer; /* betűméret */ betűméret: 1,2 em; vonalmagasság: 1 ; /* mindig a többi oldalelem tetején */ z-index: 2001; /* szöveg színének animálása az egérrel */ -webkit-transition: color . 25s könnyű be-ki; - moz-átmenet: szín . 25s könnyű be-ki; átmenet: színes . 25s könnyű be-ki; ) /* gomb szövegének meghatározása * Unicode karakter (TRIGRAM FOR HEAVEN) */ . nav- toggle: after ( tartalom: "\2630" ; text- dekoráció: nincs; ) /* lebegő szöveg színe */ . navigációs kapcsoló: lebeg (szín: #f4f4f4; ) /** * Rejtett jelölőnégyzet (jelölőnégyzet) * láthatatlan és nem elérhető :) * választónév jelző attribútum */ [ id="nav-toggle" ] ( pozíció: abszolút; kijelző: nincs; ) /** * a kapcsoló helyzetének megváltoztatása * bekapcsolt állapotban mobil eszközök * ha a navigáció ki van bontva, helyezze a panel belsejébe */ [ id= "nav-toggle"] : bejelölve a ~ . nav > . navigációs kapcsoló (balra: automatikus; jobbra: 2px; felül: 1em; ) /** * Ha a jelölőnégyzet be van jelölve, a panel megnyílik * használja a :checked pszeudoosztályt */ [ id= "nav-toggle"] : bejelölve a ~ . nav ( balra: 0 ; box-shadow: 4px 0px 20px 0px rgba(0 , 0 , 0 , 0.5 ) ; - moz- box-shadow: 4px 0px 20px 0px rgba(0 , 0 , web kit 0 ), ; box-shadow: 4px 0px 20px 0px rgba(0 , 0 , 0 , 0.5 ) ; overflow- y: auto; ) /* * oldaltartalom eltolása * a panel szélességének méretével, * a funkció opcionális, amatőr számára */ [ id= "nav-toggle" ] : bejelölve ~ main > cikk ( - webkit- transzformáció: translateX(320px) ; - moz- transform: translateX(320px) ; transzformáció: translateX(320px) ; ) /* * a kapcsoló szimbólum megváltoztatása, * a szokásos kereszt (SZORZAT X), * bármilyen más ikont használhat */ [ id= "nav-toggle"] : bejelölve a ~ . nav > . nav-toggle: after ( tartalom: "\2715" ; ) /** * javítsa ki a hibát az Androidban<= 4.1.2
* см: http://timpietrusky.com/advanced-checkbox-hack
*/
body ( - webkit-animation: bugfix infinite 1s; ) @- webkit- keyframes bugfix ( to ( padding: 0 ; ) ) /** * vigyázzon a közepes és kis képernyőkre * a mobileszközök */ @ médiaképernyő és (min. szélesség: 320px) ( html, törzs ( margó: 0 ; túlcsordulás- x: rejtett; ) ) @ médiaképernyő és (max. szélesség: 320 képpont) ( html, törzs ( margó: 0 ; túlcsordulás- x: rejtett; ) .nav (szélesség: 100%; box-shadow: nincs ) ) /** * Kialakítjuk a panel címének (logójának) stílusát */ . nav h2 (szélesség: 90%; kitöltés: 0; margó: 10px 0; szöveg-igazítás: középre; szöveg-árnyék: rgba(255, 255, 255, .1) - 1px - 1px 1px, rgba(0, 0, 0 , .5 ) 1px 1px 1px; betűméret: 1,3em; sormagasság: 1,3em; átlátszatlanság: 0; transzformáció: skála(0,1, 0,1); -ms-transzformáció: skála(0,1, 0,1); - moz- transzformáció: skála(0.1 , 0.1 ) ; - webkit- transzformáció: skála(0.1 , 0.1 ) ; transzformáció- eredet: 0 % 0 %; - ms- transzformáció- eredet: 0 % 0 %; - moz- transzformáció- eredet: 0 % 0 % - webkit- transzformáció- eredet: 0 % 0 % - átmenet: átlátszatlanság 0. 8s, transzformáció 0. 8s - ms- átmenet: átlátszatlanság 0. 8s, - ms- transzformáció 0. 8s - moz-transition : átlátszatlanság 0,8s, -moz-transzformáció 0,8s;-webkit-transition: opacitás 0,8s, -webkit-transzformáció 0,8s; ) . nav h2 a ( szín: #dadada; szöveg- díszítés: nincs; szöveg-átalakítás: nagybetűs; ) /*a cím (logó) egyenletes megjelenése a panel megnyitásakor */ [ id= "nav-toggle"] : bejelölve a ~ . nav h2 ( opacitás: 1 ; transzformáció: scale(1 , 1 ) ; - ms- transzformáció: scale(1 , 1 ) ; - moz- transzformáció: scale(1 , 1 ) ; - webkit- transzformáció: scale(1 , 1 ) ) ;) /** * magát a menüt alkotja * rendezetlen listát használ a menüelemekhez * átalakítások és sima átmenetek rögzítése */ . nav > ul (megjelenítés: blokk; margó: 0; kitöltés: 0; listastílus: nincs; ) . nav > ul > li ( sormagasság: 2,5 ; átlátszatlanság: 0 ; - webkit- transzformáció: translateX(- 50 % ) ; - moz- transzformáció: translateX(- 50 % ) ; - ms- transzformáció: translateX(- 50 % ) ) ; transzformáció: translateX(- 50 % ) ; - webkit-transition: átlátszatlanság. 5s. 1s, - webkit-transzformáció. 5s. 1s; - moz- átmenet: átlátszatlanság. 5s. 1s, - moz- transzformáció. 5s. 1s ;- ms- átmenet: átlátszatlanság .5s .1s, - ms- transzformáció .5s .1s; átmenet: opacitás .5s .1s, transzformáció .5s .1s; ) [ id= "nav-toggle" ] : bejelölve ~ . nav > ul > li ( átlátszatlanság: 1 ; - webkit- transzformáció: translateX(0 ) ; - moz- transzformáció: translateX(0 ) ; - ms- transform: translateX(0 ) ; transzformáció: translateX(0 ) ; ) /* meghatározza a menüelemek megjelenési időközeit */ . nav > ul > li: nth- child(2) (- webkit- átmenet: átlátszatlanság . 5s . 2s, - webkit- transzformáció . 5s . 2s; átmenet: átlátszatlanság . 5s . 2s, transzformáció . 5s . 2s; ) . nav > ul > li: nth- child(3 ) ( - webkit - átmenet: átlátszatlanság . 5s . 3s, - webkit - transzformáció . 5s . 3s; átmenet: átlátszatlanság . 5s . 3s, transzformáció . 5s . 3s; ). nav > ul > li: nth- child(4 ) ( - webkit - átmenet: átlátszatlanság . 5s . 4s, - webkit - transzformáció . 5s . 4s; átmenet: átlátszatlanság . 5s . 4s, transzformáció . 5s . 4s; ) . nav > ul > li: nth- child(5 ) (- webkit- átmenet: átlátszatlanság . 5s . 5s, - webkit- transzformáció . 5s . 5s; átmenet: átlátszatlanság . 5s . 5s, transzformáció . 5s . 5s; ). nav > ul > li: nth- child(6 ) ( - webkit - átmenet: átlátszatlanság . 5s . 6s, - webkit - transzformáció . 5s . 6s; átmenet: átlátszatlanság . 5s . 6s, transzformáció . 5s . 6s; ) . nav > ul > li: nth- child(7) (- webkit- átmenet: átlátszatlanság . 5s . 7s, - webkit- transzformáció . 5s . 7s; átmenet: átlátszatlanság . 5s . 7s, transzformáció . 5s . 7s; ) /** * stílus menüpontok hivatkozásai */ . nav > ul > li > a ( megjelenítés: inline- block; pozíció: relatív; kitöltés: 0 ; betűcsalád: "Open Sans" , sans-serif; font-weight: 300 ; font-size: 1. 2em; color : #dadada;szélesség: 100%;szöveg-dekoráció: nincs; /* sima átmenet */ -webkit-transition: color . 5s könnyedség, padding . 5s könnyűség; - moz-átmenet: szín . 5s könnyedség, padding . 5s könnyűség; átmenet: színes . 5s könnyedség, padding . 5s könnyűség; ) /** * az egérmutatón lévő menühivatkozások állapota */ . nav > ul > li > a:hover, . nav > ul > li > a: fókusz ( szín: fehér; kitöltés balra: 15 képpont; ) /** * aláhúzott menühivatkozások */ . nav > ul > li >
a :
előtt {
tartalom :
""
;
kijelző :
Blokk ;
pozíció :
abszolút ;
jobb :
0
;
alsó :
0
;
magasság :
1 képpont ;
szélesség :
100
%;
-
webkit -
átmenet :
szélesség 0s könnyedség ;
átmenet :
szélesség 0s könnyedség ;
}
.
nav >
ul >
li >
a :
után {
tartalom :
""
;
kijelző :
Blokk ;
pozíció :
abszolút ;
bal :
0
;
alsó :
0
;
magasság :
1 képpont ;
szélesség :
100
%;
háttér :
#3bc1a0; -
webkit -
átmenet :
szélesség .
5s könnyedség ;
átmenet :
szélesség .
5s könnyedség ;
}
/** * animálja a linkek aláhúzását * */
.
nav >
ul >
li >
a :
lebeg :
előtt {
szélesség :
0
%;
háttér :
#3bc1a0; -
webkit -
átmenet :
szélesség .
5s könnyedség ;
átmenet :
szélesség .
5s könnyedség ;
}
.
nav >
ul >
li >
a :
lebeg :
után {
szélesség :
0
%;
háttér :
átlátszó ;
-
webkit -
átmenet :
szélesség 0s könnyedség ;
átmenet :
szélesség 0s könnyedség ;
}
/* háttér elhalványítása a fő tartalomnál * miközben blokkolja az elemeket * ellentmondásos funkció, ha szüksége van rá * csak törölje a megjegyzéseket */
/* .mask-content ( kijelző: blokk; pozíció: rögzített; felül: 0; bal: 0; z-index: 1000; szélesség: 100%; magasság: 100%; háttérszín: rgba(0, 0, 0 , 0,4); láthatóság: rejtett; átlátszatlanság: 0; ) :ellenőrzött ~ .mask-content ( láthatóság: látható; átlátszatlanság: 1; -webkit-transition: opacity .5s, láthatóság .5s; átmenet: opacity .5s, láthatóság . 5s;) */
/** * Átkapcsolható oldalsó navigációs sáv * bal kattintásra felugrik */ .nav ( /* a szélesség tetszőleges, kísérletezhet nyugodtan */ szélesség: 320 képpont; min-szélesség: 320 képpont; /* javítsa és állítsa be a panel a maximális értékre */ magasság : 100%; pozíció: rögzített; felső: 0; alsó: 0; margó: 0; /* a panel eltolása (elrejtése) az oldal bal széléhez képest */ balra: -320 képpont; /* padding */ padding: 15px 20px; / * sima paneleltolás átmenet */ -webkit-transition: balra 0,3 s; -moz-transition: balra 0,3 s; átmenet: balra 0,3 s; /* a háttérszín beállítása panel */ háttér: #16a085; /* a többi elem tetején * / z-index: 2000; ) /** * Panelváltó gomb * címke */ .nav-toggle ( /* abszolút pozíció */ pozíció: abszolút; /* a panel bal széléhez képest */ balra: 320 képpont; /* kitöltés a panel felső szélétől */ felül: 1em; / * padding */ padding: 0.5em; /* határozza meg a választógomb háttérszínét * gyakrabban a panel háttérszínének megfelelően */ háttér: öröklődik; /* szöveg színe */ színe: #dadada; /* kurzor típusa */ kurzor : mutató; /* betűméret * / betűméret: 1,2 em; sormagasság: 1; /* mindig a többi oldalelem tetején */ z-index: 2001; /* szöveg színének animálása a hoveren */ -webkit -átmenet: színes .25s könnyű be-ki; -moz-átmenet: színes .25s könnyű be-ki; átmenet: színes .25s könnyű behúzás; ) /* gomb szövegének meghatározása * Unicode karakter (TRIGRAM FOR HEAVEN ) */ .nav-toggle:after ( tartalom: "\2630"; szövegdekoráció: nincs; ) /* hover text color */ .nav-toggle:hover ( szín: #f4f4f4; ) /** * Rejtett jelölőnégyzet (jelölőnégyzet) * láthatatlan és nem elérhető :) * választónév jelző attribútum */ ( positi on: abszolút; kijelző: nincs; ) /** * a kapcsoló helyzetének módosítása * mobileszközökön való megtekintéskor * ha a navigáció ki van bontva, a panelen belüli pozíció */ :checked ~ .nav > .nav-toggle ( balra: auto; jobbra: 2px; felül: 1em; ) /* * * Ha a négyzet be van jelölve, a panel megnyílik * használja a pszeudoosztályt :checked */ :checked ~ .nav ( balra: 0; box-shadow:4px 0px 20px 0px rgba(0,0,0, 0.5 ); -moz-box-shadow :4px 0px 20px 0px rgba(0,0,0, 0,5); -webkit-box-shadow:4px 0px 20px 0px rgba(0,0,0, 0,5); overflow-y: auto; ) /* * tartalomeltolás oldal * a panel szélességével, * opcionális, amatőr számára */ :checked ~ main > cikk ( -webkit-transform: translateX(320px); -moz-transform: translateX( 320px); transzformáció: translateX(320px); ) /* * váltókapcsoló szimbólum módosítása, * egyéni kereszt (SZORSZORZÁS X), * bármilyen más ikont használhat */ :checked ~ .nav > .nav-toggle:after ( tartalom: "\2715"; ) /** * előtag hiba az androidban<= 4.1.2
* см: http://timpietrusky.com/advanced-checkbox-hack
*/ body {
-webkit-animation: bugfix infinite 1s;
} @-webkit-keyframes bugfix {
to {
padding: 0;
}
} /**
* позаботьтимся о средних и маленьких экранах
* мобильных устройств
*/ @media screen and (min-width: 320px) {
html,
body {
margin: 0;
overflow-x: hidden;
}
} @media screen and (max-width: 320px) {
html,
body {
margin: 0;
overflow-x: hidden;
}
.nav {
width: 100%;
box-shadow: none
}
} /**
* Формируем стиль заголовка (логотип) панели
*/ .nav h2 {
width: 90%;
padding: 0;
margin: 10px 0;
text-align: center;
text-shadow: rgba(255, 255, 255, .1) -1px -1px 1px, rgba(0, 0, 0, .5) 1px 1px 1px;
font-size: 1.3em;
line-height: 1.3em;
opacity: 0;
transform: scale(0.1, 0.1);
-ms-transform: scale(0.1, 0.1);
-moz-transform: scale(0.1, 0.1);
-webkit-transform: scale(0.1, 0.1);
transform-origin: 0% 0%;
-ms-transform-origin: 0% 0%;
-moz-transform-origin: 0% 0%;
-webkit-transform-origin: 0% 0%;
transition: opacity 0.8s, transform 0.8s;
-ms-transition: opacity 0.8s, -ms-transform 0.8s;
-moz-transition: opacity 0.8s, -moz-transform 0.8s;
-webkit-transition: opacity 0.8s, -webkit-transform 0.8s;
} .nav h2 a {
color: #dadada;
text-decoration: none;
text-transform: uppercase;
} /*плавное появление заголовка (логотипа) при раскрытии панели */ :checked ~ .nav h2 {
opacity: 1;
transform: scale(1, 1);
-ms-transform: scale(1, 1);
-moz-transform: scale(1, 1);
-webkit-transform: scale(1, 1);
} /**
* формируем непосредственно само меню
* используем неупорядоченный список для пунктов меню
* прикрутим трансфомации и плавные переходы
*/ .nav > ul ( kijelző: blokk; margó: 0; kitöltés: 0; lista-stílus: nincs; ) .nav > ul > li ( sormagasság: 2,5; átlátszatlanság: 0; -webkit-transzformáció: translateX(-50%); -moz-transzformáció: translateX(-50%); -ms-transform: translateX(-50%); transzformáció: translateX(-50%); -webkit-transition: opacity .5s .1s, -webkit-transform .5s .1s; -moz-transition: átlátszatlanság .5s .1s, -moz-transzformáció .5s .1s; -ms-transition: opacitás .5s .1s, -ms-transzformáció .5s .1s; átmenet: opacitás .5s .1s , transzformáció .5s .1s; ) :checked ~ .nav > ul > li ( átlátszatlanság: 1; -webkit-transzformáció: translateX(0); -moz-transform: translateX(0); -ms-transform: translateX(0 );transzformáció: translateX(0); ) /* menüelem-intervallumok meghatározása */ .nav > ul > li:nth-child(2) ( -webkit-transition: opacity .5s .2s, -webkit-transform .5s . 2s; átmenet: opacity .5s .2s, transzformáció .5s .2s; ) .nav > ul > li:nth-child(3) ( -webkit-transition: opacity .5s .3s, -webkit-transform .5s .3s ;átmenet: átlátszatlanság .5s .3s, átalakítás .5s .3s; ) .nav > ul > li:nth-child(4) ( -webkit-transition: opacity .5s .4s, -webkit-transform .5s .4s; átmenet: átlátszatlanság .5s .4s, transzformáció .5s .4s; ) .nav > ul > li:nth-child(5) ( -webkit-transition: opacity .5s .5s, -webkit-transform .5s .5s; átmenet: opacity .5s .5s, transzformáció .5s .5s; ) .nav > ul > li:nth-child(6) ( -webkit-transition: opacity .5s .6s, -webkit-transform .5s .6s; átmenet: opacity .5s .6s, transzformáció .5s .6s; ) . nav > ul > li:nth-child(7) ( -webkit-transition: opacity .5s .7s, -webkit-transform .5s .7s; átmenet: opacity .5s .7s, transzformáció .5s .7s; ) /* * * menüelem hivatkozás stílusa */ .nav > ul > li > a ( megjelenítés: inline-block; pozíció: relatív; padding: 0; font-family: "Open Sans", sans-serif; font-weight: 300; betűméret: 1,2 em; szín: #dadada; szélesség: 100%; szövegdekoráció: nincs; /* sima átmenet */ -webkit-transition: színes 0,5 mp-es egyszerűség, padding 0,5-s könnyű; -moz-átmenet: szín .5s könnyű, padding 0,5s könnyű; átmenet: színes .5s könnyű, padding 0,5s könnyű; ) /** * a menühivatkozások állapota lebegve */ .nav > ul > li > a:hover, .nav > ul > li > a:fókusz ( szín: fehér; padding-bal : 15px; ) /** * menülink aláhúzása */ .nav > ul > li > a:before ( tartalom: ""; megjelenítés: blokk; pozíció: abszolút; jobb: 0; alul: 0; magasság: 1px; szélesség: 100 % ; -webkit-transition: szélesség 0s könnyű; átmenet: szélesség 0s könnyű; ) .nav > ul > li > a:after ( tartalom: ""; megjelenítés: blokk; pozíció: abszolút; bal: 0; alsó: 0; magasság : 1px; szélesség: 100%; háttér: #3bc1a0; -webkit-transition: szélesség . 5s könnyűség; átmenet: szélesség ,5s könnyedség; ) /** * az aláhúzás animálása * hivatkozások lebegtetésén */ .nav > ul > li > a:hover:before ( szélesség: 0%; háttér: #3bc1a0; -webkit-transition: szélesség .5s könnyű; átmenet: szélesség .5 s egyszerű * miközben blokkolja az elemeket * ellentmondásos funkció, ha szüksége van rá * csak törölje a megjegyzést */ /* .mask-content ( kijelző: blokk; pozíció: rögzített; felül: 0; bal: 0; z-index: 1000; szélesség: 100% ; magasság: 100%; háttérszín: rgba(0, 0, 0, 0,4); láthatóság: rejtett; átlátszatlanság: 0; ): ellenőrizve ~ .mask-content ( láthatóság: látható; átlátszatlanság: 1; -webkit -átmenet : átlátszatlanság 0,5 s, láthatóság 0,5 s; átmenet: átlátszatlanság 0,5 s, láthatóság 0,5 s; ) */
Mint érti, szinte minden ingatlanérték nem kötelező, pl. minden elemét könnyedén változtathatja ízlése és színe szerint, a magyarázatok, remélem, ebben segítenek. Nos, ha valami nem taposna el, vagy előkerült a cuccom, írjátok meg kommentben, mi mindenképp kitaláljuk és megjavítjuk.
Végezetül szeretném emlékeztetni, hogy nem minden böngésző képes egyformán jól kezelni a CSS3 tulajdonságait. Ez a megoldás természetesen nagyon érdekes, de mégis inkább kísérleti jellegű. Miután az igényeinek megfelelően beállította, mielőtt szorosan rácsavarná a munkaterületre, feltétlenül ellenőrizze a működését különböző böngészők és különféle mobileszközökön.
Nézze meg újra az eredményt, töltse le a forrásarchívumot, kísérletezzen különböző paraméterekkel, és hozzon létre, hozzon létre, hozzon létre...
A közeljövőben megpróbálom elmondani és bemutatni, hogyan, az alapján ezt a döntést , könnyedén megvalósíthatja a visszahúzható, oldalsó panelek , más, hasonlóan fontos elemekkel a fedélzeten lévő felhasználókkal való interakcióhoz.
A felhasználóknak most lehetőségük van megismerkedni a . Mindegyik külön kategóriában található, amely megtalálható a TemplateMonster piacon. Semmi gond nem lehet velük. Csak adja hozzá egyedi tartalmát, és kész is – vállalkozást indíthat, és egyre több olvasót vonzhat. Azt is nagyon fontos megjegyezni, hogy minden sablon szövegét kézzel írták.
Minden tisztelettel, Andrew
Jó napot, kedves olvasók. Ma megvitatjuk a témát hogyan kell csinálni vízszintes menü HTML és CSS használatával ". A menü általában az oldal fejlécében található, és a legfontosabb oldalakra mutató hivatkozások listája, más néven főmenü . A felhasználók folyamatosan kattintanak ezekre a linkekre. Az elrendezésük és a menü megjelenésének módja befolyásolja a felhasználói viselkedést, a konverziót, a webhely általános élményét és természetesen a .
HTML kód a vízszintes menühöz
Réges-régen az oldal főmenüjét képekre, táblázatokra, flashre, esetleg másra készítették, de manapság a legkedveltebb és leghelyesebb módszer a menükészítés „list” címkékkel.
A címkék menük létrehozására szolgálnak.
Példa a html címkék használatával menü létrehozására az alábbi kódban:
itthon
Szolgáltatások
Árak
Kapcsolatok
Szabványos CSS-stílusok a vízszintes menühöz ul ( lista-stílus: nincs; /*listajelölők eltávolítása*/ margó: 0; /*remove padding*/ padding-left: 0; /*remove padding*/ ) a ( szövegdekoráció: nincs; /*aláhúzás eltávolítása link szövege*/ ) li ( float:left; /*A menü megvalósításához helyezze el a listát vízszintesen*/ margó-jobbra:5px; /*A menüelemek behúzása*/ ) A fejlécben kész felső menüt kapunk, különösebb stílusok és csengő-síp nélkül, ezt nevezhetjük jövőd keretének gyönyörű menü . Ha kimásolod és beilleszted ezt a html-t és css-t, akkor így fog kinézni.
Példa keretre (sablonra) a jövőbeli menühöz
Minden nagyon egyszerűen alakult, természetesen azonnal gyönyörű főmenüt akarsz, de az alapok megértése nélkül egyszerűen nem tudsz jó menüt létrehozni html és css hibák nélkül.
Számos más CSS-módszer is létezik a menük vízszintessé tételére a float:left; , például display:inline-block; vagy display:flex; , de javasolt a fent leírt módszer alkalmazása.
Töltsük meg menüsablonunkat különféle stílusokkal, és készítsük el szép .
Példák egy webhely gyönyörű vízszintes menüjére
Most bemutatok néhányat kész példák kész vízszintes menükialakítással.
Az összes "szép dolgot" saját maga is létrehozhatja, és nem kereshet az interneten. Ennek legegyszerűbb módja az alábbi példák egyikén alapul.
Egyszerű kék menü külön elemekkel
CSS-stílusok a „felső” menühöz
Az alábbiakban a menü stílusai láthatók. A HTML ugyanaz marad, mint a "csontváz" menüben.
Ul (lista-stílus: nincs; /*listajelölők eltávolítása*/ margó: 0; /*remove padding*/ padding-left: 0; /*remove padding*/ margin-top: 25px; /*behúzás tetejére*/ ) a ( szövegdekoráció: nincs; /*hivatkozás szöveg aláhúzásának eltávolítása*/ háttér:#30A8E6; /*háttér hozzáadása a menüelemhez*/ color:#fff; /*hivatkozás színének módosítása*/ kitöltés:10px; /*kitöltés hozzáadása */ font-family: arial; /*betűtípus módosítása*/ border-radius:4px; /*kerekítés hozzáadása*/ -moz-transition: minden 0.3s 0.01s könnyű; /*zökkenőmentes átmenet*/ -o-transition : minden 0,3 mp 0,01 mp egyszerű; -webkit-transition: minden 0,3 mp 0,01 mp könnyű implementálja a menüt*/ margó-jobb:5px; /*A menüelemek behúzása*/ )
A főmenü egy színes vonalon található, piros háttérrel
css stílusú menü színes vonalon ul ( lista-stílus: nincs; /*listajelölők eltávolítása*/ margó: 0; /*remove padding*/ padding-left: 0; /*remove padding*/ margin-top:25px; /*behúzás a tetejére*/ háttér :#FF4444; /*háttér hozzáadása a teljes menühöz (a paraméter lecserélésével a teljes menü színe megváltozik)*/ magasság: 50 képpont; /*magasság beállítása*/ ) a ( szövegdekoráció: nincs; /* távolítsa el a hivatkozás szövegének aláhúzását* / background:#FF4444; /*háttér hozzáadása a menüelemhez (a beállítás lecserélésével az összes menüpont színe megváltozik)*/ color:#fff; /*a hivatkozás színének módosítása* / padding:0px 15px; /*kitöltés hozzáadása*/ font-family: arial; /*betűtípus módosítása*/ line-height:50px; /*menü függőleges igazítása*/ megjelenítés: blokk; szegély jobbra: 1px szilárd # F36262; /*szegély hozzáadása a jobb oldalra*/ -moz-transition : minden 0,3 s 0,01 mp egyszerű; /*zökkenőmentes átmenet*/ -o-átmenet: minden 0,3 s 0,01 mp egyszerű; -webkit-transition: minden 0,3 mp 0,01 mp egyszerű menü*/ ) Legördülő menü HTML+CSS-ben
A megvalósításhoz további legördülő (legördülő) menü az oldalon bármely menüpontnál a vízszintes menü bármely hivatkozásához egy további elemlistát kell hozzáadnunk a HTML-kódhoz, és módosítanunk kell a CSS-stílusokat. A stílusoknál egy egyszerű trükköt fogunk használni - a legördülő menü megjelenítését átállítjuk a kívánt elemre. főmenü . Vegyük például a „szolgáltatások” tételt.
Példa egy egyszerű legördülő menü létrehozására
A legördülő menü HTML kódja
itthon
Szolgáltatások
Szolgáltatás 1
Hosszú szolgálat 2
Szolgáltatás 3
Árak
Kapcsolatok
Legördülő CSS-stílusok ul ( lista-stílus: nincs; /*listajelölők eltávolítása*/ margó: 0; /*remove padding*/ padding-left: 0; /*remove padding*/ margin-top:25px; /*behúzás a tetejére*/ háttér :#819A32; /*háttér hozzáadása a teljes menühöz*/ magasság: 50 képpont; /*magasság beállítása*/ ) a ( szövegdekoráció: nincs; /*a hivatkozás szövegének aláhúzásának eltávolítása*/ háttér:#819A32 ; /*háttér hozzáadása a menüelemhez*/ color:#fff; /*hivatkozások színének módosítása*/ padding:0px 15px; /*kitöltés hozzáadása*/ font-family: arial; /*betűtípus módosítása*/ sormagasság :50px; /*menü igazítása függőlegesekhez*/ megjelenítés: blokk; jobb oldali szegély: 1 képpont tömör #677B27; /*szegély hozzáadása jobbra*/ -moz-transition: minden 0,3 mp 0,01 mp egyszerű; /*egy sima átmenet*/ -o-transition: minden 0,3 mp 0,01 mp könnyű; -webkit-transition: minden 0,3 mp 0,01 mp könnyű :left; /*A lista vízszintes elhelyezése a menü megvalósításához* / position:relative; /*pozicionálás pozíciójának beállítása*/ ) /*A rejtett legördülő menü stílusai* / li > ul ( pozíció:abszolút; felső:25px; display:none; ) /*A rejtett rész láthatóvá tétele*/ li:hover > ul ( display:block; width:250px; /*A legördülő menü szélességének beállítása*/ ) li:hover > ul > li ( float:none; /* Távolítsa el a vízszintes elhelyezést* / ) És annak megértéséhez, hogy pontosan milyen szolgáltatásokkal és kategóriákkal kell rendelkeznie, azt javaslom, hogy ismerkedjen meg az anyaggal:.
Igyekeztem a lehető legrövidebben elmesélni, hogyan készítsünk vízszintes főmenüt, készítsünk néhány sablont, hogyan tegyünk bele egyszerű stílusokat és hogyan tegyük szebbé, hogyan készítsünk legördülő menüt az oldalunkhoz. A kényelem kedvéért az összes fent bemutatott menüt egy html fájlba gyűjtöttem össze, amelyet lent letölthet. Így néz ki a képernyőképen:
Köszönöm a figyelmet.
Ebben az oktatóanyagban egy klasszikus vízszintes menüt készítünk tiszta CSS . Ikonok vannak a listákban. Ha egy elem fölé viszi az egérmutatót, simán megváltoztatja a gomb és a szöveg színét, és árnyékot ad hozzá. A legördülő listák többszintűvé tehetők, és ami a legfontosabb, mindez egyszerűen megvalósítható a tiszta CSS3-ban.
A leckében a következőket fogjuk használni:
display:flex;
használja az átmenetet ;
pozíció segítségével pozícionáljuk az elemeket.
A vízszintes menü HTML szerkezete
Először is írjuk meg a vízszintes menü jelölését. Megnyitjuk a fejlesztői környezetünket, az én esetemben ez a PhpStorm, létrehozunk egy index.html fájlt, megírjuk a html:5 keretrendszert, a lang-ot lecseréljük ru-ra.
A kódoláson kívül minden meta törlöm, megírom a címem " tom menü ».
A törzs közé írjuk a header tag-et, és benne van egy blokk a .dws-menu osztállyal, amelyben a menünk fog elhelyezkedni. Továbbá a felépítés a következő lesz, listákat készítünk öt darabos mennyiségben. Minden listához tartozik egy hivatkozás a href="#" attribútummal. Aztán lesz egy I ikon a .fa .fa- osztállyal.
Kattintson az Alkalmaz gombra.
Írjuk be a menüpontok nevét ( Kezdőlap, Termékek, Szolgáltatások, Hírek, Kapcsolatok ).
Ezután válassza ki és csatlakoztassa az ikonokat. Megyünk a Font Awesome webhelyre, és kiválasztjuk az alábbi menüelemek ikonjait:
Az archívumot az oldalról ikonokkal letöltjük, tartalmát kibontjuk a számítógépünkre, a fonts mappát és a css mappát átmásoljuk fejlesztői környezetünkbe.
A betűtípusok mappa ikon-betűtípusokat, a css mappa pedig azok stílusát tartalmazza. A tömörített stílusokat a font-awesome.min eltávolíthatja, beleértve a tömörítetlen font-awesome.css fájlt is.
Az index.html-ben összekapcsolunk ikonokat, és minden elemnek előírjuk a saját ikonstílusát ( itthon , bevásárlókocsi , fogaskerekek , th-lista , boríték-nyitott ).
Elkészítettük a főkeretet, a főstílus leírása után kialakítjuk az almenüt, most pedig készítünk egy fájlt, ahol a style.css vízszintes menü főbb stílusait írjuk le és az index.html-hez kapcsoljuk. A stílusok összekapcsolásának ellenőrzésére létrehozok egy img mappát, amelyben egy tetszőleges képet helyezek el a háttér . Írjuk meg a kép kapcsolatát a háttér segítségével.
Body( background-image: url(../img/ep_naturalwhite.png"); )
CSS-stílusok leírása a vízszintes menüben
Először is állítsuk vissza az összes behúzást, amelyet a különböző böngészők alapértelmezés szerint beállíthatnak:
Dws-menu *( margó: 0; kitöltés: 0; )
Állítsuk a fejlécet 200 pikk-re. és rendelje hozzá a letölthető és az oldalához külön-külön csatlakoztatható Cuprum betűtípust, minden esetre írunk további betűtípusokat.
Fejléc (margó: 200 képpont; betűcsalád: Cuprum, Arial, Helvetica, serif nélkül; )
Rejtsük el a jelölőket a listákból:
dws-menu ul, .dws-menu ol( lista-stílus: nincs; )
Jelenítsük meg a listákat vízszintesen a display: len , és tegyük középre:
Dws-menu > ul(megjelenítés: flex; justify-content: center; )
A fejlécben csak felülről húzzunk be, írjuk a margin-top .
Fejléc( margó felső: 200 képpont; font-család: Cuprum, Arial, Helvetica, sans-serif; )
Tervezzük meg étlapunkat, állítsuk be a gombok színét, betűtípusát stb.
Dws-menu > ul li a( kijelző: blokk; háttér: #ececed; kitöltés: 15px 30px 15px 40px; betűméret: 14px; szín: #454547; szövegdekoráció: nincs; szövegátalakítás: nagybetűs; )
Ezután pozícionáljuk az ikonokat, hozzárendeljük a listák pozícióját: relatív; az ikonok további középre helyezéséhez:
dws-menu > ul li( pozíció: relatív; )
dws-menu > ul li > a i.fa(pozíció: abszolút; felső: 15 képpont; balra: 12 képpont; betűméret: 18 képpont; )
Rendeljünk szegélyelválasztót a listákhoz, jelöljük ki az első LI elemet, és állítsuk be a szegélyt. Kijelöljük az utolsó LI elemet, és hozzárendeljük egy hasonló szegélyt.
Dws-menu > ul li:first-child( border-bal: 1px solid #b2b3b5; ) .dws-menu > ul li:last-child( border-right: 1px solid #babbbd; )
Elválasztók készítése LI listákhoz:
.dws-menu > ul li( pozíció: relatív;
szegély-jobb: 1px tömör #c7c8ca;
}
A menü elnyerte a kinézetét, majd lebegtetve elkezdheti a stílusok leírását.
Animálja a vízszintes menüt az egérmutatóval
Dws-menu li a:hover(háttér: #454547; szín: #ffffff; box-shadow: 1px 5px 10px -5px fekete; átmenet: minden 0,3 másodperccel egyszerű; )
És hogy ez a hatás zökkenőmentesen eltűnjön, add hozzá ezt a stílust a nyugalmi hivatkozáshoz:
.dws-menu > ul li a( kijelző: blokk; háttér: #ececed; kitöltés: 15px 30px 15px 40px; betűméret: 14px; szín: #454547; szövegdekoráció: nincs; szövegátalakítás: nagybetűs; átmenet: minden 0,3 s könnyű; ) A főmenü elkészült, és megkezdheti az almenük és almenük leírását.
A CSS/HTML legördülő menü leírása
Megnyitjuk az index.html-t és hozzáadunk például egy további menüt a termékekhez. Az LI listák közé beszúrjuk az UL -t, ebben öt listát helyezünk el, amelyekben a herf=”#” attribútumú hivatkozások lesznek.
ul>li*5>a
Kattintson az Alkalmaz gombra, írja be az elemek nevét ( Ruházat, Elektronika, Élelmiszer, Eszközök, Élet. kémia ).
ruházat
Elektronika
Étel
Eszközök
Gen. kémia
Ezután megnyitjuk a style.css-t, és leírjuk az almenü stílusait.
Válassza ki a második listát, és adja meg a pozícióját: abszolút; , állítsa a minimális szélességet 150 képpontra.
/*almenü*/ .dws-menu li ul( pozíció: abszolút; min-szélesség: 150 képpont; )
Írjuk a listákba 1 csúcs határát.
Dws-menu li > ul li(szegély: 1px szilárd #c7c8ca; )
Az almenü hivatkozásainál állítsa a kitöltést 10 képpontra, távolítsa el a szövegátalakítást, és tegye a hátteret néhány árnyalattal sötétebb hátteret: #e4e4e5; .
Dws-menu li > ul li a( kitöltés: 10px; szövegátalakítás: nincs; háttér: #e4e4e5; )
Ezután létrehozunk egy másik beágyazott menüt. Menjünk a jelölőfájlhoz, és például az "Elektronikában" analógia útján alakítjuk ki a menüt, ahogy korábban is tettük. Írja le a bekezdések címsorait ( Fényképezőgépek, számítógépek, telefonok ) és mentse el.
Elektronika
kamerák
Számítógépek
Telefonok
Megjelennek, de rejtve a főmenü alatt, most pozíció: abszolút; beágyazott UL, és tolja el 150 csúccsal. oldalra:
Dws-menu li > ul li ul(pozíció: abszolút; jobbra: -150px; felül: 0; )
/*almenü*/ .dws-menu li ul( pozíció: abszolút; min-szélesség: 150 képpont; kijelző: nincs; ) Megjelenésükhöz pedig kijelöljük a listákat, és megjelenítjük a display segítségével: blokk; .
dws-menu li:hover > ul( display: block; )
Most hozzáadhatja réteges menük csak egyszerűen másolja az UL blokkot, módosítsa a záradékait.
ruházat
Elektronika
kamerák
Számítógépek
Telefonok
Étel
Eszközök
Gen. kémia
Szolgáltatás 1
2. szolgáltatás
Szolgáltatás 3
Ezután díszítsük a gombokat az utolsó lépések hozzávalójával. CSS generátort használok, több előre beállítottam van, létrehozhat sajátot, az én esetemben csak másolom adott kódot és helyezze a helyére a hátteret, amit korábban írtam.
.dws-menu > ul li a( display: block;
/* Permalink – a színátmenet szerkesztéséhez és megosztásához használja: http://colorzilla.com/gradient-editor/#c9c9c9+0,f6f6f6+2,c4c5c7+98,757577+100;Egyéni+3 */ háttér: #c9c9c9 ; /* Régi böngészők */ háttér: -moz-linear-gradient(top, #c9c9c9 0%, #f6f6f6 2%, #c4c5c7 98%, #757577 100%); /* FF3.6-15 */ háttér: -webkit-linear-gradient(top, #c9c9c9 0%,#f6f6f6 2%,#c4c5c7 98%,#757577 100%); /* Chrome10-25,Safari5.1-6 */ háttér: lineáris gradiens(lefelé, #c9c9c9 0%,#f6f6f6 2%,#c4c5c7 98%,#757577 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ szűrő: progid:DXImageTransform.Microsoft.gradient(startColorstr="#c9c9c9", endColorstr="#757577",GradientType=0); /* IE6-9 */
padding: 15px 30px 15px 40px; betűméret: 14 képpont; szín: #454547; szöveg-dekoráció: nincs; text-transform:nagybetűs; átmenet: minden 0,3 s könnyű; ) .dws-menu li a:hover( /* Permalink – a színátmenet szerkesztéséhez és megosztásához használja: http://colorzilla.com/gradient-editor/#e0e1e5+0.454547+2.454547+98,e0e1e5+100 */ háttér: #e0e1e5; /* Régi böngészők */ háttér: -moz-linear-gradient(top, #e0e1e5 0%, #454547 2%, #454547 98%, #e0e1e5 100%); /* FF3.6-15 */ háttér: -webkit-linear-gradient(top, #e0e1e5 0%,#454547 2%,#454547 98%,#e0e1e5 100%); /* Chrome10-25,Safari5.1-6 */ háttér: linear-gradient(lefelé, #e0e1e5 0%,#454547 2%,#454547 98%,#e0e1e5 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ szűrő: progid:DXImageTransform.Microsoft.gradient(startColorstr="#e0e1e5", endColorstr="#e0e1e5",GradientType=0); /* IE6-9 */
szín: #ffffff; box-shadow: 1px 5px 10px -5px fekete; átmenet: minden 0,3 s könnyű; )
Ha szükséges ezt a menüt az oldalon meg tudod alakítani a hozzád illő stílust, elég egyszerű színt generálni és lecserélni a kódban. Az eredmény egy egyszerű és egyben szép vízszintes menü tiszta CSS-sel.
Ebben a bejegyzésben egy fix oldalsó információs menüt készítünk. Az ikonok megvalósításához csatlakoztatjuk a betűtípust.
1. lépés Csatlakoztassa a betűtípust ikonokkal, hozzon létre egy üres dokumentumot
A FontAwesome betűtípussal való munkavégzésről részletes információkat, valamint magára a projektre mutató linket találhat bejegyzésemben -.
Íme a csatlakoztatott fájlokat tartalmazó oldal kódja:
Fix oldalmenü
2. lépés: A Fix menü HTML-jelölésének hozzáadása
Íme a rögzített menü jelölőkódja:
Ahogy észrevetted, felhelyeztem a címkét - ez egy html5 jelölőelem, ha html4-et használ, ezt a címkét lecserélheti egy normálra vagy távolítsa el teljesen, és helyezze át az azonosítót a listába, így:
