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.

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
  • Etiketler;
Abdullah Tekin
PHP, Ajax ve JQuery'e son derece hakim bir programcı olarak bazı firma ve kuruluşlara aşağıdaki konular dahilinde freelance olarak hizmet veriyor: - Daima web standartlarını, SEO (Arama Motoru Optimizasyonu) ve güvenlik önlemlerini içeren projeler gerçekleştirmek, - Tasarımı yapılmış web sitelerini kusursuz bir şekilde web'e uyarlamak, - Özgün ve kodları kendisi tarafından yazılabilen PHP+Jquery+Ajax destekli modüller hazırlamak - Web stratejileri oluşturulması, - Web dahilinde sistemler kurmak, - Kontrol panelleri hazırlamak, - Hızlı, kullanılabilir, erişilir ve güvenliği üst düzeyde olabilecek web siteleri alt yapısını oluşturmak. İçerik Yönetim Sistemi (CMS), Haber Sistemi, E-Ticaret ve Okul Yönetim projelerini içine alan PHP konusundaki birikimlerini burada Sanalkurs.net üyelerine aktarıyor ve aynı zamanda Sanalkurs'un yazılım altyapısını şu an en üst düzeye taşımak için gece gündüz kodlarla boğuşuyor.
Yorum Yaz

Yorum yazabilmek için üye girişi yapmanız gerekiyor!

Hocam güzel bir çalığşma fakat bide bunun online olarak katagori eklemek veya çıkarmanın nasıl yapıldığınız anlatan bir ders hazırlarsanız çok memnun olurum.
Hocam süper bir çalışma.. Tam aradığım bir menü ama benim sitemde menünün yukardan açılması gerekiyor. Bu menü yukardan açılmaya uyarlanabiliyor mu acaba ? Teşekkür ederim..
güzel pay.
şu sanal kursun menüsünü nasıl yaptınız bi de onu anlatsanız
konuyla alakalı degilde bunu dreamwearda nasıl yapacaz papup aclır menüile yapıyorum fakat üstüne gelince renk degiştirmesini istiyorum
Hocam CSS kodlarinin head tagi icerisine hapsedilmesi gerektigini biliyorum. Ama Java Script kodlari icin belli bir yer kurali var mi? Bir de arkadaslardan birinin de belirttigi gibi ayni calismanin asagiya dogru kayarak acilan menuler ile yapilmis calismanizi bekliyorum. Emeginize sonsuz tesekkurler..
:tşkr
Tebrikler gerçekten çok güzel..
sanal kursun menüsü Flash la yapılmış...

Yukarı Git