Betöltés ...
Javascript kód
Töltsd le a .js fájlt innen, majd töltsd fel a saját tárhelyedre és a kódban cseréld le az URL címét.
<script src="/js/fuggoleges-menu-09.js"></script>
Menü kódja
A / (per jel) helyére kell írnod a menü hivatkozását
<ul class="glossymenu" id="verticalmenu">
<li>
<a href="/">Főmenü 1.</a>
</li>
<li>
<a href="/">Főmenü 2.</a>
</li>
<li>
<a href="/">Főmenü 3.</a>
</li>
<li>
<a href="/">Főmenü 4.</a><ul>
<li>
<a href="/">Almenü 1.</a>
</li>
<li>
<a href="/">Almenü 2.</a>
</li>
<li>
<a href="/">Almenü 3.</a>
</li>
</ul>
</li>
<li>
<a href="/">Főmenü 5.</a>
</li>
<li>
<a href="/">Főmenü 6.</a>
</li>
<li>
<a href="/">Főmenü 7.</a>
<ul>
<li>
<a href="/">Almenü 4.</a>
</li>
<li>
<a href="/">Almenü 5.</a>
</li>
<li>
<a href="/">Almenü 6.</a>
</li>
</ul>
</li>
</ul>
CSS kód
<style type="text/css">
.glossymenu, .glossymenu li ul{ /* a menü szélessége, kerete legyen-e, stb. */
list-style-type: none;
margin: 0;
padding: 0;
width: 150px;
border: 0px solid black;
}
.glossymenu li{
position: relative;
}
.glossymenu li a{ /* a menü link színe, stílusa, stb */
color: #f2f2f2;
background-color: #612C61;
display: block;
width: auto;
padding: 6px;
text-decoration: none;
font-family: Tahoma;
font-size: 12px;
font-weight: bold;
border-bottom: 3px solid #F6F6F6;
}
.glossymenu li a:hover{ /* a menü, ha ráviszed az egeret */
color: #612C61;
background-color: #E2D8D8;
}
.glossymenu li ul{
position: absolute;
width: 150px;
left: 0;
top: 0;
display: none;
}
.glossymenu li ul li{
float: left;
}
.glossymenu li ul a{ /* az oldalsó menü link színe */
width: 150px;
color: #f2f2f2;
}
.glossymenu .arrowdiv{ /* főmenünél az almenü jelölése */
position: absolute;
right: 6px;
background-color: #000000;
}
/* Holly Hack for IE */
* html .glossymenu li {
float: left;
height: 1%;
}
* html .glossymenu li a {
height: 1%;
}</style>
2 298 megtekintés