Açılır Kapanır Menüler!!

HTML, CSS, JavaScript ile ilgili genel konular.

Açılır Kapanır Menüler!!

İleti FaTaLDeMoN 21.05.2006, 10:22

Böyle bir başlık vardı ama tam verim alınamamıştı.. Ben kendimce entegre ettim.. Umarım yardımcı olabilirm bu olayı yapmak isteyenlere..


templates/*temanız*/overall_header.tpl yi açın..

</head> bulun.. öncesine aşağıdaki kodu yapıştırın..

Kod: Tümünü seç
<script type="text/javascript">

// CSS Top Menu- By JavaScriptKit.com (http://www.javascriptkit.com)
// Adopted from SuckerFish menu
// For this and over 400+ free scripts, visit JavaScript Kit- http://www.javascriptkit.com/
// Please keep this credit intact

startMenu = function() {
if (document.all&&document.getElementById) {
cssmenu = document.getElementById("csstopmenu");
for (i=0; i<cssmenu.childNodes.length; i++) {
node = cssmenu.childNodes[i];
if (node.nodeName=="LI") {
node.onmouseover=function() {
this.className+=" over";
}
node.onmouseout=function(){                 
this.className=this.className.replace(" over", "")
}
}
}
}
}

if (window.attachEvent)
window.attachEvent("onload", startMenu)
else
window.onload=startMenu;

</script>


templates/*temanız*/*temanız.css yi açın.. en aşağıya gelin ve aşağıdaki kodu yapıştırın..

Kod: Tümünü seç
#csstopmenu, #csstopmenu ul{
padding: 0;
margin: 0;
list-style: none;
}

#csstopmenu li{
float: left;
position: relative;
}

#csstopmenu a{
text-decoration: none;
}

.mainitems{
border-left:0px solid black; border-right:1px solid black; border-top:1px solid black; border-bottom:1px solid black; background-color: #D8FE89
}

.headerlinks a{
margin: auto 8px;
font-weight: bold;
color: black;
}

.submenus{
display: none;
width: 10em;
position: absolute;
top: 1.2em;
left: 0;
background-color: #EEFFCC;
border: 1px solid black;
}

.submenus li{
width: 100%;
}

.submenus li a{
display: block;
width: 100%;
text-indent: 3px;
}

html>body .submenus li a{ /* non IE browsers */
width: auto;
}

.submenus li a:hover{
background-color: yellow;
color: black;
}

#csstopmenu li>ul {/* non IE browsers */
top: auto;
left: auto;
}

#csstopmenu li:hover ul, li.over ul {
display: block;
}

html>body #clearmenu{ /* non IE browsers */
height: 3px;
}





son olarak templates/*temanız*/index_body.tpl yi açın..

en başa aşağıdaki kodu ekleyin..

Kod: Tümünü seç
<BODY>
<ul id="csstopmenu">

<li class="mainitems" style="border-left-width: 1px">
<div class="headerlinks"><a href="http://www.javascriptkit.com">JavaScript Kit</a></div>
<ul class="submenus">
<li><a href="http://javascriptkit.com/">Home</a></li>
<li><a href="http://javascriptkit.com/cutpastejava.shtml">Free JavaScripts</a></li>
<li><a href="http://javascriptkit.com/javaindex.shtml">JavaScript tutorials</a></li>
<li><a href="http://javascriptkit.com/jsref/index.shtml">JavaScript Reference</a></li>
</ul>
</li>

<li class="mainitems">
<div class="headerlinks"><a href="http://www.javascriptkit.com">2nd Menu Item</a></div>
<ul class="submenus" style="width: 14em">
<li><a href="">Sub 2 Item 1.</a></li>
<li><a href="">Sub 2 Item 2</a></li>
<li><a href="">Sub 2 Item 3.</a></li>
</ul>
</li>

<li class="mainitems">
<div class="headerlinks"><a href="http://www.javascriptkit.com">3rd Menu Item</a></div>
<ul class="submenus">
<li><a href="">Sub 3 Item 1</a></li>
<li><a href="">Sub 3 Item 1</a></li>
<li><a href="">Sub 3 Item 1</a></li>
<li><a href="">Sub 3 Item 1</a></li>
</ul>
</li>

</ul>

<div id="clearmenu" style="clear: left"></div>


</BODY>

FaTaLDeMoN
Üye
Üye
 
İleti: 19
Kayıt: 12.03.2006, 13:14

İleti tankaya61 07.07.2006, 20:00

bunun gibi başka menuler varmı
alternatif arıyorum da
Kullanıcı avatarı
tankaya61
Üye
Üye
 
İleti: 233
Kayıt: 22.01.2006, 14:57

İleti MatrixNeo 08.07.2006, 10:07

+ ya basınca açılan - ye basınca kapanan ve dikey şekilde olan menü varsa onlar daha ii :) mümkünse onlardan alabilir miyiz? (cookie destekli olursa ii olur).
ALEXIS: imza silindi
Kullanıcı avatarı
MatrixNeo
Üye
Üye
 
İleti: 654
Kayıt: 10.01.2006, 10:19
Konum: İstanbul

İleti Sema 13.07.2006, 18:35

MatrixNeo yazdı:+ ya basınca açılan - ye basınca kapanan ve dikey şekilde olan menü varsa onlar daha ii :) mümkünse onlardan alabilir miyiz? (cookie destekli olursa ii olur).


Bende arıyorum onları
...
Kullanıcı avatarı
Sema
Üye
Üye
 
İleti: 21
Kayıt: 09.06.2006, 10:35
Konum: İstanbul

İleti tankaya61 13.07.2006, 19:43

iyide neyi arıyorsunuz :)
bu yayınlanalı haftalar oldu :D ;)

http://www.canver.net/canderdeki-java-menu-vt10131.html
Kullanıcı avatarı
tankaya61
Üye
Üye
 
İleti: 233
Kayıt: 22.01.2006, 14:57

İleti MatrixNeo 15.07.2006, 10:16

o başka kardeşim. dedikya +(artı) ya basınca açılan -(eksi) ya basınca kapanan diye.
ALEXIS: imza silindi
Kullanıcı avatarı
MatrixNeo
Üye
Üye
 
İleti: 654
Kayıt: 10.01.2006, 10:19
Konum: İstanbul

İleti tankaya61 15.07.2006, 14:03

MatrixNeo şimdilik elımızde tıklayınca açılan tıklayınca kapanan var :(
Kullanıcı avatarı
tankaya61
Üye
Üye
 
İleti: 233
Kayıt: 22.01.2006, 14:57

İleti MatrixNeo 15.07.2006, 14:34

şimdilik idare ediyom zaten :)
ALEXIS: imza silindi
Kullanıcı avatarı
MatrixNeo
Üye
Üye
 
İleti: 654
Kayıt: 10.01.2006, 10:19
Konum: İstanbul

İleti h_era_ce 08.09.2006, 06:04

firefox da neden bozuk çıkıyor bu menü? ie 6 da sorun yok ama
h_era_ce
Üye
Üye
 
İleti: 71
Kayıt: 21.12.2005, 16:49


HTML, CSS, JS



Kimler çevrimiçi

Bu forumu görüntüleyenler: Kayıtlı kullanıcı yok ve 0 misafir

cron