Top subiecte apreciate

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

Navigare rapidă

Ultimele subiecte
» Ipb Counter-strike Special FG
Scris de DenisPasca Ieri la 22:52
» Special Theme Extrem Tutorials
Scris de cosminelu21 Vin 2 Dec - 23:48
» Script ninsoare
Scris de JeKa123 Vin 2 Dec - 20:20
» Cerere script
Scris de SSYT Joi 1 Dec - 23:22
» Hello
Scris de admin Mier 30 Noi - 16:10
Cuvinte-cheie

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

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)