#2 Kód - Menü (2db)

Heyhó Habcsókok!
Most egy menü kóddal érkeztem, melyet csak ajánlani tudok. Nem bonyolult, sőt, nem vesz sok időt igénybe, ezért mással is tudtok foglalkozni.
De nem is húzom tovább az időt, kétféle képpen fogom kirakni a kódot, amit a CSS-be kell beilleszteni.



Kör alakú

HTML/JavaScript- ba írd be ezt:

<a class='menu' href=http://google.com>Link 1</a>
<a class='menu' href=http://google.com>Link 2</a>
<a class='menu' href=http://google.com>Link 3</a>
<a class='menu' href=http://google.com>Link 4</a>

CSS-be írd be ezt:
#HTML1 {
width: 80px;
position: fixed;
top: 80px;
right: 50px;
}

a.menu:link, a.menu:active, a.menu:visited {
width: 85px;
height: 50px;
border-radius: 50%;
padding-top: 35px;
display: inline-block;
background: #ddd;
text-align: center;
text-transform: uppercase;
font-family: arial;
font-size: 12px;
margin: 5px 0px 0px 5px;
-webkit-transition-duration: .50s;
-moz-transition-duration: .50s;
}

a.menu:hover {
background: #000;
color: #fff;
text-decoration: none !important;
-webkit-transition-duration: .50s;

}


Négyzet alakú

HTML/JavaScript- ba írd be ezt:

<a class='menu' href=http://google.com>Link 1</a>
<a class='menu' href=http://google.com>Link 2</a>
<a class='menu' href=http://google.com>Link 3</a>
<a class='menu' href=http://google.com>Link 4</a>

CSS-be írd ezt:
#HTML1 {
width: 80px;
position: fixed;
top: 80px;
right: 50px;
}

a.menu:link, a.menu:active, a.menu:visited {
width: 85px;
height: 50px;
padding-top: 35px;
display: inline-block;
background: #ddd;
text-align: center;
text-transform: uppercase;
font-family: arial;
font-size: 12px;
margin: 5px 0px 0px 5px;
-webkit-transition-duration: .50s;
-moz-transition-duration: .50s;
}

a.menu:hover {
background: #000;
color: #fff;
text-decoration: none !important;
-webkit-transition-duration: .50s;
}

Ennyi lett volna, remélem tudtam segíteni, ha valami kérdésetek van, kérlek kommentben jelezzétek nekem.

Forrás: Robyn Gleams