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 785 megtekintés