Navigare rapidă

Ultimele subiecte
» Bulletin ipb theme
Scris de Iustin Vin 17 Feb - 14:49
» Sliding Menu Bar V5
Scris de RAKSONE Mier 15 Feb - 1:13
» Cereri intrare in staff[Deschise]
Scris de Madross Sam 11 Feb - 21:11
» Cum iti creezi propriul joc online
Scris de xTeRm0 Sam 11 Feb - 14:47
» Informatii Primul Post [IPB Animate]
Scris de bablil Sam 11 Feb - 0:22
Cuvinte-cheie

subforumuri  Bara  phpBB2  menu  navigare  reclama  drop  radio  ultimele  Mesaje  tema  chenar  subiecte  banner  tutorial  punbb  avatar  cautare  legenda  animate  Statistici  edit  profil  Metin2  meniu  html  

Meniu de Navigare Acordeon


Urmatorul script va genera un meniu de navigare stil acordeon.
Cod:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>

<script type="text/javascript" src="http://sankez.bravehost.com/Javascript/ddaccordion.js">

/***********************************************
* Script modificat si redecorat de (c) Extrem Tutorials(www.extrem-tutorials.com) - Author: BODO
* Accordion Content script- (c) Dynamic Drive DHTML code library (www.dynamicdrive.com)
* Visit http://www.dynamicDrive.com for hundreds of DHTML scripts
* This notice must stay intact for legal use
***********************************************/

</script>


<script type="text/javascript">


ddaccordion.init({
   headerclass: "expandable", //Shared CSS class name of headers group that are expandable
   contentclass: "categoryitems", //Shared CSS class name of contents group
   revealtype: "click", //Reveal content when user clicks or onmouseover the header? Valid value: "click", "clickgo", or "mouseover"
   mouseoverdelay: 200, //if revealtype="mouseover", set delay in milliseconds before header expands onMouseover
   collapseprev: true, //Collapse previous content (so only one open at any time)? true/false
   defaultexpanded: [0], //index of content(s) open by default [index1, index2, etc]. [] denotes no content
   onemustopen: false, //Specify whether at least one header should be open always (so never all headers closed)
   animatedefault: false, //Should contents open by default be animated into view?
   persiststate: true, //persist state of opened contents within browser session?
   toggleclass: ["", "openheader"], //Two CSS classes to be applied to the header when it's collapsed and expanded, respectively ["class1", "class2"]
   togglehtml: ["prefix", "", ""], //Additional HTML added to the header when it's collapsed and expanded, respectively  ["position", "html1", "html2"] (see docs)
   animatespeed: "fast", //speed of animation: integer in milliseconds (ie: 200), or keywords "fast", "normal", or "slow"
   oninit:function(headers, expandedindices){ //custom code to run when headers have initalized
      //do nothing
   },
   onopenclose:function(header, index, state, isuseractivated){ //custom code to run whenever a header is opened or closed
      //do nothing
   }
})


</script>

<style type="text/css">

.arrowlistmenu{
width: 180px; /*width of accordion menu*/
}

.arrowlistmenu .menuheader{ /*CSS class for menu headers in general (expanding or not!)*/
font: bold 14px Trebuchet MS;
color: white;
background: black url(http://www.dynamicdrive.com/dynamicindex17/titlebar.png) repeat-x center left;
        -moz-border-radius: 3px;
        -webkit-border-radius: 3px;
        border-radius: 3px;
margin-bottom: 0px; /*bottom spacing between header and rest of content*/
text-transform: uppercase;
padding: 4px 0 4px 6px; /*header text is indented 10px*/
cursor: hand;
cursor: pointer;
}

.arrowlistmenu .openheader{ /*CSS class to apply to expandable header when it's expanded*/
background-image: url(http://www.dynamicdrive.com/dynamicindex17/titlebar-active.png);
        -moz-border-radius: 3px;
        -webkit-border-radius: 3px;
        border-radius: 3px;
}

.arrowlistmenu ul{ /*CSS for UL of each sub menu*/
list-style-type: none;
margin: 0;
padding: 0;
margin-bottom: 8px; /*bottom spacing between each UL and rest of content*/
}

.arrowlistmenu ul li{
padding-bottom: 2px; /*bottom spacing between menu items*/
}

.arrowlistmenu ul li a{
color: #A70303;
background: url(http://img28.imageshack.us/img28/2640/bulletgo.png) no-repeat center left; /*custom bullet list image*/
display: block;
padding: 2px 0;
padding-left: 19px; /*link text is indented 19px*/
text-decoration: none;
font-weight: bold;
font-family:Trebuchet MS;
border-bottom: 1px solid #dadada;
font-size: 12px;
}

.arrowlistmenu ul li a:visited{
color: #A70303;
}

.arrowlistmenu ul li a:hover{ /*hover state CSS*/
color: #A70303;
background-color: #DADADA;
        -moz-border-radius: 3px;
        -webkit-border-radius: 3px;
        border-radius: 3px;
}

</style>
<div class="arrowlistmenu">
<center><b><font size="4px" face="Trebuchet MS">Navigare Rapida</b></font></center>

<h3 class="menuheader expandable">Extrem Tutorials</h3>
<ul class="categoryitems">
<li><a href="/forum.htm">Forum</a></li>
<li><a href="/portal.htm">Portal</a></li>
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
<li><a href="#">Link 3</a></li>
<li><a href="#">Link 4</a></li>
<li><a href="#">Link 5</a></li>
</ul>

<h3 class="menuheader expandable">Categoria 2</h3>
<ul class="categoryitems">
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
<li><a href="#">Link 3</a></li>
<li><a href="#">Link 4</a></li>
<li><a href="#">Link 5</a></li>
<li><a href="#">Link 6</a></li>
</ul>

<h3 class="menuheader expandable">Categoria 3</h3>
<ul class="categoryitems">
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
<li><a href="#">Link 3</a></li>
<li><a href="#">Link 4</a></li>
<li><a href="#">Link 5</a></li>
</ul>
</div>

Comentariile utilizatorilor
Membru ET
la data de Vin 18 Noi - 7:54
Smash. Membru ET
Conectat
Il pun in JS?
Admin & Dezvoltator
la data de Vin 18 Noi - 13:34
Zeus Admin & Dezvoltator
Conectat
Unde vrei tu.
Membru activ
la data de Vin 18 Noi - 14:04
iAngel Membru activ
Conectat
deci,se pune intr-un widget,nu?
Membru ET
la data de Vin 18 Noi - 20:32
Mykey Membru ET
Conectat
Domnule , ady00ady! Acest cod se baga in ''JAVASCRIPT'' !
Membru dedicat
la data de Sam 19 Noi - 14:36
Keir Membru dedicat
Conectat
Mykey, vă avertizăm că folosirea modului de scriere italic sau a altor opţiuni bbcode, înafară de cele destinate folosirii de către utilizatori, sunt interzise!(1xMustrare)