CSS ile sınırsız kategorili menü

CSS modasına bizde uyup bir menü yapıyoruz. Özellikle programcıların E-Ticaret uygulamalarında kullanabilecekleri hoş bir döküman.

Uygulama 3 bölümden oluşuyor.
1- CSS,
2- HTML,
3- Javascript

Not Defterinde boş bir sayfa açıyoruz ve aşağıdaki kodları sırası ile yapıştırıyoruz. Daha sonra dosyamızın uzantısını html olacak şekilde herhangi bir isim vererek kaydediyoruz ve browserda çalıştırarak testimizi gerçekleştiriyoruz.

1- CSS



<style type="text/css">





.suckerdiv ul{


    margin: 0;


    padding: 0;


    list-style-type: none;


    width: 160px; 


    border-bottom: 1px solid #ccc;


}


    


.suckerdiv ul li{


    position: relative;


}


    


.suckerdiv ul li ul{


    position: absolute;


    width: 170px; 


    top: 0;


    visibility: hidden;


}








.suckerdiv ul li a{


    display: block;


    overflow: auto; 


    color: black;


    text-decoration: none;


    background: #fff;


    padding: 1px 5px;


    border: 1px solid #ccc;


    border-bottom: 0;


}





.suckerdiv ul li a:visited{


    color: black;


}





.suckerdiv ul li a:hover{


    background-color: yellow;


}





.suckerdiv .subfolderstyle{


    background: url(media/arrow-list.gif) no-repeat center right;


}





* html .suckerdiv ul li { float: left; height: 1%; }


* html .suckerdiv ul li a { height: 1%; }





</style>

2- Javascript



<script type="text/javascript">


var menuids=["suckertree1"] 


function buildsubmenus(){


for (var z=0; z<menuids.length; z++){


  var ultags=document.getElementById(menuids[z]).getElementsByTagName("ul")


    for (var t=0; t<ultags.length; t++){


    ultags[t].parentNode.getElementsByTagName("a")[0].className="subfolderstyle"


        if (ultags[t].parentNode.parentNode.id==menuids[z]) //if this is a first level submenu


            ultags[t].style.left=ultags[t].parentNode.offsetWidth+"px" //dynamically position first level submenus to be width of main 


        else //else if this is a sub level submenu (ul)


          ultags[t].style.left=ultags[t-1].getElementsByTagName("a")[0].offsetWidth+"px" //position menu to the right of menu item that activated it


    ultags[t].parentNode.onmouseover=function(){


    this.getElementsByTagName("ul")[0].style.display="block"


    }


    ultags[t].parentNode.onmouseout=function(){


    this.getElementsByTagName("ul")[0].style.display="none"


    }


    }


        for (var t=ultags.length-1; t>-1; t--){ //loop through all sub menus again, and use "display:none" to hide menus (to prevent possible page scrollbars


        ultags[t].style.visibility="visible"


        ultags[t].style.display="none"


        }


  }


}


if (window.addEventListener)


window.addEventListener("load", buildsubmenus, false)


else if (window.attachEvent)


window.attachEvent("onload", buildsubmenus)


</script>

3- HTML



<div class="suckerdiv">


<ul id="suckertree1">


<li><a href="#">Item 1</a></li>


<li><a href="#">Item 2</a></li>


<li><a href="#">Folder 1</a>


  <ul>


  <li><a href="#">Sub Item 1.1</a></li>


  <li><a href="#">Sub Item 1.2</a></li>


  </ul>


</li>


<li><a href="#">Item 3</a></li>





<li><a href="#">Folder 2</a>


  <ul>


  <li><a href="#">Sub Item 2.1</a></li>


  <li><a href="#">Folder 2.1</a>


    <ul>


    <li><a href="#">Sub Item 2.1.1</a></li>


    <li><a href="#">Sub Item 2.1.2</a></li>


    <li><a href="#">Sub Item 2.1.3</a></li>


    <li><a href="#">Sub Item 2.1.4</a>


    <ul>


        <li><a href="#">Sub Item 2.1.1</a></li>


    <li><a href="#">Sub Item 2.1.2</a></li>


    <li><a href="#">Sub Item 2.1.3</a>


    <ul>


            <li><a href="#">Sub Item 2.1.1</a></li>


    <li><a href="#">Sub Item 2.1.2</a></li>


    </ul>


    </li>


    </ul>


    </li>


    </ul>


  </li>


</ul>


</li>


<li><a href="#">Item 4</a></li>


</ul>


</div>

Örnek dosyayı indirmek için TIKLAYIN

Kolay Gelsin

"CSS ile sınırsız kategorili menü" dersi için 7 yorum var

ye olmadan yorum ekleyemezsiniz !