php resimli menü yardım...

Ana Sayfa

Forum

PHP

php resimli menü yardım... (04/12/2009 05:14)

missst

OFFLINE

Active Coder

elimde php kodlarındn basit açılabilen bir menü var.. ancak bu menünün dikdörtgen şeklnde açılmasını ve renk değştrmeini istiorm.. aslnda direk olan yazıların arkasına bir dikdörtgen ekleyip mouse üzerine gelnce belirlediğim dier farklı renk dikdörtgen görünümüne gelen menüyü nasıl yapabilirim? kısacası php de menünün arkasına resim eklemek istiorm ve mouse üzerine geldiğininde farklı resim gözkmüesini istiorum..nasıl yapabilirim? menü kodlarım aşağıdadır:

CODE:

<?php



# Main menu items: (Menu title -> array of submenu titles).

$menu_items = array("Home"  => array(),

					"About" => array(""),

                    "Framework" => array("item1", "item2", "item3"),                                    

					"Modules" => array("itema", "itemb", "itemc"), 

                    "Careers" => array(),

					"Contact Us" => array("Istanbul","Ankara"));



# Level 1 menu page addresses (Menu title -> file location).

$menu_pages_l1 = array("Home" => "index.php",

                       "About" => "about.php",

                       "Framework" => "Framework.php",

					   "Modules" => "modules.php",

					   "Careers" => "careers.php",

					   "Contact Us" => "contact.php");

		   

# Level 2 menu page addresses (Level 1 menu title -> array of (level 2 menu title -> file location).



$menu_pages_l2 = array("Home" => array(),

                                     

                       "About Katron" => array("History" => "about3.php"),

                                        		  

                       "Framework" => array(	"item1" => "item1.php",

					   	"item2" => "item2.php",

						"item3" => "item3.php"),

														

					   "Modules" =>array( 	"itema" => "itema.php",

					   			"itemb" => "itemb.php",

								"itemc" => "itemc.php"),

											

					   "Careers" => array("careers3.php"),

					   "Contact Us" => array("Istanbul" => "contact.php",

                                        	 "Ankara" => "contact.php"));



function print_menu($active_page)

{

    global $menu_items;

    global $menu_pages_l1;

    global $menu_pages_l2;



    echo "<ul>";

    foreach($menu_items as $l1_name => $l1_value)

    {

        $l1_address = $menu_pages_l1[$l1_name];



        echo "<li> <a href="$l1_address">$l1_name</a>";

        if ($active_page == $l1_name)

        {

            echo "<ul>";

            foreach($l1_value as $l2_name)

            {

                $l2_address = $menu_pages_l2[$l1_name][$l2_name];



                echo "<li> <a href="$l2_address">$l2_name</a></li>";

            }

            echo "</ul>";

        }

        echo "</li>";

    }

    echo "</ul>";

}



?>

Re:php resimli menü yardım... (04/12/2009 15:46)

Oguzz

OFFLINE

Senior Coder

Selam sanırım anlatmak istediğiniz mouse menünün üstüne gelince renk değiştirmesi arkaplandaki diktörtgenin..Şöylede yapabilirsiniz default olarak menüdeki yazıyı bir resmin üstünde gösterirsiniz css ile üstüne gelince yine aynı ebatlarda belirlediğiniz farklı renkteki resmi gösterebilirsiniz..

Bakınız ;

div kullanacağız..

CODE:

<div id="degisen_menu" class="gri">

            <div class="left"></div>

            <ul id="menu">

                <li><a href="http://www.thecoders.net.">Ana Sayfa</a></li>

                <li class="active"><a href="http://www.thecoders.net/dersmakale">Makale</a></li>

                <li><a href="http://www.thecoders.net/forum">Forums</a></li>

                <li><a href="http://www.thecoders.net/iletisim">İletişim</a></li>

            </ul>

        </div>

Tanımladığımız div etiketindeki <li> </li> etiketleri içerisine aldığımız linklerimizi hareketlendirelim..

Css kodlarında bahsettiğiniz gibi background resmini images klasörüne atıyoruz..

Aşağıdaki kodları <head> etiketinden sonra ;

CODE:

<style type="text/css">

            body {

                padding: 50px;

            }

            /* CSS kodlarımızın başladığı yer li etiketlerini biçimlendiriyoruz */

            #menu {

                font-family: Arial, sans-serif;

                font-weight: bold;

                text-transform: uppercase;

                margin: 20px 0;

                padding: 0;

                list-style-type: none;

                background-color: #eee;

                font-size: 13px;

                height: 40px;

                border-top: 2px solid #eee;

                border-bottom: 2px solid #ccc;

            }

            #menu li {

                float: left;

                margin: 0;                

            }

            #menu li a {

                text-decoration: none;

                display: block;

                padding: 0 20px;

                line-height: 40px;

                color: #666;

            }

            #menu li a:hover, #menu li.active a {

                background-color: #f5f5f5;

                border-bottom: 2px solid #DDD;

                color: #999;

            }

            #degisen_menu ul {margin-left: 12px;}

            #degisen_menu {padding: 0 16px 0 0; background: url(/img/gri.png) no-repeat right;}

            #degisen_menu div {float: left; height: 44px; width: 12px; background: url(/img/gri.png) no-repeat left;}            

         

        </style>

Kodları çalıştırdığınızda sonucu göreceksiniz :)

Buradan

indirip inceleyebilirsiniz

[IMG SRC="http://i27.tinypic.com/deo945.jpg" ALIGN="CENTER"]http://i27.tinypic.com/deo945.jpg[/IMG]

Re:php resimli menü yardım... (10/12/2009 01:57)

missst

OFFLINE

Active Coder

evt nedmk istedğimi çok iyi anlamışsınız..yrdımlrnzdn dolayı teşkkr edrm :)(:

Re:php resimli menü yardım... (10/12/2009 12:44)

Oguzz

OFFLINE

Senior Coder

Ben teşekkür ederim kolay gelsin ..

[IMG SRC="http://i27.tinypic.com/deo945.jpg" ALIGN="CENTER"]http://i27.tinypic.com/deo945.jpg[/IMG]

1 /

Ana Sayfa

Forum

PHP

Bu bilgisayarda beni hatırla

Advertisement