Neko

Demó látható a fejléc környékén.

Ez a menüstílus egy fejléces menü. Az értékeket a kódban kell beállítani. Minden menüpontnak külön értéket kell állítani elhelyezkedésre is és a CSS kódban is a kinézeteket. Lépcsőzetes formát is beállíthatsz neki

Csak illeszd be a kódot egyszerű modulod forráskód nézetébe, írd át az értékeket és a színeket, ha ez neked nem felel meg. A menücímeket és a menülinkeket is írd át. Okézd le és kész is

<DIV style="LEFT: 10px; POSITION: absolute; TOP: 100px;">
<a class="navigation" href="//aranymeli.gportal.hu/" > <navi> Főoldal </navi> <br> <subtitle> Home </subtitle> </a></DIV>
<DIV style="LEFT: 122px; POSITION: absolute; TOP: 100px;">
<a class="navigation1" href="//aranymeli.gportal.hu/gindex.php?pg=24588232"> <navi> Site </navi> <br> <subtitle> Oldal </subtitle> </a></DIV>
<DIV style="LEFT: 234px; POSITION: absolute; TOP: 100px;">
<a class="navigation2" href="//aranymeli.gportal.hu/gindex.php?pg=19322271"> <navi> Graphics </navi> <br> <subtitle> Grafikák </subtitle> </a></DIV>
<DIV style="LEFT: 346px; POSITION: absolute; TOP: 100px;">
<a class="navigation3" href="//aranymeli.gportal.hu/gindex.php?pg=20199690"> <navi> Segítség </navi> <br> <subtitle> Leírások </subtitle> </a> </DIV>
<DIV style="LEFT: 458px; POSITION: absolute; TOP: 100px;">
<a class="navigation4" href="//aranymeli.gportal.hu/gindex.php?pg=18012139"> <navi> Scripts </navi> <br> <subtitle> Kódok </subtitle> </a></DIV>
<DIV style="LEFT: 570px; POSITION: absolute; TOP: 100px;">
<a class="navigation5" href="//aranymeli.gportal.hu/belepes"> <navi> Belépés </navi> <br> <subtitle> Regisztráció </subtitle> </a></DIV>
<DIV style="LEFT: 682px; POSITION: absolute; TOP: 100px;">
<a class="navigation6" href="http://users2.smartgb.com/g/g.php?a=s&i=g24-02933-45"> <navi> Vendégkönyv </navi> <br> <subtitle> Ide írj nekem </subtitle> </a></DIV>
<DIV style="LEFT: 794px; POSITION: absolute; TOP: 100px;">
<a class="navigation7" href="//aranymeli.gportal.hu/gindex.php?pg=12241863"> <navi> Hirdetőkönyv </navi> <br> <subtitle> Itt hirdess </subtitle> </a> </DIV>

<style type="text/css">
navi {
   font-weight: normal;
   font-family: "Century Gothic";
   font-size: 15px;
   letter-spacing: 0px;
   text-shadow: 1px 1px 1px #9A9A9A;
}
subtitle {
   font-weight: normal;
   font-family: "Century Gothic";
   font-size: 13px;
   color: #9a9a9a;
   letter-spacing: 0px;
   text-shadow: 1px 1px 1px #ffffff;
}
A.navigation:link, A.navigation:visited {
    display: block;
    text-align: center;
    background-color: #e8e8e8;
    padding-top: 4px;
    padding-bottom: 4px;
    padding-left: 0px;
    border-top: 4px solid #000000;
    margin-bottom: 0px;
    margin-top: 4px;
    line-height: 18px;
    width: 110px;
    height: 40px;
    color: #000000;
    text-decoration: none;
}

A.navigation:hover, A.navigation:active {
   display: block;
   color: #959595;
   text-align: center;
   background-color: #e0e0e0;
   padding-top: 4px;
   padding-bottom: 4px;
   padding-left: 0px;
   border-top: 4px solid #959595;
   margin-bottom: 0px;
   margin-top: 4px;
   line-height: 18px;
   width: 110px;
   height: 40px;
   text-decoration: none;
}
 
/* 2. menüpont */

A.navigation1:link, A.navigation1:visited {
   display: block;
   color: #A35168;
   text-align: center;
   background-color: #e8e8e8;
   padding-top: 4px;
   padding-bottom: 4px;
   padding-left: 0px;
   border-top: 4px solid #A35168;
   margin-bottom: 0px;
   margin-top: 4px;
   line-height: 18px;
   width: 110px;
   height: 40px;
   text-decoration: none;
}

A.navigation1:hover, A.navigation1:active {
   display: block;
   color: #959595;
   text-align: center;
   background-color: #e0e0e0;
   padding-top: 4px;
   padding-bottom: 4px;
   padding-left: 0px;
   border-top: 4px solid #959595;
   margin-bottom: 0px;
   margin-top: 4px;
   line-height: 18px;
   width: 110px;
   height: 40px;
   text-decoration: none;
}
   
/* 3. menüpont */

A.navigation2:link, A.navigation2:visited {
   display: block;
   color: #078DAF;
   text-align: center;
   background-color: #e8e8e8;
   padding-top: 4px;
   padding-bottom: 4px;
   padding-left: 0px;
   border-top: 4px solid #078DAF;
   border-bottom: 0px solid #ddb7c3;
   border-right: 0px solid #ddb7c3;
   border-left: 0px solid #ddb7c3;
   margin-bottom: 0px;
   margin-top: 4px;
   line-height: 18px;
   width: 110px;
   height: 40px;
   text-decoration: none; }

