|
Legördülő menü 1.
Demó
Kattints a címekre, hogy a menü lenyíljon!
Csak illeszd be a kódokat, írd át a CSS kódot, a címeket és a linkeket és már használhatod is :)
Javascript kód
<script type="text/javascript" src="//aranymeli.gportal.hu/portal/aranymeli/upload/285733_1336752721_08127.js"></script><script type="text/javascript" src="//aranymeli.gportal.hu/portal/aranymeli/upload/285733_1336752437_08070.js">
</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>
CSS kód
<style type="text/css">
.arrowlistmenu{ /* menü szélessége */
width: 200px;
}
.arrowlistmenu .menuheader{ /* menü fejléce */
color: white;
margin-bottom: 2px;
text-transform: none;
cursor: default;
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 14px;
font-weight: bold;
background-attachment: fixed;
background-color: #CEBBA3;
background-repeat: repeat;
padding-top: 4px;
padding-right: 0;
padding-bottom: 4px;
padding-left: 10px;
text-align: center;
}
.arrowlistmenu .openheader{ /* aktív menü fejléce */
background-color: #C4AC8E;
}
.arrowlistmenu ul{
list-style-type: none;
margin: 0;
padding: 0;
}
.arrowlistmenu ul li{
padding-bottom: 2px;
}
.arrowlistmenu ul li a{ /* lenyíló menüben a linkek */
color: #A70303;
display: block;
padding: 2px 0;
padding-left: 19px;
text-decoration: none;
font-size: 12px;
font-family: Georgia, "Times New Roman", Times, serif;
background-image: url(http://www.mooncandy.org/stef/material/arrowp3.gif);
background-repeat: no-repeat;
background-position: left center;
border-bottom-width: 0px;
border-bottom-style: solid;
border-bottom-color: #dadada;
}
.arrowlistmenu ul li a:visited, a:hover{ /* lenyíló menüben a linkek, ha ráviszed az egeret */
color: #A70303;
background-color: #E9DABE;
}</style>
Menü kód
<div class="arrowlistmenu">
<h3 class="menuheader expandable">
Graphics</h3>
<ul class="categoryitems">
<li>
<a href="//aranymeli.gportal.hu/gindex.php?pg=31853544">Brush-ok</a></li>
<li>
<a href="//aranymeli.gportal.hu/gindex.php?pg=31853545">Hátterek</a></li>
<li>
<a href="//aranymeli.gportal.hu/gindex.php?pg=33039074">Egyedi modulstílusok</a></li>
<li>
<a href="//aranymeli.gportal.hu/gindex.php?pg=33127082">PNG-k</a></li>
<li>
<a href="//aranymeli.gportal.hu/gindex.php?pg=33001379">Textúrák</a></li>
<li>
<a href="//aranymeli.gportal.hu/gindex.php?pg=33033283">PSD-k</a></li>
<li>
<a href="//aranymeli.gportal.hu/gindex.php?pg=31853545">Pattern-ek</a></li>
<li>
<a href="//aranymeli.gportal.hu/gindex.php?pg=19322271">Minden más</a></li>
</ul>
<h3 class="menuheader expandable">
GP-s segítségek</h3>
<ul class="categoryitems">
<li>
<a href="//aranymeli.gportal.hu/gindex.php?pg=18836890">CSS kód leírások</a></li>
<li>
<a href="//aranymeli.gportal.hu/gindex.php?pg=31065444">Futó üzenőfal</a></li>
<li>
<a href="//aranymeli.gportal.hu/gindex.php?pg=20540035">Coppermine Galéria</a></li>
<li>
<a href="//aranymeli.gportal.hu/gindex.php?pg=30882859">CuteNews</a></li>
<li>
<a href="//aranymeli.gportal.hu/gindex.php?pg=34913736">SPGM Pictures Galéria</a></li>
<li>
<a href="//aranymeli.gportal.hu/gindex.php?pg=20594514">Facebook</a></li>
</ul>
<h3 class="menuheader expandable">
JavaScript-ek</h3>
<ul class="categoryitems">
<li>
<a href="//aranymeli.gportal.hu/gindex.php?pg=23173045">Csillogó fejléc</a></li>
<li>
<a href="//gportal.hu/gindex.php?pg=20875204">Szövegdobozok</a></li>
<li>
<a href="//aranymeli.gportal.hu/gindex.php?pg=22993476">Képeffektek</a></li>
<li>
<a href="//gportal.hu/gindex.php?pg=20875860">Linkeffektek</a></li>
<li>
<a href="//aranymeli.gportal.hu/gindex.php?pg=22993446">Menüstílusok</a></li>
</ul>
<h3 class="menuheader expandable">
Az oldal</h3>
<ul class="categoryitems">
<li>
<a href="http://users2.smartgb.com/g/g.php?a=s&i=g24-02933-45">Vendégkönyv</a></li>
<li>
<a href="//aranymeli.gportal.hu/gindex.php?pg=12241863">Itt hirdess!</a></li>
<li>
<a href="//aranymeli.gportal.hu/gindex.php?pg=12162135">Regisztráció</a></li>
<li>
<a href="//gportal.hu/gindex.php?pg=18623097">Versenyek</a></li>
<li>
<a href="//gportal.hu/gindex.php?pg=24195877">Képeskönyv</a></li>
</ul>
</div>
Forrás: http://www.dynamicdrive.com/dynamicindex17/ddaccordionmenu-bullet.htm
|
AJÁNLOM AZ OLDALT
Súgó
Frissítés