2014. március 13., csütörtök

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>
 
 

13 megjegyzés:

  1. WoW, hát nagyon nagyon köszönöm ^^ Már mióta szarakodtam, mert semmit nem tudott betenni és végre sikerült... tényleg nagyon köszönöm a segítséget, jól jött :) Már csak az lenne a kérdésem és bocsi, hogy az ilyen hülyeségekkel "zaklatlak" titeket, csak, hogy a legelső menünél.... a sorok közti helyet, azt melyikkel tudom megváltoztatni?

    Még egyszer nagyon köszönöm ^^
    Pussy Nessa xX

    VálaszTörlés
    Válaszok
    1. Nagy szívesen! :)
      Hm...a sorok közti távolságot azt hiszem (de nem 100%), hogy a "padding" sorral lehet állítani! Vagy esetleg, ha az nem működik, akkor próbáld meg a "margin" sort, ahol 0,5-ös érték van! De mindig jegyezd meg mit, hol és mennyiről állítottál át, mert ha esetleg átszerkeszted és szétesik az egész, ha jól visszaírod az eredetit, akkor jó lesz!
      Remélem tudtam segíteni! :)

      xx, Diush

      Törlés
    2. Nagyon sokat, köszönöm szépen ^^

      Törlés
  2. Hogy lehet az első menü ponton belül bejegyzést csinálni?

    VálaszTörlés
  3. Sziasztok! Elvittem az elsőt ha nem baj. Köszönöm! :)

    VálaszTörlés
  4. Sziasztok!

    Elvittem a második kódot :) Köszönöm! :D

    Love Ya,
    Mace

    VálaszTörlés
  5. Sziasztok! Nagyon köszönöm a második kódot! :-)

    VálaszTörlés
  6. és fel is iratkoztam! mert ez egy nagyon nagyon nagyon nagyon jó blog!

    VálaszTörlés
  7. Sziasztok!
    Vittem a második függőleges kódot, nagyon szépen köszönöm.
    Ölel,
    Flora

    VálaszTörlés
  8. Sziasztok!
    Nagyon sokat segített a bejegyzésetek a kódokról. Köszönöm szépen.
    Üdv.:
    Sasha

    VálaszTörlés