Navigare rapidă

Ultimele subiecte
» Un nou stil pentru categorii [BB3]
Scris de Meliss Sam 18 Noi - 12:34
» Summer v1.1 theme
Scris de eby Sam 18 Noi - 11:28
» Wireless ipb theme [punBB]
Scris de YutuLe Lun 6 Noi - 20:37
» Prezentare CHR
Scris de Zeus Vin 20 Oct - 22:13
Cuvinte-cheie

edit  

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
avatar
la data de Vin 18 Noi - 7:54
Smash. Membru ET
Conectat
Il pun in JS?
Administrator
avatar
la data de Vin 18 Noi - 13:34
Zeus Administrator
Conectat
Unde vrei tu.
Membru activ
avatar
la data de Vin 18 Noi - 14:04
iAngel Membru activ
Conectat
deci,se pune intr-un widget,nu?
Membru ET
avatar
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)