Açılır Menü

14-02-2009, 19:28:37

Arkadaşlar ekte gördüğünüz sitenin menüsünü drop-down menü yapmak istiyoruz ama menü aynı kalacak sadece üzerine gelince alt menüler açılacak ama bir türlü ayarlıyamadık bakın
menünün kodları bunlar

<div class="menu"><div id="slidemenu" class="slidetabsmenu"><ul><li><a href="<?php echo get_settings('home'); ?>" title="Home"><span>Ana Sayfa</span></a></li><li><a href="http://www.kafemax.com/?cat=6" title="CSS Library" rel="dropmenu1_c"><span>Müzik</span></a></li><li><a href="http://www.kafemax.com/?cat=7" title="New" rel="dropmenu2_c"><span>Sinema</span></a></li><li><a href="http://www.kafemax.com/?cat=8" title="CSS Library" rel="dropmenu1_c"><span>Oyun</span></a></li><li><a href="http://www.kafemax.com/?cat=9" title="Useful Tools"><span>Blog</span></a></li><li><a href="http://www.kafemax.com/?cat=10" title="CSS Library" rel="dropmenu1_c"><span>Köşe Yazıları</span></a></li><li></ul></div><br style="clear: left;" /><br class="IEonlybr" /><!--1st drop down menu -->                                                   <div id="dropmenu1_c" class="dropmenudiv_c"><a href="http://www.dynamicdrive.com/style/csslibrary/category/C1/">Horizontal CSS Menus</a><a href="http://www.dynamicdrive.com/style/csslibrary/category/C2/">Vertical CSS Menus</a></div><!--2nd drop down menu -->
                                   <div id="dropmenu2_c" class="dropmenudiv_c" style="width: 150px;"><a href="http://www.cssdrive.com">CSS Drive</a></div><script type="text/javascript">//SYNTAX: tabdropdown.init("menu_id", [integer OR "auto"])tabdropdown.init("slidemenu")</script></body>        </div> <!-- menu -->          <div class="rss">        <ul>        <li><a href="<?php bloginfo('rss2_url'); ?>">Yazılar</a></li>        <li><a href="<?php bloginfo('comments_rss2_url'); ?>">Yorumlar</a> </li>       </ul>        </div><!-- rss -->     </div><!-- nav_l -->              <div id="subscribe">   <form id="search" method="get" action="<?php bloginfo('home'); ?>/" ><input type="text" onfocus="this.value=''" value="Site içi arama.." size="25" class="s" name="s"/>

eklemek istediğimiz drop-down olayının kodlarıda bunlar

<script type="text/javascript" src="chromejs/chrome.js">
/***********************************************
* Chrome CSS Drop Down Menu- (c) Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for full source code
***********************************************/
</script>
</head>
<body>
<div class="chromestyle" id="chromemenu">
<ul>
<li><a href="http://www.dynamicdrive.com">Home</a></li>
<li><a href="#" rel="dropmenu1">Resources</a></li>
<li><a href="#" rel="dropmenu2">News</a></li>
<li><a href="#" rel="dropmenu3">Search</a></li>	
</ul>
</div>
<!--1st drop down menu -->                                                   
<div id="dropmenu1" class="dropmenudiv">
<a href="http://www.dynamicdrive.com/">Dynamic Drive</a>
<a href="http://www.cssdrive.com">CSS Drive</a>
<a href="http://www.javascriptkit.com">JavaScript Kit</a>
<a href="http://www.codingforums.com">Coding Forums</a>
<a href="http://www.javascriptkit.com/jsref/">JavaScript Reference</a>
</div>
<!--2nd drop down menu -->                                                
<div id="dropmenu2" class="dropmenudiv" style="width: 150px;">
<a href="http://www.cnn.com/">CNN</a>
<a href="http://www.msnbc.com">MSNBC</a>
<a href="http://news.bbc.co.uk">BBC News</a>
</div>
<!--3rd drop down menu -->                                                   
<div id="dropmenu3" class="dropmenudiv" style="width: 150px;">
<a href="http://www.google.com/">Google</a>
<a href="http://www.yahoo.com">Yahoo</a>
<a href="http://www.msn.com">MSN</a>
</div>
<script type="text/javascript">
cssdropdown.startchrome("chromemenu")
</script>

Nasıl yapabiliriz ?

15-02-2009, 00:57:23

