Css’de dikey menu yapımı

Merhaba arkadaşlar bu akşam tesadüfen öğrendiğim mootools yöntemini css le birleştirerek kaydırak biçiminde aşağıya doğru inen menuler yapacağız öncelikle mootools hakkında hiç bişi bilmediğim için dosyayı hazır indirdim daha doğrusu ne işe yaradığını biliyorum sadece kodlamayı bilmiyorum neyse devam edelim mootools u bilmeyenler için söyliyeyim gerçi bende çok iyi bilmiyorum ama çok ta önemli değil aslında aynen jQuery gibi bir takım uygulamaları yapmamıza olanak sağlayan oldukça güzel bir dildir aynı jQuery gibi dosyayı linkle bağlıyorsunuz.Bu kısmı anlattıktan sonra işimize bakalım asıl bizim için gerekli kısıma yani tasarım kısmına bakalım. Tabi ilk başta demo

Nav4J89L0a

Öncelikle şunu belirtmek istiyorum yapacağımız menu birbirinin altı olan birimlerden oluşuyor şayet eğer html yapısı hani hangi menu hangisinin altına eklenecek onu biliyorsanız sadece üstünde düzenleme yapın ama eğer şuradaki yazıyı okursanız ki ne demek istediğimi gayet iyi anlarsınız neyse alt birimleri aşağıdaki resimde de gösterelim isterseniz içimde kalmasın.

hiyerarsiYukarıdaki resim de de görüyorsunuz <li> ve <ul> ilişkisin o halde html mizi buna göre düzenliyoruz

1.Menuyu Göster gizle tarzında yapacağız.

Adım-1.1: HTML Kodumuz

Basit çe aşağıdaki gibi html kodlamamızı yapabiliriz javascript () şeklinde istediğimiz yerden menuyu aynı şekilde uygulatabiliriz tabi biz üst kısım kategorlere uyguladık siz isterseniz alt kısımlarada ekleyebilirsiniz

<a href=“#” class=“button” onclick=“javascript:showElement(‘v-menu’)”><span>Kategoriler</span>

</a>

<ul id=“v-menu” class=“v-menu” style=“display:none;>

<li><a href=“p1.html”>Teknoloji</a></li><li><a href=“p2.html”>Web</a></li>

<li><a href=“p3.html”>Css Galeri</a></li>

<li><a href=“p4.html”>internet</a></li>

<li><a href=“p5.html”>Egitim</a></li>

</ul>

1.Menuyu Göster gizle tarzında yapacağız.

Adım- 1.2: JavaScript fonksiyonu

Şimdi basit bir şekilde göster gizleden sonra ki javascript ile sayfa pozisyonunu ayarlıyalım.

<script type=“text/javascript”>function showElement(layer){

var myLayer = document.getElementById(layer);

if(myLayer.style.display==”none”){

myLayer.style.display=”block”;

myLayer.backgroundPosition=”top”;

} else {

myLayer.style.display=”none”;

}

}

</script>

2. Menu de Mootools ile Geçiş etkisi

Adım- 2.1: HTML Kodu

Bu seferde Mootools ile bağlantıladığımız kodun yardımı ile aşağıya doğru kayan menumuzu yani slide etkisini uyguladığımız menuyu düzenleyelim yukarıdaki menu gibi tek farkı buraya java script uygulamıyoruz.

<a href=“#” class=“button” id=“toggle”><span>Kategoriler</span></a>

<ul id=“v-menu” class=“v-menu” >

<li><a href=“p1.html”>Teknoloji</a></li>
<li><a href=“p2.html”>Web</a></li>
<li><a href=“p3.html”>Css Galeri</a></li>
<li><a href=“p4.html”>internet</a></li>
<li><a href=“p5.html”>Egitim</a></li>
</ul>



2. Menu de Mootools ile Geçiş etkisi

Adım-2.2: JavaScript/Mootools kodu

Şimdi ise mootools çervemize ekleyelim tabi bunu içinde mootools dosyasının bağlantısını yapmamız gerekecek aşağıdaki gibi css ve jquery bağlar gibi:

<script type=“text/javascript” src=“mootools.svn.js”></script>

… ..ve son olarakta mootools un etkisini göstermesi için sağlanan javascript kodumuzu yazıyoruz:

<script type=“text/javascript”>

window.addEvent(‘domready’, function(){

var myMenu= new Fx.Slide(‘v-menu2’);

myMenu.hide();

$(‘toggle’).addEvent(‘click’, function(e){

e = new Event(e);

myMenu.toggle();

e.stop();

});

});

</script>

Bir başka dersimizde görüşmek üzere

Yorum Yaz