HTML §4. | Menü kódok

Sziasztok!

Megérkeztem a következő HTML kódos bejegyzésemmel! Főleg Nessa miatt, de gondolom másoknak is szükségük lehet rá, most menü kódokat hoztam nektek! A kódokat AranyMeli oldaláról szedtem! Mellékelek hozzájuk képet arról, hogy hogy néz ki, valamint pirossal kiemelem azokat a dolgokat, amiket megváltoztathattok benne! Igazából akár az egész kódot átírhatnátok, de akik nem mozognak otthon a html-ben, nekik azt ajánlom, hogy csak a pirossal kiemelteken variáljanak! :) Az egész kódot egy html modulba másoljátok be; ahol ott van hogy 'menü kód' vagy 'ccs kód' vastaggal kiemelve, azokat a szavakat töröljétek majd, különben bent marad! Remélem tudtam segíteni! Ha bármi kérdésetek van, írjatok nyugodtan! :)

xx, Diush

u.i.: Az alábbi linkre kattintva megtaláljátok a színkódokat! :) --> KATT

-------------------------------------------------------------------------------------------------------------

Függőleges menü 1.

Kód

 

<center>

<div class="noscript" id="cssmenu">

<a href="LINK1">CÍM1</a> /*ezt annyiszor másold be, ahány menüpontot szeretnél*/

</div>

<style type="text/css">

#cssmenu a  {

   font-family: Tahoma; /* betűtípus */

   display: block;

   clear: both;

   width: 200px; /* menü szélessége */

   font-size: 12px; /* betű mérete */

   line-height: 30px;

   padding: 0 10px 0 20px;

   color: #F43989; /* betű színe */

   text-decoration: none;

   margin: 0.5em;

   background: url(http://aranymeli.gportal.hu/portal/aranymeli/image/gallery/1270481519_06.gif); /* menü háttere - nem fontos beraknod képet*/

   -moz-box-shadow: 2px 2px 2px #B1B1B1; /* doboz árnyéka */

   -webkit-box-shadow: 2px 2px 2px #B1B1B1; /* doboz árnyéka */

   box-shadow: 2px 2px 2px #B1B1B1; /* keret árnyéka */

   -moz-border-radius: 0 9px 0 9px;

   -webkit-border-radius: 0 9px 0 9px;

   border-radius: 0 9px 0 9px;

   text-shadow: 1px 1px 1px #B1B1B1; /* szöveg árnyéka */

}

#cssmenu a:hover { /* betű színe, ha ráviszed az egeret */

   color: #000000;}

#cssmenu.noscript a:hover { /* háttér, ha ráviszed az egeret - nem fontos beraknod képet*/

   background: url(http://aranymeli.gportal.hu/portal/aranymeli/image/gallery/1261824073_45.gif);} </style>

</center>

 

 

Függőleges menü 2.

 

 

Kód

<div align="center">
<table width="100%">
    <tbody>
        <tr>
            <td align="center" class="tartalom">
<a href="LINK1" target="_top" class="link2">CÍM1</a>
/*ezt annyiszor másold be, ahány menüpontot szeretnél*/

  </td>
   </tr>
    </tbody>
</table>

<p><style type="text/css">
a.link2 {
   background-color:#f9efe5; /* háttérszín */
    border-bottom: 0px dotted #7E7E7E;
   letter-spacing: 1px;
   color: #79807F; /* betűszín */    

width:190px; /* szélesség */ 
height:12px; /* magasság */    

text-decoration: none;
   cursor:crosshair;
   font-weight:normal;
   font-size: 9px; /* betű nagyság */    

text-align:left;
   padding: 3px;
   margin:2px;
   display:block;}

a.link2:hover {
   background-color:#f9efe5; /* háttér, ha ráviszed az egeret */ 

     letter-spacing: 3px;
   color:#A24670; /* betűszín, ha ráviszed az egeret */    

width:190px; /* szélesség, ha ráviszed az egeret */    

height:12px; /* magasság, ha ráviszed az egeret */    

font-size: 9px;
   font-weight:normal;
   text-decoration: none;
   cursor:crosshair;
   text-align:right;
   margin:2px;
   padding: 3px;
   display:block;}
-->
</style>
</div>

 

Vízszintes menü 1.

 

 

Menü kód

<div align="center">
<div class="ribbon">
<a href="LINK1"><span>CÍM1</span></a> /*ezt annyiszor másold be, ahány menüpontot szeretnél*/
</div>
</div>

CSS kód

<style type="text/css">
.ribbon {
    display:inline-block;
        font-family: georgia; /* betűtípus */
        font-size: 14px; /* betű nagysága */
}

.ribbon:after, .ribbon:before {
    margin-top:0.5em;
    float:left;
        content: "";
        border:1.5em solid #52a8c8; /* keret színe */
}

.ribbon:after {
    border-right-color:transparent;
}

.ribbon:before {
    border-left-color:transparent;
}

.ribbon a:link, .ribbon a:visited {
    color:#ffffff; /* link színe */
    text-decoration:none;
    float:left;
    height:3.5em;
    overflow:hidden;
        font-family: georgia;
}

.ribbon span {
    background:#52a8c8; /* háttér */
    display:inline-block;
    line-height:3em;
    padding:0 1em;
    margin-top:0.5em;
    position:relative;

-webkit-transition:
        background-color 0.2s,
        margin-top 0.2s;  /* Saf3.2+, Chrome */
-moz-transition:
        background-color 0.2s,
        margin-top 0.2s;  /* FF4+ */
-ms-transition:
        background-color 0.2s,
        margin-top 0.2s;  /* IE10 */
-o-transition:
        background-color 0.2s,
        margin-top 0.2s;  /* Opera 10.5+ */
transition:
        background-color 0.2s,
        margin-top 0.2s;
}

.ribbon a:hover span {
    background:#FFD204; /* háttér, ha ráviszed az egeret */
    margin-top:0;
        font-family: georgia;
}

.ribbon span:before {
    content: "";
    position:absolute;
    top:3em;
    left:0;
    border-right:0.5em solid #000000; /* a jobb oldali szél színe */
    border-bottom:0.5em solid #fff; /* ennek a kerete */
}

.ribbon span:after {
    content: "";
    position:absolute;
    top:3em;
    right:0;
    border-left:0.5em solid #000000; /* a bal oldali szél színe */
    border-bottom:0.5em solid #fff; /* ennek a kerete */
}</style>