2014. szeptember 22., hétfő

Különleges menü kód - Elena O'Connor

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&amp;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