Sziasztok :)
Most nem fejléccel, nem is más design dologgal jöttem, hanem - mint a címből is láthattátok - egy különleges HTML(pontosabban menü) kóddal. Nem is rizsálok tovább, íme a cucc...
1. lépés
Szépen megnyitjuk a "Stílusalap(CSS) hozzáadása" ablakot - remélem, mindenki tudja, mire gondolok.
Beillesztjük oda ezt:
#menu {
width: 198px !important;
height: 90px !important;
background: #DCCFE3;
}
#menu-m {
position: relative;
width: 190px;
height: 90px;
background: #EFEDF2;
margin-top: -83px;
-moz-transition:1s;
-webkit-transition:1s;
border-left: groove 6px #EDE3EB;
border-right: solid 2px white;
line-height: 70pt;
text-align: center;
text-transform: uppercase;
letter-spacing: 2px;
font-family: dosis;
color: #C9A4CC;
}
#menu:hover #menu-m {
width: 0px;
-moz-transition:1s;
-webkit-transition:1s;
color: transparent;
}
#menu a {
display: inline-block !important;
background: #C9A4CC;
padding: 1px 0px;
margin-bottom: 2px;
width: 90px;
color: #eee;
text-align: center;
text-decoration: none;
margin-left: 3px;
font-family: verdana;
text-transform: uppercase;
letter-spacing: 2px;
font-size: 6pt;
margin-top: -5px;
height: 13px;
}
.strony {
margin-left: 8px;
padding-top: 7px;
line-height: 9pt;
}
.strony a{
-moz-transition:1s;
-webkit-transition:1s;
}
.strony a:hover {
background: #eee !important;
color: #333 !important;
border-radius: 10px;
-moz-transition:1s;
-webkit-transition:1s;
text-decoration: none;
}
2. lépés
Most egy egyszerű HTML/JS dobozkát nyitunk meg, oda pedig ezt másoljuk be:
<div id="menu"><div class="strony"><a href="http://google.com/">Oldal 1</a><a href="http://google.com/">Oldal 2</a><a href="http://google.com/">Oldal 3</a><a href="http://google.com/">Oldal 4</a><a href="http://google.com/">Oldal 5</a><a href="http://google.com/">Oldal 6</a><a href="http://google.com/">Oldal 7</a><a href="http://google.com/">Oldal 8</a></div><div id="menu-m">Menu</div><br /></div>
<link href='http://fonts.googleapis.com/css?family=Dosis&subset=latin,latin-ext' rel='stylesheet' type='text/css' />
<link href='http://fonts.googleapis.com/css?family=Dosis&subset=latin,latin-ext' rel='stylesheet' type='text/css' />
TÁDÁÁÁ, készen is vagyunk:) ERRE a linkre kattintva megtudjátok nézni, milyen, mikor készen van.
(Remélem, mondanom sem kell, hogy a színeket meg lehet változtatni, méghozzá a CSS kódban)
REMÉLEM, TUDTAM SEGÍTENI,
Elena O'Connor
VOLTAM, VAGYOK, LESZEK.
Nincsenek megjegyzések:
Megjegyzés küldése