A.navigation2:hover, A.navigation2:active {
   display: block;
   color: #959595;
   text-align: center;
   background-color: #e0e0e0;
   padding-top: 4px;
   padding-bottom: 4px;
   padding-left: 0px;
   border-top: 4px solid #959595;
   margin-bottom: 0px;
   margin-top: 4px;
   line-height: 18px;
   width: 110px;
   height: 40px;
   text-decoration: none; }
   
/* 4. menüpont */

A.navigation3:link, A.navigation3:visited {
   display: block;
   color: #C5751D;
   text-align: center;
   background-color: #e8e8e8;
   padding-top: 4px;
   padding-bottom: 4px;
   padding-left: 0px;
   border-top: 4px solid #C5751D;
   border-bottom: 0px solid #ddb7c3;
   border-right: 0px solid #ddb7c3;
   border-left: 0px solid #ddb7c3;
   margin-bottom: 0px;
   margin-top: 4px;
   line-height: 18px;
   width: 110px;
   height: 40px;
   text-decoration: none; }

A.navigation3:hover, A.navigation3:active {
   display: block;
   color: #959595;
   text-align: center;
   background-color: #e0e0e0;
   padding-top: 4px;
   padding-bottom: 4px;
   padding-left: 0px;
   border-top: 4px solid #959595;
   margin-bottom: 0px;
   margin-top: 4px;
   line-height: 18px;
   width: 110px;
   height: 40px;
   text-decoration: none; }
   
 /* 5. menüpont */

A.navigation4:link, A.navigation4:visited {
   display: block;
   color: #4213CE;
   text-align: center;
   background-color: #e8e8e8;
   padding-top: 4px;
   padding-bottom: 4px;
   padding-left: 0px;
   border-top: 4px solid #4213CE;
   border-bottom: 0px solid #ddb7c3;
   border-right: 0px solid #ddb7c3;
   border-left: 0px solid #ddb7c3;
   margin-bottom: 0px;
   margin-top: 4px;
   line-height: 18px;
   width: 110px;
   height: 40px;
   text-decoration: none; }

A.navigation4:hover, A.navigation4:active {
   display: block;
   color: #959595;
   text-align: center;
   background-color: #e0e0e0;
   padding-top: 4px;
   padding-bottom: 4px;
   padding-left: 0px;
   border-top: 4px solid #959595;
   margin-bottom: 0px;
   margin-top: 4px;
   line-height: 18px;
   width: 110px;
   height: 40px;
   text-decoration: none; }
   
/* 6. menüpont */

A.navigation5:link, A.navigation5:visited {
   display: block;
   color: #CE009A;
   text-align: center;
   background-color: #e8e8e8;
   padding-top: 4px;
   padding-bottom: 4px;
   padding-left: 0px;
   border-top: 4px solid #CE009A;
   border-bottom: 0px solid #ddb7c3;
   border-right: 0px solid #ddb7c3;
   border-left: 0px solid #ddb7c3;
   margin-bottom: 0px;
   margin-top: 4px;
   line-height: 18px;
   width: 110px;
   height: 40px;
   text-decoration: none; }

A.navigation5:hover, A.navigation5:active {
   display: block;
   color: #959595;
   text-align: center;
   background-color: #e0e0e0;
   padding-top: 4px;
   padding-bottom: 4px;
   padding-left: 0px;
   border-top: 4px solid #959595;
   margin-bottom: 0px;
   margin-top: 4px;
   line-height: 18px;
   width: 110px;
   height: 40px;
   text-decoration: none; }
 
/* 7. menüpont */

A.navigation6:link, A.navigation6:visited {
   display: block;
   color: #1CE0E0;
   text-align: center;
   background-color: #e8e8e8;
   padding-top: 4px;
   padding-bottom: 4px;
   padding-left: 0px;
   border-top: 4px solid #1CE0E0;
   border-bottom: 0px solid #ddb7c3;
   border-right: 0px solid #ddb7c3;
   border-left: 0px solid #ddb7c3;
   margin-bottom: 0px;
   margin-top: 4px;
   line-height: 18px;
   width: 110px;
   height: 40px;
   text-decoration: none; }

A.navigation6:hover, A.navigation6:active {
   display: block;
   color: #959595;
   text-align: center;
   background-color: #e0e0e0;
   padding-top: 4px;
   padding-bottom: 4px;
   padding-left: 0px;
   border-top: 4px solid #959595;
   margin-bottom: 0px;
   margin-top: 4px;
   line-height: 18px;
   width: 110px;
   height: 40px;
   text-decoration: none; }
   
/* 8. menüpont */

A.navigation7:link, A.navigation7:visited {
   display: block;
   color: #C93236;
   text-align: center;
   background-color: #e8e8e8;
   padding-top: 4px;
   padding-bottom: 4px;
   padding-left: 0px;
   border-top: 4px solid #C93236;
   border-bottom: 0px solid #ddb7c3;
   border-right: 0px solid #ddb7c3;
   border-left: 0px solid #ddb7c3;
   margin-bottom: 0px;
   margin-top: 4px;
   line-height: 18px;
   width: 110px;
   height: 40px;
   text-decoration: none; }

A.navigation7:hover, A.navigation7:active {
   display: block;
   color: #959595;
   text-align: center;
   background-color: #e0e0e0;
   padding-top: 4px;
   padding-bottom: 4px;
   padding-left: 0px;
   border-top: 4px solid #959595;
   margin-bottom: 0px;
   margin-top: 4px;
   line-height: 18px;
   width: 110px;
   height: 40px;
   text-decoration: none; }

< /style >