Sınırsız kategori için CSS ile Recursive menü örneği lazım!

Kodla Büyü
Tarik_Turan

Tarik_Turan

Aktif Üye
Mesajlar
190
Merhaba arkadaşlar...
Yaptığım bir sitede aşağıdaki gösterdiğim gibi ana ve alt kategorilerden oluşan bir sınırsız kategori mantığıyla çalışan sayfalarım var...
Bunları css ile <ul><li> etiketleriyle açılır bir menüye koymaya çalışıyorum ama istediğim olmuyor. Aslında yapabiliyorum.Ama bir türlü alt kategorileri olan liste elemanında sağa doğru bir > ok işareti gösteremiyorum. Sonuçta alt kategorisi olanlar da hiç alt kategorisi olmayanlarla aynı görüntüye sahipler. Bunu engellemek için Css ile recursive menü örneklerini hiyerarşik veri dizilimlerini falan bakmadığım taşın altı kalmadı. Ama bu haliyle hala yapamamış gibiyim. İşin büyük bölümünü pazartesi teslim etmem lazım. Kestane kebap acele cevap :)

MYSQL tablom şuna benzer...

kat_id ............ kat_baslik.......ustkat_id....
1 ................ANASAYFA............0
2................OKULUMUZ.............1
3...............Tarihçesi.................2
4.............. Misyonu..................2
.... şeklinde


Elinde sınırsız kategoriyi dikey bir menüde sağa doğru açılan bir şekilde CSS ve php ile yazılmış bir script lazım anlayacağınız...
 
aransasey hocam ilginden ötürü teşekkür ettim. Fakat ben yeterince açıklayıcı olmadığım için sanırım anlatmak istediğimle pek alakalı olmayan bir link gönderdiniz. Recursive menü derken bir fonksiyonun kendi içinden kendini çağırarak ilgili sınırsız kategori ve alt kategorilerini listelemesinden bahsediyordum.
Benim yaptığım örnek sayfa aşağıda, yardımcı olabilecek PHP MYSQL ve CSS de uzman arkadaşlar ya da daha önce benzer mantıkla "ana" ve "alt kategorileri" css'e listeye dökebilmiş arkadaşların ellerindeki örnek çalışmaları ya da bilgilerini paylaşmasını diliyorum...
Veritabanımda kategoriler tablomun yapısı şuna benzer :

kat_id--------------- kat_baslik-----------altkat_id
1-------------------ANA SAYFA----------------0
2-------------------okulumuz------------------1
3------------------misyonumuz----------------2
4-------------------vizyonumuz----------------2
5---------------------tarihçe--------------------2
...



"sinirsizmenu.php" sayfamın kodları :

Kod: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Kategori Listeleme - MENÜ</title>
<style type="text/css" media="screen">
#menu {
	width: 184px;
	background: #eee;
}
#menu ul {
	list-style: none;
	margin: 0;
	padding: 0;
	color: #FFFFFF;
	background-color: #0066FF;
}
#menu a, #menu h2 {
	font: bold 11px/16px arial, helvetica, sans-serif;
	display: block;
	margin: 0;
	padding: 2px 3px;
}
#menu h2 {
color: #fff;
background: #000;
text-transform: uppercase;
}
#menu a {
	color: #FFFFFF;
	text-decoration: none;
	background-color: #efefef;
	background-image: url(images/menu/m_li.gif);
	background-repeat: no-repeat;
	padding-left: 10px;
}
#menu a:hover {
	color: #000000;
	background-color: #fff;
}
#menu li {
	position: relative;
	color: #FFFFFF;
	background-color: #0066FF;
}
#menu ul ul ul {
	position: absolute;
	top: 0;
	left: 100%;
	width: 100%;
	color: #FFFFFF;
	background-color: #0066FF;
}
div#menu ul ul ul,
div#menu ul ul li:hover ul ul
{
	display: none;
	background-image: url(images/menu/m_li.gif);
	background-repeat: no-repeat;
}
div#menu ul ul li:hover ul,
div#menu ul ul ul li:hover ul
{display: block;}
</style>
<!--[if IE]>
<style type="text/css" media="screen">
 #menu ul li {float: left; width: 100%;}
