2014. február 26., szerda

Legördülő menü

Sziasztok! Lehet látni, hogy új designja van az oldalnak. Remélem tetszik nektek. 
Bejelenteném a blog új korszakot kezd. Egyedi html kódok lesznek és több segítség is.
Emellett új szerkesztőt / szerkesztőket várok az oldalra. Az előző bejegyzésben leírtam, hogy lehet jelentkezni! :)







<script type="text/javascript" 
src="http://aranymeli.gportal.hu/portal/aranymeli/upload/285733_1336752721_08127.js"></script><script type="text/javascript" src="http://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="http://aranymeli.gportal.hu/gindex.php?pg=31853544">Brush-ok</a></li>
        <li>
            <a href="http://aranymeli.gportal.hu/gindex.php?pg=31853545">Hátterek</a></li>
        <li>
            <a href="http://aranymeli.gportal.hu/gindex.php?pg=33039074">Egyedi modulstílusok</a></li>
        <li>
            <a href="http://aranymeli.gportal.hu/gindex.php?pg=33127082">PNG-k</a></li>
        <li>
            <a href="http://aranymeli.gportal.hu/gindex.php?pg=33001379">Textúrák</a></li>
        <li>
            <a href="http://aranymeli.gportal.hu/gindex.php?pg=33033283">PSD-k</a></li>
        <li>
            <a href="http://aranymeli.gportal.hu/gindex.php?pg=31853545">Pattern-ek</a></li>
        <li>
            <a href="http://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="http://aranymeli.gportal.hu/gindex.php?pg=18836890">CSS kód leírások</a></li>
        <li>
            <a href="http://aranymeli.gportal.hu/gindex.php?pg=31065444">Futó üzenőfal</a></li>
        <li>
            <a href="http://aranymeli.gportal.hu/gindex.php?pg=20540035">Coppermine Galéria</a></li>
        <li>
            <a href="http://aranymeli.gportal.hu/gindex.php?pg=30882859">CuteNews</a></li>
        <li>
            <a href="http://aranymeli.gportal.hu/gindex.php?pg=34913736">SPGM Pictures Galéria</a></li>
        <li>
            <a href="http://aranymeli.gportal.hu/gindex.php?pg=20594514">Facebook</a></li>
    </ul>
    <h3 class="menuheader expandable">
        JavaScript-ek</h3>
    <ul class="categoryitems">
        <li>
            <a href="http://aranymeli.gportal.hu/gindex.php?pg=23173045">Csillogó fejléc</a></li>
        <li>
            <a href="http://www.gportal.hu/gindex.php?pg=20875204">Szövegdobozok</a></li>
        <li>
            <a href="http://aranymeli.gportal.hu/gindex.php?pg=22993476">Képeffektek</a></li>
        <li>
            <a href="http://www.gportal.hu/gindex.php?pg=20875860">Linkeffektek</a></li>
        <li>
            <a href="http://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&amp;i=g24-02933-45">Vendégkönyv</a></li>
        <li>
            <a href="http://aranymeli.gportal.hu/gindex.php?pg=12241863">Itt hirdess!</a></li>
        <li>
            <a href="http://aranymeli.gportal.hu/gindex.php?pg=12162135">Regisztráció</a></li>
        <li>
            <a href="http://gportal.hu/gindex.php?pg=18623097">Versenyek</a></li>
        <li>
            <a href="http://www.gportal.hu/gindex.php?pg=24195877">Képeskönyv</a></li>
    </ul>
</div>






Nincsenek megjegyzések:

Megjegyzés küldése