Top subiecte apreciate

Optiuni experimentale
  • Foloseste AJAX in formulare ori de cate ori este posibil

Navigare rapidă

Ultimele subiecte
» Legenda s-a intors XD
Scris de EDGE Ieri la 20:42
» salut
Scris de Andrei34 Dum 18 Sept - 18:53
» Salut
Scris de Andrei34 Dum 18 Sept - 18:52
» Wireless ipb theme [punBB]
Scris de cristii571 Lun 12 Sept - 14:34
Cuvinte-cheie

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

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?
Administrator
la data de Vin 18 Noi - 13:34
Zeus Administrator
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)