</style>
<![endif]-->
<!--[if lt IE 7]>
<style type="text/css" media="screen">
body {
behavior: url(csshover.htc);
font-size: 100%;
}
#menu ul li {float: left; width: 100%;}
#menu ul li a {height: 1%;} 
#menu a, #menu h2 {
font: bold 0.7em/1.4em arial, helvetica, sans-serif;
}
</style>
<![endif]-->
</head>
<body>
<?php
include("ayarlar.php");
echo"<div id=\"menu\">";

$query = mysql_query("SELECT * FROM kategoriler");
$toplamkayit=mysql_num_rows($query);

while ( $row = mysql_fetch_array($query) )
{
        $menu_array[$row['kat_id']] = array('id' => $row['kat_id'],'name' => $row['kat_baslik'],'parent' => $row['altkat_id']);
}
//recursive function that prints categories as a nested html unorderd list
function generate_menu($parent)
{
        $has_childs = false;
        //this prevents printing 'ul' if we don't have subcategories for this category
        global $menu_array;
		global $cikti;
        //use global array variable instead of a local variable to lower stack memory requierment
        foreach($menu_array as $key => $value)
        {
                if ($value['parent'] == $parent) 
                {       
					 //if this is the first child print '<ul>'                       
                        if ($has_childs === false)
                        {
                                //don't print '<ul>' multiple times                             
                                $has_childs = true;
                                //echo "<li><a href=index.php?kid='" . $value['id'] . "'>" . $value['name'] ."&nbsp;&nbsp;&nbsp;&nbsp;&raquo;</a>";
								$cikti=$cikti. "\n<ul>\n";
                        }

                       if ($has_childs === false)
                        {
					   //echo "<li><a href=index.php?kid=" . $value['id'] . ">" . $value['name'] ."</a>";
						}
						else{$cikti=$cikti. "\t<li><a href=index.php?kid=" . $value['id'] . ">" . $value['name'] ."</a>";}
						generate_menu($key);
                        //call function again to generate nested list for subcategories belonging to this category
                        $cikti=$cikti. "</li>\n";
                }
        }
        if ($has_childs === true) $cikti=$cikti. "\n</ul>\n";
}
//generate menu starting with parent categories (that have a 0 parent)
generate_menu(0);
echo"$cikti";
echo"</div>";
echo"</body></html>";
?>

Bu fonksiyon çalıştığı zaman çıktısı aşağıdaki gibi ama alt kategorisi olan liste elemanlarında sağa doğru ok işareti çıkarmam lazım...
Kod: 
<div id="menu">
<ul>
	<li><a href=index.php?kid=1>ANA SAYFA</a>

<ul>
	<li><a href=index.php?kid=3>OKULUMUZ</a>
<ul>
	<li><a href=index.php?kid=10>Misyonumuz</a></li>
	<li><a href=index.php?kid=12>Tarihçemiz</a></li>
	<li><a href=index.php?kid=14>Vizyonumuz</a>
<ul>
	<li><a href=index.php?kid=30>ALT SAYFA</a></li>

</ul>
</li>

</ul>
</li>
	<li><a href=index.php?kid=4>KADROMUZ</a></li>
	<li><a href=index.php?kid=5>REHBERLİK SERVİSİMİZ</a></li>
	<li><a href=index.php?kid=6>SINIFLARIMIZ</a></li>
	<li><a href=index.php?kid=7>SOSYAL KULÜPLERİMİZ</a></li>

	<li><a href=index.php?kid=8>OKUL GELİŞİM EKİBİMİZ</a></li>
	<li><a href=index.php?kid=9>OKUL AİLE BİRLİĞİMİZ</a></li>
	<li><a href=index.php?kid=13>SOSYAL KULÜPLER</a></li>
	<li><a href=index.php?kid=11>HABERLER</a></li>
	<li><a href=index.php?kid=15>RABİA LEMAN MARŞI</a></li>
	<li><a href=index.php?kid=16>BÖLÜMLERİMİZ</a>

