Menü kódja
<div id="dolphincontainer">
<div id="dolphinnav">
<ul>
<li>
<a href="/" rel="home"><span>Főoldal</span></a>
</li>
<li>
<a href="/" rel="grafika"><span>Grafika</span></a>
</li>
<li>
<a href="/" rel="kodok"><span>Kódok</span></a>
</li>
<li>
<a href="/" rel="tutorial"><span>Tutorial</span></a>
</li>
<li>
<a href="/" rel="css"><span>CSS</span></a>
</li>
</ul>
</div>
Szövegsáv kódja
<div id="dolphin_inner">
<div class="innercontent" id="home" style="display: none;">
Ide jöhet szöveg.
</div>
<div class="innercontent" id="grafika" style="display: none;">
Kellékek a design készítéshez.
</div>
<div class="innercontent" id="kodok" style="display: none;">
Script-ek a honlapodra
</div>
<div class="innercontent" id="tutorial" style="display: none;">
Képszerkesztő leírások
</div>
<div class="innercontent" id="css" style="display: none;">
CSS témák G-Portálra
</div>
</div>
</div>
Javascript kód
<script type="text/javascript" src="/js/vizszintes-menu-07-01.js"></script>
<script type="text/javascript">//dolphintabs.init("ID_OF_TAB_MENU_ITSELF", SELECTED_INDEX)
dolphintabs.init("dolphinnav", 1)</script>
CSS kód
<style type="text/css">
#dolphincontainer{ /* alsó sáv kinézete */
position:relative;
background-color: #000000;
width:100%;
font-family:tahoma;
}
#dolphinnav{ /* menüsor */
position:relative;
height:40px;
font-size:14px;
text-transform:uppercase;
font-weight:bold;
background-color: #2e7fad;
padding:5px;
}
#dolphinnav ul{
margin:0;
padding:0;
list-style-type:none;
width:auto;
float:left;
}
#dolphinnav ul li{
display:block;
float:left;
margin:0 1px;
}
#dolphinnav ul li a{
display:block;
float:left;
color:#f2f2f2;
text-decoration:none;
padding: 0 0 0 20px;
height:40px;
}
#dolphinnav ul li a span{
padding:12px 20px 0 0;
float:left;
}
#dolphinnav ul li a:hover{
color:#fff;
background-color:#000000;
}
#dolphinnav ul li a:hover span{
display:block;
width:auto;
cursor:pointer;
}
#dolphinnav ul li a.current,#dolphinnav ul li a.current:hover{
color:#fff;
background-color:#1D6893;
line-height:275%;
}
#dolphinnav ul li a.current span{
display:block;
padding:0 20px 0 0;
width:auto;
background-color:#1D6893;
height:33px;
}
#dolphin_inner{
color:white;
padding: 5px 0 10px 10px;
font-size: 11px;
height: 1em;
}
#dolphin_inner a:link, #dolphin_inner a:visited, #dolphin_inner a:active{
color: white;
}
#dolphin_inner a:hover{
color: yellow;
}
.innercontent{
display: none;
}
--></style>
2 973 megtekintés