plaketkupa

Doğru html kodu bu

<html>
<head>
<title>Yeni Sayfa 1</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" type="text/css" href="chrometheme/chromestyle.css" />

<script type="text/javascript" src="chromejs/chrome.js">

</script>

</head>

<body>



<div class="chromestyle" id="chromemenu">
<ul>
<li><a href="http://www.dynamicdrive.com">Home</a></li>
<li><a href="#" rel="dropmenu1">Resources</a></li>
<li><a href="#" rel="dropmenu2">News</a></li>
<li><a href="#" rel="dropmenu3">Search</a></li>	
</ul>
</div>

<!--1st drop down menu -->                                                   
<div id="dropmenu1" class="dropmenudiv">
<a href="http://www.dynamicdrive.com/">Dynamic Drive</a>
<a href="http://www.cssdrive.com">CSS Drive</a>
<a href="http://www.javascriptkit.com">JavaScript Kit</a>
<a href="http://www.codingforums.com">Coding Forums</a>
<a href="http://www.javascriptkit.com/jsref/">JavaScript Reference</a>
</div>


<!--2nd drop down menu -->                                                
<div id="dropmenu2" class="dropmenudiv" style="width: 150px;">
<a href="http://www.cnn.com/">CNN</a>
<a href="http://www.msnbc.com">MSNBC</a>
<a href="http://news.bbc.co.uk">BBC News</a>
</div>

<!--3rd drop down menu -->                                                   
<div id="dropmenu3" class="dropmenudiv" style="width: 150px;">
<a href="http://www.google.com/">Google</a>
<a href="http://www.yahoo.com">Yahoo</a>
<a href="http://www.msn.com">MSN</a>
</div>


<script type="text/javascript">

cssdropdown.startchrome("chromemenu")

</script>



</body>

</html>

15-02-2009, 01:14:11

plaketkupa

Çok özür dilerim yanlış sayfayı pasteledim sana aynı menüyü .css ile düzenleyerek gönderiyorum.notepadı açarak aşağıdaki css kodunu kopyalayıp yapıştır ve ismini stil.css yap

bu .css kodu :

body{
	margin:0;
	padding:0;
}
ul#menu, ul#menu ul{
  padding: 0;
  margin: 0;
  list-style: none;
  }
  
ul#menu li {
	float: left;
	position: relative;
	width: 150px;
}

ul#menu li ul {
	display: none;
	position: absolute; 
	top: 19px; /* yukseklik 15px + sonradan eklenecek paddingler 4px toplam 19px */ 
	left: 0;
}

ul#menu li > ul {
top: auto;
left: auto;
}

ul#menu li a { 
font: bold 11px arial, helvetica, sans-serif;
display: block;
border-width: 1px;
border-style: solid;
border-color: #ccc #888 #555 #bbb;
margin: 0;
padding: 2px 3px;
color: #000;
background: #efefef;
text-decoration: none;
}

ul#menu li a:hover {
color: #a00;
background: #fff;
}

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

Buda HTML kodu : bunuda kullanacağın sayfalardaki ilgili bölümlere yapıştır.

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-9">
<link rel="stylesheet" type="text/css" href="stil.css">
<script type="text/javascript">
startList = function() {
if (document.all&&document.getElementById) {
navRoot = document.getElementById("menu");
for (i=0; i<navRoot.childNodes.length; i++) {
node = navRoot.childNodes[i];
if (node.nodeName=="LI") {
node.onmouseover=function() {
this.className+=" over";
  }
  node.onmouseout=function() {
  this.className=this.className.replace(" over", "");
   }
   }
  }
 }
}
window.onload=startList;

</script>
</head>
<body>
<ul id="menu">
<li><a href="#">Anasayfa</a></li>
<li><a href="#">Haberler</a>
<ul>
<li><a href="#">Şirket Haberleri </a></li> 
<li><a href="#">Yurt içi Haberleri </a></li>
<li><a href="#">Yurt dışı Haberleri</a></li>
</ul>
</li> 
<li><a href="#">Ürünler</a> 
<ul> <li><a href="#">Tencere</a></li> 
<li><a href="#">Tava</a></li> 
<li><a href="#">Ütü</a></li> 
<li><a href="#">Tost Makinesi </a></li> 
<li><a href="#">El Süpürgesi </a></li> 
</ul>
</li> 
</ul> 
</body></html>