<ul>
	<li><a href=index.php?kid=17>FEN LABORATUARI</a></li>
	<li><a href=index.php?kid=18>BİLGİ TEKNOLOJİ SINIFI</a></li>
	<li><a href=index.php?kid=19>TEKNOLOJİ TASARIM SINIFI</a></li>
	<li><a href=index.php?kid=20>KÜTÜPHANE</a></li>
	<li><a href=index.php?kid=21>ÇOK AMAÇLI SALON</a></li>
	<li><a href=index.php?kid=22>ATATÜRK KÖŞESİ</a></li>

	<li><a href=index.php?kid=23>ÖĞRETMENLER ODASI</a></li>
	<li><a href=index.php?kid=24>ANA SINIFI</a></li>

</ul>
</li>
	<li><a href=index.php?kid=25>LİNKLER</a></li>
	<li><a href=index.php?kid=26>İLETİŞİM</a></li>
	<li><a href=index.php?kid=27>RESİM GALERİSİ</a></li>

	<li><a href=index.php?kid=28>OGY</a></li>
	<li><a href=index.php?kid=29>ETKİNLİKLERİMİZ</a></li>
	<li><a href=index.php?kid=31>SİTE HARİTASI</a></li>

</ul>
</li>

</ul>
</div>
 
1,5 gün sonunda başardım :) Artık yukarıda bahsettiğim veritabanında yer alan sınırsız kategorilerime aşağıdaki kodlarla kategorileri bir css menü ile gösterebiliyorum... Nette bulduğum recursive menü fonksiyonlarından yola çıkarak bende bir fonksiyon ve css e küçük bir ekle artık alt kategorilerin yanında ibr ok işareti görünmesini sağlayabiliyor ve bu şekilde sınırsız kategorileri gösterebiliyorum...(Alt kategoriler yana doğru açılıyor...)
Birilerinin ihtiyacı olabilir belki kodları açıklamaları ile paylaşıyorum...

Kod: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Kategori Listeleme - MENÜ</title>
<style type="text/css" media="screen">
#menu {
	width: 184px;
	background: #eee;
}
#menu ul {
	list-style: none;
	margin: 0;
	padding: 0;
	color: #FFFFFF;
	background-color: #0066FF;
}
#menu a, #menu h2 {
	font: bold 11px/16px arial, helvetica, sans-serif;
	display: block;
	margin: 0;
	padding: 2px 3px;
}
#menu h2 {
color: #fff;
background: #000;
text-transform: uppercase;
}
#menu a {
	color: #FFFFFF;
	text-decoration: none;
	background-color: #efefef;
	background-image: url(images/menu/m_li.gif);
	background-repeat: no-repeat;
	padding-left: 10px;
}
#menu a:hover {
	color: #000000;
	background-color: #fff;
}
#menu li {
	position: relative;
	color: #FFFFFF;
	background-color: #0066FF;
	background-image: url(images/menu/m_li.gif);
	background-repeat: no-repeat;
}
<!--Benim alt sayfayı açan class yapım-->
#menu a.ok {
	position: relative;
	color: #FFFFFF;
	background-image: url(images/menu/m_li_sub.gif);
	background-repeat: no-repeat;
}

#menu ul ul ul {
	position: absolute;
	top: 0;
	left: 100%;
	width: 100%;
	color: #FFFFFF;
	background-color: #0066FF;
}
div#menu ul ul ul,
div#menu ul ul li:hover ul ul
{
	display: none;
	background-image: url(images/menu/m_li.gif);
	background-repeat: no-repeat;
}
div#menu ul ul li:hover ul,
div#menu ul ul ul li:hover ul
{display: block;}
</style>


<!--[if IE]>
<style type="text/css" media="screen">
 #menu ul li {float: left; width: 100%;}
