Menükódok (9)

#1


Forrás

kód

<center>
<div class="noscript" id="cssmenu">
<a href="LINK">NÉV</a> <a
href="LINK">NÉV</a> <a
href="LINK">NÉV</a> <a
href="LINK">NÉV</a> <a
href="LINK"
target="_blank">NÉV</a></div>
<style type="text/css">
#cssmenu a {
font-family: Betűtípus;
display: block;
clear: both;width: Menü szélessége;
font-size: Betű mérete;
line-height: 30px;
padding: 0 10px 0 20px;
color: Betű színe;
text-decoration: none;
margin: 0.5em;
background: Menü háttere;
-moz-box-shadow: 2px 2px 2px Doboz árnyéka;
-webkit-box-shadow: 2px 2px 2px Doboz árnyéka;
box-shadow: 2px 2px 2px Keret árnyéka;
-moz-border-radius: Keret;
-webkit-border-radius: Keret;
border-radius: Keret;
text-shadow: 1px 1px 1px Szöveg árnyéka;
}
#cssmenu a:hover {
color: Betű színe ha ráviszed az egeret;}
#cssmenu.noscript a:hover {
background: háttér, ha ráviszed az egeret;}
</style>
</center>

#2


Forrás

kód

#navigation {
margin: 0;
padding: 0;
list-style-type: none;
list-style-image: none;
list-style: none;
}
#navigation li {
margin-bottom: 2px;
}
#navigation a {
background: #D8DAD3;
color: #2a2b2b;
display: block;
width: 180px;
border-left: 5px solid #596573;
border-radius:6px;
padding-left: 10px;
padding-bottom: 5px;
padding-top: 5px;
}
#navigation a:hover {
background: #808080;
color: #ffffff;
text-decoration: none;
border-left: 5px solid #000000;
}

Itt a linkelt menüd hátterének színét adhatod meg.
Ez itt nem más mint a linkeld menüd feliratának színe.
Itt adhatod meg a háttér külön színű darabjának színét és vastagságát.
Itt azt adhatod meg, hogy milyen színű legyen a háttér, amikor ráviszed az egeret.
Itt pedig a betű színét ha ráviszed az egeret.
Miután ezzel végeztél katt az Alkalmazás a bloggeren gombra, és lépj vissza a szekresztőfelületedre. Itt menj be oda ahol az oldalsó moduljaidat szoktad szerkesztgetni. (Elrendezés) Nyiss egy új html/javascript modult, és illeszd be ezt a kódot.

#3


Forrás

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>

#4

Forrás

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>

#5


Forrás

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>

#6


Forrás

kód

<div class="menu"> <ul>
<li>
<a href="Link">Cím</a></li>
<li>
<a href="Link">Cím</a></li>
<li>
<a href="Link">Cím</a></li> /*ezt annyiszor másold be, ahány menüpontot szeretnél*/
</ul>
</div>
<style type="text/css">
.circlemenu{
width: 100%;
overflow:hidden;
}

.menu ul{
margin: 0;
padding: 0;
font: bold 14px Verdana;
list-style-type: none;
text-align: center;
}

.menu li{
display: inline;
margin: 0;
}

.menu li a{
display:inline-block;
text-align:center;
text-decoration: none;
color: #fff;
background-color: #C58FAA; /*háttérszín*/
text-shadow: 1px 1px 1px #000; /*szövegszín*/
margin: 0;
margin-right:2px;
width:70px;
height:20px;
border-radius: 400px;
-moz-border-radius: 400px;
-webkit-border-radius: 400px;
}

.menu a span{
position:relative;
top:40%;
}

.menu li a:visited{
color: #000;
}

.menu a:hover{
background:#9257AF;
text-shadow: 1px 1px 3px #000;
}</style>

#7


Forrás

kód

<div class="underlinemenu">
<ul>
<li><a href="Link">Cím</a></li>
<li><a href="Link" target="_blank">Cím</a></li>
<li><a href="Link">Cím</a></li>
<li><a href="Link">Cím</a></li>
<li><a href="Link">Cím</a></li>
<li><a href="Link" target="_blank">Cím</a></li>
</ul>
</div>
<p><style type="text/css">
.underlinemenu{
font-weight: bold;
width: 100%;
}
.underlinemenu ul{
padding: 6px 0 7px 0;
margin: 0;
text-align: center;
}
.underlinemenu ul li{
display: inline;
}
.underlinemenu ul li a{
color: #494949;
padding: 6px 3px 4px 3px;
margin-right: 20px;
text-decoration: none;
border-bottom: 3px solid gray;
}
.underlinemenu ul li a:hover, .underlinemenu ul li a.selected{
border-bottom-color: black;
color: #000000;
}
</style></p>

 #8

Ez a kód Cher Brookstól származik:

<a href="#" class="button" onclick="javascript:showElement('v-menu')"> <span>Kattints a menühöz!</span> </a></p>
<ul id="v-menu" class="v-menu" style="display: none;">
<li><a href="link helye">Főoldal</a></li>
<li><a href="link helye">Szereplők</a></li>
<li><a href="link helye">Jelentkeztem</a></li>
<li><a href="link helye">Dare to dream</a></li>
<li><a href="link helye">Fejezetek</a></li>

#9

 

 És az utolsó, szintén Cher Brookstól:

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

<a href="link helye">FŐOLDAL</a>

<a href="llink helye">FEJEZETEK</a>

<a href="link helye">DÍJAK</a>

<a href="link helye">SZEREPLŐK</a>

<a href="link helye" target="_blank">DARE TO DREAM</a></div>
<style type="text/css">
#cssmenu a {
font-family: Gunny Rewritten; /* betűtípus */
display: block;
clear: both;
width: 250px; /* menü szélessége */
font-size: 13px; /* betű mérete */
line-height: 30px;
padding: 0 10px 0 20px;
color: #F43989; /* betű színe */
text-decoration: none;
margin: 0.5em;
background: url(link helye); /* menü háttere */
-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; /* keret */
-webkit-border-radius: 0 9px 0 9px; /* keret */
border-radius: 0 9px 0 9px; /* keret */
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 */
background: url(a háttérkép linkjének helye);} </style>
</center>