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(Háttér(kép) URL-je); /* 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(ugyanaz másodszorra)">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>
Nincsenek megjegyzések:
Megjegyzés küldése