</style>
<![endif]-->
<!--[if lt IE 7]>
<style type="text/css" media="screen">
body {
behavior: url(csshover.htc);
font-size: 100%;
}
#menu ul li {float: left; width: 100%;}
#menu ul li a {height: 1%;} 
#menu a, #menu h2 {
font: bold 0.7em/1.4em arial, helvetica, sans-serif;
}
</style>
<![endif]-->
</head>
<body>
<?php
include("ayarlar.php"); // veritabanına bağlan
echo"<div id=\"menu\">";
/*
TARIK TURAN
2010

BURADA YAPILAN SINIRSIZ KATEGORİLER VERİTABANINI
KATİD ----- KAT-BASLIK----USTKAT-İD
YAPISANA SAHİP BİR VERİTABANINDAN VERİLERİ ALIP DİKEY BİR DROPDOWN MENÜYE KOYUYOR ... 

*/
//////////////////////////////////// TARIK TURAN alt kategori sayma fonksiyonu
$query = mysql_query("SELECT * FROM kategoriler");
$toplamkayit=mysql_num_rows($query);
global $toplamkayit1;
$toplamkayit1=0;

function altkatsay($gelenid)
{
		$toplamkayit1=0;
		$sql = mysql_query("SELECT * FROM kategoriler WHERE altkat_id='$gelenid'");
		$toplamkayit1=mysql_num_rows($sql);
		if (isset($toplamkayit1))
		{
		return $toplamkayit1;
		}
		else
		{
		$toplamkayit1=0;
		}
		return $toplamkayit1;
}
//////////////////////////////////// TARIK TURAN alt kategori sayma fonksiyonu sonu
//get all rows
$query = mysql_query("SELECT * FROM kategoriler");
while ( $row = mysql_fetch_assoc($query) )
{
        $menu_array[$row['kat_id']] = array('id' => $row['kat_id'],'baslik' => $row['kat_baslik'],'altid' => $row['altkat_id']);
}
//recursive function that prints categories as a nested html unorderd list
function generate_menu($parent)
{
        $has_childs = false;
        //this prevents printing 'ul' if we don't have subcategories for this category
        global $menu_array;
        //use global array variable instead of a local variable to lower stack memory requierment
        foreach($menu_array as $key => $value)
        {
                if ($value['altid'] == $parent) 
                {       
                        //if this is the first child print '<ul>'                       
                        if ($has_childs === false)
                        {
                                //don't print '<ul>' multiple times                             
                                $has_childs = true;
                                echo "\n<ul>\n";
                        }              
						 $topla=altkatsay($key); // Gelen sayfanın alt sayfalarının olup olmadığına bakılıyor...
             // ilgili kategorinin altsayfaları varsa topla>0 ve anasayfa ($key=1) dışındaki değerlere class=ok (css e benim eklediğim alt menülerin olduğunu gösteren oklu arkaplan ekleniyor ve link yapısı liste elemanın içine ekleniyor.)
						if (isset($topla) && ($topla>0) && ($key<>1))
						{echo "<li><a href=\"index.php?kid=" . $value['id'] . "\" class=\"ok\">" . $value['baslik'] . "</a>";} 
						else
						{echo "<li><a href=\"index.php?kid=" . $value['id'] . "\">" . $value['baslik'] . "</a>";}
                       
						generate_menu($key);
                        //call function again to generate nested list for subcategories belonging to this category
                        echo "</li>\n";
                }
        }
        if ($has_childs === true){ echo "</ul>\n";}
}
//generate menu starting with parent categories (that have a 0 parent)
generate_menu(0); // fonksiyon çağrılıyor...
mysql_close("$baglantim"); // DB bağlantısı kesildi.
//echo"$cikti";
echo"</div>";
echo"</body></html>";
?>
 
hocam geç gördüm mesajını yoksa anlatırdım hatta örnekte gönderirdim. eğer açılır cinsinden bir şeyler lazımsa yine yaz yardımcı olurum.
 
Cevap yazmak için giriş yap yada kayıt ol.
BBNET
Geri
Üst