24 Tem 2021 20:33 Yeni Konu Oluştur

Haberler:

Sitemiz Smf 2.1 ve Smf 2.0 sürümleri için Destek ve Tema paylaşım forumudur


Smf menüleri css3

Başlatan snrj, 18 May 2014 14:25

« önceki - sonraki »

0 Üyeler ve 3 Ziyaretçiler konuyu incelemekte.

*

  1. 3,094

  2. 585

  3. 983
18 May 2014 14:25 Son düzenlenme: 17 Ara 2014 11:59 snrj

fırsat buldukça burdan smf için uyarladığımız menüleri yayınlıcaz kopyala yapıştır yaparak kolayca kendi sitenize uygulayabileceksiniz yeni menüler ekledikçe konuyu güncellicem hemen ilk menümüzü ekleyelim

1- lavamp menü

alttaki iki resim temanızın images/theme klasörüne atın
http://theme.teknoromi.com/Themes/Teknoromi/images/theme/menu_bg.png
http://theme.teknoromi.com/Themes/Teknoromi/images/theme/lavalamp.png
index.template.php de bul
// Show the menu up top. Something like [home] [help] [profile] [logout]...
function template_menu()
{
 global $context, $settings, $options, $scripturl, $txt;

 echo '
 <div id="main_menu">
 <ul class="dropmenu" id="menu_nav">';

 foreach ($context['menu_buttons'] as $act => $button)
 {
 echo '
 <li id="button_', $act, '">
 <a class="', $button['active_button'] ? 'active ' : '', 'firstlevel" href="', $button['href'], '"', isset($button['target']) ? ' target="' . $button['target'] . '"' : '', '>
 <span class="', isset($button['is_last']) ? 'last ' : '', 'firstlevel">', $button['title'], '</span>
 </a>';
 if (!empty($button['sub_buttons']))
 {
 echo '
 <ul>';

 foreach ($button['sub_buttons'] as $childbutton)
 {
 echo '
 <li>
 <a href="', $childbutton['href'], '"', isset($childbutton['target']) ? ' target="' . $childbutton['target'] . '"' : '', '>
 <span', isset($childbutton['is_last']) ? ' class="last"' : '', '>', $childbutton['title'], !empty($childbutton['sub_buttons']) ? '...' : '', '</span>
 </a>';
 // 3rd level menus :)
 if (!empty($childbutton['sub_buttons']))
 {
 echo '
 <ul>';

 foreach ($childbutton['sub_buttons'] as $grandchildbutton)
 echo '
 <li>
 <a href="', $grandchildbutton['href'], '"', isset($grandchildbutton['target']) ? ' target="' . $grandchildbutton['target'] . '"' : '', '>
 <span', isset($grandchildbutton['is_last']) ? ' class="last"' : '', '>', $grandchildbutton['title'], '</span>
 </a>
 </li>';

 echo '
 </ul>';
 }

 echo '
 </li>';
 }
 echo '
 </ul>';
 }
 echo '
 </li>';
 }

 echo '
 </ul>
 </div>';
}
değiştir
// Show the menu up top. Something like [home] [help] [profile] [logout]...
function template_menu()
{
 global $context, $settings, $options, $scripturl, $txt;

 echo '     <div id="demowrapper">

       <div class="container">
 <ul class="nav">';

 foreach ($context['menu_buttons'] as $act => $button)
 {
 echo '
 <li>
 <a  href="', $button['href'], '"', isset($button['target']) ? ' target="' . $button['target'] . '"' : '', '>
 <span >', $button['title'], '</span>
 </a>';
 if (!empty($button['sub_buttons']))
 {
 echo '
 <ul class="subs">';

 foreach ($button['sub_buttons'] as $childbutton)
 {
 echo '
 <li>
 <a  href="', $childbutton['href'], '"', isset($childbutton['target']) ? ' target="' . $childbutton['target'] . '"' : '', '>
 <span', isset($childbutton['is_last']) ? ' ' : '', '>', $childbutton['title'], !empty($childbutton['sub_buttons']) ? '...' : '', '</span>
 </a>';
 // 3rd level menus :)
 if (!empty($childbutton['sub_buttons']))
 {
 echo '
 <ul class="subs">';

 foreach ($childbutton['sub_buttons'] as $grandchildbutton)
 echo '
 <li>
 <a href="', $grandchildbutton['href'], '"', isset($grandchildbutton['target']) ? ' target="' . $grandchildbutton['target'] . '"' : '', '>
 <span', isset($grandchildbutton['is_last']) ? '"' : '', '>', $grandchildbutton['title'], '</span>
 </a>
 </li>';

 echo '
 </ul>';
 }

 echo '
 </li>';
 }
 echo '
 </ul>';
 }
 echo '
 </li>';
 }

 echo '

 <div id="lavalamp"></div></ul>

 </div> </div>';
}
index.css de en alta ekle
#demowrapper{position:relative;height:60px;margin:0 auto;}
.container{font:14px/1.3 Arial,sans-serif}
.nav,.nav ul{list-style:none outside none;margin:0;padding:0;}
.nav{background:url('../images/theme/menu_bg.png') no-repeat scroll 0 0 transparent;clear:both;font-size:12px;height:58px;padding:0 0 0 9px;position:relative;width:957px;}
.nav ul{background-color:#222;border:1px solid #222;border-radius:0 5px 5px 5px;border-width:0 1px 1px;box-shadow:0 5px 5px rgba(0, 0, 0, 0.5);left:-9999px;overflow:hidden;position:absolute;top:-9999px;z-index:2;-moz-transform:scaleY(0);-ms-transform:scaleY(0);-o-transform:scaleY(0);-webkit-transform:scaleY(0);transform:scaleY(0);}
.nav li{background:url('../images/theme/menu_line.png') no-repeat scroll right 5px transparent;width:95px;float:left;position:relative;}
.nav li a{color:#FFFFFF;display:block;font-weight:normal;height:30px;padding:23px 20px 0;position:relative;text-align:center;text-decoration:none;text-shadow:1px 1px 1px #000000;}
.nav li:hover > a{color:#00B4FF;}
.nav li:hover, .nav a:focus, .nav a:hover, .nav a:active{background:none repeat scroll 0 0 #121212;outline:0 none;}
.nav li:hover ul.subs{left:0;top:53px;width:180px;-moz-transform:scaleY(1);-ms-transform:scaleY(1);-o-transform:scaleY(1);-webkit-transform:scaleY(1);transform:scaleY(1);}
.nav ul li{background:none;width:100%;}
.nav ul li a{float:left;}
.nav ul li:hover > a{background-color:#121212;color:#00B4FF;}
#lavalamp{background:url('../images/theme/lavalamp.png') no-repeat scroll 0 0 transparent;height:16px;left:19px;position:absolute;top:0px;width:64px;-moz-transition:all 300ms ease;-ms-transition:all 300ms ease;-o-transition:all 300ms ease;-webkit-transition:all 300ms ease;transition:all 300ms ease;}
#lavalamp:hover{-moz-transition-duration:3000s;-ms-transition-duration:3000s;-o-transition-duration:3000s;-webkit-transition-duration:3000s;transition-duration:3000s;}
.nav li:nth-of-type(1):hover ~ #lavalamp{left:20px;}
.nav li:nth-of-type(2):hover ~ #lavalamp{left:115px;}
.nav li:nth-of-type(3):hover ~ #lavalamp{left:210px;}
.nav li:nth-of-type(4):hover ~ #lavalamp{left:305px;}
.nav li:nth-of-type(5):hover ~ #lavalamp{left:400px;}
.nav li:nth-of-type(6):hover ~ #lavalamp{left:495px;}
.nav li:nth-of-type(7):hover ~ #lavalamp{left:590px;}
.nav li:nth-of-type(8):hover ~ #lavalamp{left:685px;}
.nav li:nth-of-type(9):hover ~ #lavalamp{left:780px;}



2- dropdown menü

index.template.php de bul
// Show the menu up top. Something like [home] [help] [profile] [logout]...
function template_menu()
{
 global $context, $settings, $options, $scripturl, $txt, $modSettings;

 echo '
 <div id="main_menu">
 <ul class="dropmenu" id="menu_nav">';

 foreach ($context['menu_buttons'] as $act => $button)
 {
 echo '
 <li id="button_', $act, '">
 <a class="', $button['active_button'] ? 'active ' : '', 'firstlevel" href="', $button['href'], '"', isset($button['target']) ? ' target="' . $button['target'] . '"' : '', '>
 <span class="', isset($button['is_last']) ? 'last ' : '', 'firstlevel">', $button['title'], '</span>
 </a>';
 if (!empty($button['sub_buttons']))
 {
 echo '
 <ul>';

 foreach ($button['sub_buttons'] as $childbutton)
 {
 echo '
 <li>
 <a href="', $childbutton['href'], '"', isset($childbutton['target']) ? ' target="' . $childbutton['target'] . '"' : '', '>
 <span', isset($childbutton['is_last']) ? ' class="last"' : '', '>', $childbutton['title'], !empty($childbutton['sub_buttons']) ? '...' : '', '</span>
 </a>';
 // 3rd level menus :)
 if (!empty($childbutton['sub_buttons']))
 {
 echo '
 <ul>';

 foreach ($childbutton['sub_buttons'] as $grandchildbutton)
 echo '
 <li>
 <a href="', $grandchildbutton['href'], '"', isset($grandchildbutton['target']) ? ' target="' . $grandchildbutton['target'] . '"' : '', '>
 <span', isset($grandchildbutton['is_last']) ? ' class="last"' : '', '>', $grandchildbutton['title'], '</span>
 </a>
 </li>';

 echo '
 </ul>';
 }

 echo '
 </li>';
 }
 echo '
 </ul>';
 }
 echo '
 </li>';
 }

 echo '
 </ul>
 </div>';
}

değiştir
// Show the menu up top. Something like [home] [help] [profile] [logout]...
function template_menu()
{
 global $context, $settings, $options, $scripturl, $txt, $modSettings;

 echo '
 <ul id="menu">';

 foreach ($context['menu_buttons'] as $act => $button)
 {
 echo '
 <li id="button_', $act, '">
 <a class="', $button['active_button'] ? 'active ' : '', 'firstlevel" href="', $button['href'], '"', isset($button['target']) ? ' target="' . $button['target'] . '"' : '', '>
 <span class="', isset($button['is_last']) ? 'last ' : '', 'firstlevel">', $button['title'], '</span>
 </a>';
 if (!empty($button['sub_buttons']))
 {
 echo '
 <ul>';

 foreach ($button['sub_buttons'] as $childbutton)
 {
 echo '
 <li>
 <a href="', $childbutton['href'], '"', isset($childbutton['target']) ? ' target="' . $childbutton['target'] . '"' : '', '>
 <span', isset($childbutton['is_last']) ? ' class="last"' : '', '>', $childbutton['title'], !empty($childbutton['sub_buttons']) ? '...' : '', '</span>
 </a>';
 // 3rd level menus :)
 if (!empty($childbutton['sub_buttons']))
 {
 echo '
 <ul>';

 foreach ($childbutton['sub_buttons'] as $grandchildbutton)
 echo '
 <li>
 <a href="', $grandchildbutton['href'], '"', isset($grandchildbutton['target']) ? ' target="' . $grandchildbutton['target'] . '"' : '', '>
 <span', isset($grandchildbutton['is_last']) ? ' class="last"' : '', '>', $grandchildbutton['title'], '</span>
 </a>
 </li>';

 echo '
 </ul>';
 }

 echo '
 </li>';
 }
 echo '
 </ul>';
 }
 echo '
 </li>';
 }

 echo '
 </ul>';
}

index.css de en alta ekle
#menu
{
 width: 100%;
 margin: 0;
 padding: 10px 0 0 0;
 list-style: none; 
 background: #111;
 background: -moz-linear-gradient(#444, #111);
    background: -webkit-gradient(linear,left bottom,left top,color-stop(0, #111),color-stop(1, #444));
 background: -webkit-linear-gradient(#444, #111);
 background: -o-linear-gradient(#444, #111);
 background: -ms-linear-gradient(#444, #111);
 background: linear-gradient(#444, #111);
 -moz-border-radius: 50px;
 border-radius: 50px;
 -moz-box-shadow: 0 2px 1px #9c9c9c;
 -webkit-box-shadow: 0 2px 1px #9c9c9c;
 box-shadow: 0 2px 1px #9c9c9c;
}

#menu li
{
 float: left;
 padding: 0 0 10px 0;
 position: relative;
 line-height: 0;
}

#menu a
{
 float: left;
 height: 25px;
 padding: 0 25px;
 color: #999;
 text-transform: uppercase;
 font: bold 12px/25px Arial, Helvetica;
 text-decoration: none;
 text-shadow: 0 1px 0 #000;
}

#menu li:hover > a
{
 color: #fafafa;
}

*html #menu li a:hover /* IE6 */
{
 color: #fafafa;
}

#menu li:hover > ul
{
 display: block;
}

/* Sub-menu */

#menu ul
{
    list-style: none;
    margin: 0;
    padding: 0;   
    display: none;
    position: absolute;
    top: 35px;
    left: 0;
    z-index: 99999;   
    background: #444;
    background: -moz-linear-gradient(#444, #111);
    background: -webkit-gradient(linear,left bottom,left top,color-stop(0, #111),color-stop(1, #444));
    background: -webkit-linear-gradient(#444, #111);   
    background: -o-linear-gradient(#444, #111);
    background: -ms-linear-gradient(#444, #111);
    background: linear-gradient(#444, #111);
    -moz-box-shadow: 0 0 2px rgba(255,255,255,.5);
    -webkit-box-shadow: 0 0 2px rgba(255,255,255,.5);
    box-shadow: 0 0 2px rgba(255,255,255,.5);
    -moz-border-radius: 5px;
    border-radius: 5px;
}

#menu ul ul
{
  top: 0;
  left: 150px;
}

#menu ul li
{
    float: none;
    margin: 0;
    padding: 0;
    display: block; 
    -moz-box-shadow: 0 1px 0 #111111, 0 2px 0 #777777;
    -webkit-box-shadow: 0 1px 0 #111111, 0 2px 0 #777777;
    box-shadow: 0 1px 0 #111111, 0 2px 0 #777777;
}

#menu ul li:last-child
{   
    -moz-box-shadow: none;
    -webkit-box-shadow: none;
    box-shadow: none;   
}

#menu ul a
{   
    padding: 10px;
 height: 10px;
 width: 130px;
 height: auto;
    line-height: 1;
    display: block;
    white-space: nowrap;
    float: none;
 text-transform: none;
}

*html #menu ul a /* IE6 */
{   
 height: 10px;
}

*:first-child html #menu ul a /* IE7 */
{   
 height: 10px;
}

#menu ul a:hover
{
    background: #0186ba;
 background: -moz-linear-gradient(#04acec,  #0186ba);
 background: -webkit-gradient(linear, left top, left bottom, from(#04acec), to(#0186ba));
 background: -webkit-linear-gradient(#04acec,  #0186ba);
 background: -o-linear-gradient(#04acec,  #0186ba);
 background: -ms-linear-gradient(#04acec,  #0186ba);
 background: linear-gradient(#04acec,  #0186ba);
}

#menu ul li:first-child > a
{
    -moz-border-radius: 5px 5px 0 0;
    border-radius: 5px 5px 0 0;
}

#menu ul li:first-child > a:after
{
    content: '';
    position: absolute;
    left: 30px;
    top: -8px;
    width: 0;
    height: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-bottom: 8px solid #444;
}

#menu ul ul li:first-child a:after
{
    left: -8px;
    top: 12px;
    width: 0;
    height: 0;
    border-left: 0;
    border-bottom: 5px solid transparent;
    border-top: 5px solid transparent;
    border-right: 8px solid #444;
}

#menu ul li:first-child a:hover:after
{
    border-bottom-color: #04acec;
}

#menu ul ul li:first-child a:hover:after
{
    border-right-color: #04acec;
    border-bottom-color: transparent;
}


#menu ul li:last-child > a
{
    -moz-border-radius: 0 0 5px 5px;
    border-radius: 0 0 5px 5px;
}

/* Clear floated elements */
#menu:after
{
 visibility: hidden;
 display: block;
 font-size: 0;
 content: " ";
 clear: both;
 height: 0;
}

* html #menu             { zoom: 1; } /* IE6 */
*:first-child html #menu { zoom: 1; } /* IE7 */


3- açlılır kapanır menü
iconlar biraz aceleye geldi ama siz kendinize göre düzeltin artık
benim kullandığım iconları şurdan indirebilirsiniz = http://yadi.sk/d/kh_qAL0vKHLL8
images klasörüne atınız
örnek resim

index.template.php de bul
// Show the menu up top. Something like [home] [help] [profile] [logout]...
function template_menu()
{
 global $context, $settings, $options, $scripturl, $txt;

 echo '
 <div id="main_menu">
 <ul class="dropmenu" id="menu_nav">';

 foreach ($context['menu_buttons'] as $act => $button)
 {
 echo '
 <li id="button_', $act, '">
 <a class="', $button['active_button'] ? 'active ' : '', 'firstlevel" href="', $button['href'], '"', isset($button['target']) ? ' target="' . $button['target'] . '"' : '', '>
 <span class="', isset($button['is_last']) ? 'last ' : '', 'firstlevel">', $button['title'], '</span>
 </a>';
 if (!empty($button['sub_buttons']))
 {
 echo '
 <ul>';

 foreach ($button['sub_buttons'] as $childbutton)
 {
 echo '
 <li>
 <a href="', $childbutton['href'], '"', isset($childbutton['target']) ? ' target="' . $childbutton['target'] . '"' : '', '>
 <span', isset($childbutton['is_last']) ? ' class="last"' : '', '>', $childbutton['title'], !empty($childbutton['sub_buttons']) ? '...' : '', '</span>
 </a>';
 // 3rd level menus :)
 if (!empty($childbutton['sub_buttons']))
 {
 echo '
 <ul>';

 foreach ($childbutton['sub_buttons'] as $grandchildbutton)
 echo '
 <li>
 <a href="', $grandchildbutton['href'], '"', isset($grandchildbutton['target']) ? ' target="' . $grandchildbutton['target'] . '"' : '', '>
 <span', isset($grandchildbutton['is_last']) ? ' class="last"' : '', '>', $grandchildbutton['title'], '</span>
 </a>
 </li>';

 echo '
 </ul>';
 }

 echo '
 </li>';
 }
 echo '
 </ul>';
 }
 echo '
 </li>';
 }

 echo '
 </ul>
 </div>';
}
değiştir
// Show the menu up top. Something like [home] [help] [profile] [logout]...
function template_menu()
{
 global $context, $settings, $options, $scripturl, $txt;

 echo '<div class="menu">';

 foreach ($context['menu_buttons'] as $act => $button)
 {
 echo '<div class="item" id="button_', $act, '">
 <a class="', $button['active_button'] ? 'active ' : '', 'firstlevel" href="', $button['href'], '"', isset($button['target']) ? ' target="' . $button['target'] . '"' : '', '>
 <div class="item_content"><h2 class="', isset($button['is_last']) ? 'last ' : '', 'firstlevel">', $button['title'], '</h2>
 </a>';
 if (!empty($button['sub_buttons']))
 {
 echo '
 ';

 foreach ($button['sub_buttons'] as $childbutton)
 {
 echo '
 
 <a href="', $childbutton['href'], '"', isset($childbutton['target']) ? ' target="' . $childbutton['target'] . '"' : '', '>
 <p', isset($childbutton['is_last']) ? ' class="last"' : '', '>', $childbutton['title'], !empty($childbutton['sub_buttons']) ? '...' : '', '</p>
 </a>';
 // 3rd level menus :)
 if (!empty($childbutton['sub_buttons']))
 {
 echo '
 <div class="item_content">';

 foreach ($childbutton['sub_buttons'] as $grandchildbutton)
 echo '
 
 <a href="', $grandchildbutton['href'], '"', isset($grandchildbutton['target']) ? ' target="' . $grandchildbutton['target'] . '"' : '', '>
 <p', isset($grandchildbutton['is_last']) ? ' class="last"' : '', '>', $grandchildbutton['title'], '</p>
 </a>
 ';

 echo '
 </div>';
 }

 echo '
 ';
 }
 echo '
 ';
 }
 echo '
 </div></div>';
 }

 echo '
 
 </div><script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>

        <script>
            $(\'.item\').hover(
                function(){
                    var $this = $(this);
                    expand($this);
                },
                function(){
                    var $this = $(this);
                    collapse($this);
                }
            );
            function expand($elem){
                var angle = 0;
                var t = setInterval(function () {
                    if(angle == 1440){
                        clearInterval(t);
                        return;
                    }
                    angle  = 40;
                    $(\'.link\',$elem).stop().animate({rotate: \' =-40deg\'}, 0);
                },10);
                $elem.stop().animate({width:\'268px\'}, 1000)
                .find(\'.item_content\').fadeIn(400,function(){
                    $(this).find(\'p\').stop(true,true).fadeIn(600);
                });
            }
            function collapse($elem){
                var angle = 1440;
                var t = setInterval(function () {
                    if(angle == 0){
                        clearInterval(t);
                        return;
                    }
                    angle -= 40;
                    $(\'.link\',$elem).stop().animate({rotate: \' =40deg\'}, 0);
                },10);
                $elem.stop().animate({width:\'48px\'}, 1000)
                .find(\'.item_content\').stop(true,true).fadeOut().find(\'p\').stop(true,true).fadeOut();
            }
        </script>';
}
index.css de en alta ekle
.item {
    position:relative;
    background-color:#f0f0f0;
    float:left;
    width:48px;
    margin:0px 5px;
    height:48px;
    border:2px solid #ddd;
    -moz-border-radius:30px;
    -webkit-border-radius:30px;
    border-radius:30px;
    -moz-box-shadow:1px 1px 3px #555;
    -webkit-box-shadow:1px 1px 3px #555;
    box-shadow:1px 1px 3px #555;
    cursor:pointer;
    overflow:hidden;
}

.link{
    left:2px;
    top:2px;
    position:absolute;
    width:48px;
    height:48px;
}
#button_home{
    background:transparent url(../images/home.png) no-repeat top left;
}
#button_pm{
    background:transparent url(../images/mail.png) no-repeat top left;
}
#button_help{
    background:transparent url(../images/help.png) no-repeat top left;
}
#button_search{
    background:transparent url(../images/find.png) no-repeat top left;
}
#button_profile{
    background:transparent url(../images/photos.png) no-repeat top left;
}
#button_mlist{
    background:transparent url(../images/users.png) no-repeat top left;
}
#button_logout{
    background:transparent url(../images/shotdown.png) no-repeat top left;
}
#button_admin{
    background:transparent url(../images/star.png) no-repeat top left;
}
#button_moderate{
    background:transparent url(../images/star.png) no-repeat top left;
}
#button_login{
    background:transparent url(../images/login.png) no-repeat top left;
}
#button_register{
    background:transparent url(../images/save.png) no-repeat top left;
}

.item_content {
    position:absolute;
    height:52px;
    width:220px;
    overflow:hidden;
    left:56px;
    top:7px;
    background:transparent;
    display:none;
}
.item_content h2{
    color:#aaa;
    text-shadow: 1px 1px 1px #fff;
    background-color:transparent;
    font-size:14px;
}
.item_content a{
    background-color:transparent;
    float:left;
    margin-right:7px;
    margin-top:3px;
    color:#bbb;
    text-shadow: 1px 1px 1px #fff;
    text-decoration:none;
    font-size:12px;
}
.item_content a:hover{
    color:#0b965b;
}
.item_content p {
    background-color:transparent;
    display:none;
 font-size: 9px;
margin-top: -3px;
}
.item_content p input{
    border:1px solid #ccc;
    padding:1px;
    width:155px;
    float:left;
    margin-right:5px;
}



4- efectif menü

index.template.php de bul
// Show the menu up top. Something like [home] [help] [profile] [logout]...
function template_menu()
{
 global $context, $settings, $options, $scripturl, $txt;

 echo '
 <div id="main_menu">
 <ul class="dropmenu" id="menu_nav">';

 foreach ($context['menu_buttons'] as $act => $button)
 {
 echo '
 <li id="button_', $act, '">
 <a class="', $button['active_button'] ? 'active ' : '', 'firstlevel" href="', $button['href'], '"', isset($button['target']) ? ' target="' . $button['target'] . '"' : '', '>
 <span class="', isset($button['is_last']) ? 'last ' : '', 'firstlevel">', $button['title'], '</span>
 </a>';
 if (!empty($button['sub_buttons']))
 {
 echo '
 <ul>';

 foreach ($button['sub_buttons'] as $childbutton)
 {
 echo '
 <li>
 <a href="', $childbutton['href'], '"', isset($childbutton['target']) ? ' target="' . $childbutton['target'] . '"' : '', '>
 <span', isset($childbutton['is_last']) ? ' class="last"' : '', '>', $childbutton['title'], !empty($childbutton['sub_buttons']) ? '...' : '', '</span>
 </a>';
 // 3rd level menus :)
 if (!empty($childbutton['sub_buttons']))
 {
 echo '
 <ul>';

 foreach ($childbutton['sub_buttons'] as $grandchildbutton)
 echo '
 <li>
 <a href="', $grandchildbutton['href'], '"', isset($grandchildbutton['target']) ? ' target="' . $grandchildbutton['target'] . '"' : '', '>
 <span', isset($grandchildbutton['is_last']) ? ' class="last"' : '', '>', $grandchildbutton['title'], '</span>
 </a>
 </li>';

 echo '
 </ul>';
 }

 echo '
 </li>';
 }
 echo '
 </ul>';
 }
 echo '
 </li>';
 }

 echo '
 </ul>
 </div>';
}
değiştir
// Show the menu up top. Something like [home] [help] [profile] [logout]...
function template_menu()
{
 global $context, $settings, $options, $scripturl, $txt;

 echo '
 <div id="main" role="main">
            <ul class="menu">';

 foreach ($context['menu_buttons'] as $act => $button)
 {
 echo '
 <li id="button_', $act, '">
 <a class="', $button['active_button'] ? 'active ' : '', 'firstlevel" href="', $button['href'], '"', isset($button['target']) ? ' target="' . $button['target'] . '"' : '', '>
 <span class="', isset($button['is_last']) ? 'last ' : '', 'firstlevel">', $button['title'], '</span>
 </a>';
 if (!empty($button['sub_buttons']))
 {
 echo '
 <ul class="submenu">';

 foreach ($button['sub_buttons'] as $childbutton)
 {
 echo '
 <li>
 <a href="', $childbutton['href'], '"', isset($childbutton['target']) ? ' target="' . $childbutton['target'] . '"' : '', '>
 <span', isset($childbutton['is_last']) ? ' class="last"' : '', '>', $childbutton['title'], !empty($childbutton['sub_buttons']) ? '...' : '', '</span>
 </a>';
 // 3rd level menus :)
 if (!empty($childbutton['sub_buttons']))
 {
 echo '
 <ul class="submenu">';

 foreach ($childbutton['sub_buttons'] as $grandchildbutton)
 echo '
 <li>
 <a href="', $grandchildbutton['href'], '"', isset($grandchildbutton['target']) ? ' target="' . $grandchildbutton['target'] . '"' : '', '>
 <span', isset($grandchildbutton['is_last']) ? ' class="last"' : '', '>', $grandchildbutton['title'], '</span>
 </a>
 </li>';

 echo '
 </ul>';
 }

 echo '
 </li>';
 }
 echo '
 </ul>';
 }
 echo '
 </li>';
 }

 echo '
 </ul>
 </div>';
}

index.css de en alta ekle
/* general styles */
.menu, .menu ul {
    list-style: none;
    padding: 0;
    margin: 0;
}
.menu {
    height: 40px;
}
.menu li {
    background: -moz-linear-gradient(#292929, #252525);
    background: -ms-linear-gradient(#292929, #252525);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #292929), color-stop(100%, #252525));
    background: -webkit-linear-gradient(#292929, #252525);
    background: -o-linear-gradient(#292929, #252525);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#292929', endColorstr='#252525');
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#292929', endColorstr='#252525')";
    background: linear-gradient(#292929, #252525);

    border-bottom: 2px solid #181818;
    border-top: 2px solid #303030;
 
}
.menu > li {
    display: block;
    float: left;
    position: relative;
}
.menu > li:first-child {
    border-radius: 5px 0 0;
}
.menu a {
    border-left: 3px solid rgba(0, 0, 0, 0);
    color: #808080;
    display: block;
    font-family: 'Lucida Console';
    font-size: 14px;
    line-height: 40px;
    padding: 0 25px;
    text-decoration: none;
    text-transform: uppercase;
}

/* onhover styles */
.menu li:hover {
    background-color: #1c1c1c;
    background: -moz-linear-gradient(#1c1c1c, #1b1b1b);
    background: -ms-linear-gradient(#1c1c1c, #1b1b1b);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #1c1c1c), color-stop(100%, #1b1b1b));
    background: -webkit-linear-gradient(#1c1c1c, #1b1b1b);
    background: -o-linear-gradient(#1c1c1c, #1b1b1b);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#1c1c1c', endColorstr='#1b1b1b');
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#1c1c1c', endColorstr='#1b1b1b')";
    background: linear-gradient(#1c1c1c, #1b1b1b);

    border-bottom: 2px solid #222222;
    border-top: 2px solid #1B1B1B;
}
.menu li:hover > a {
    border-radius: 5px 0 0 0;
    border-left: 3px solid #C4302B;
    color: #C4302B;
}

/* submenu styles ------------------------------------*/
.submenu {
    left: 0;
    max-height: 0;
    position: absolute;
    top: 100%;
    z-index: 0;

    -webkit-perspective: 400px;
    -moz-perspective: 400px;
    -ms-perspective: 400px;
    -o-perspective: 400px;
    perspective: 400px;
}
.submenu li {
    opacity: 0;

    -webkit-transform: rotateY(90deg);
    -moz-transform: rotateY(90deg);
    -ms-transform: rotateY(90deg);
    -o-transform: rotateY(90deg);
    transform: rotateY(90deg);

    -webkit-transition: opacity .4s, -webkit-transform .5s;
    -moz-transition: opacity .4s, -moz-transform .5s;
    -ms-transition: opacity .4s, -ms-transform .5s;
    -o-transition: opacity .4s, -o-transform .5s;
    transition: opacity .4s, transform .5s;
}
.menu .submenu li:hover a {
    border-left: 3px solid #454545;
    border-radius: 0;
    color: #ffffff;
}
.menu > li:hover .submenu, .menu > li:focus .submenu {
    max-height: 2000px;
    z-index: 10;
}
.menu > li:hover .submenu li, .menu > li:focus .submenu li {
    opacity: 1;

    -webkit-transform: none;
    -moz-transform: none;
    -ms-transform: none;
    -o-transform: none;
    transform: none;
}

/* CSS3 delays for transition effects---------------------------------------- */
.menu li:hover .submenu li:nth-child(1) {
    -webkit-transition-delay: 0s;
    -moz-transition-delay: 0s;
    -ms-transition-delay: 0s;
    -o-transition-delay: 0s;
    transition-delay: 0s;
}
.menu li:hover .submenu li:nth-child(2) {
    -webkit-transition-delay: 50ms;
    -moz-transition-delay: 50ms;
    -ms-transition-delay: 50ms;
    -o-transition-delay: 50ms;
    transition-delay: 50ms;
}
.menu li:hover .submenu li:nth-child(3) {
    -webkit-transition-delay: 100ms;
    -moz-transition-delay: 100ms;
    -ms-transition-delay: 100ms;
    -o-transition-delay: 100ms;
    transition-delay: 100ms;
}
.menu li:hover .submenu li:nth-child(4) {
    -webkit-transition-delay: 150ms;
    -moz-transition-delay: 150ms;
    -ms-transition-delay: 150ms;
    -o-transition-delay: 150ms;
    transition-delay: 150ms;
}
.menu li:hover .submenu li:nth-child(5) {
    -webkit-transition-delay: 200ms;
    -moz-transition-delay: 200ms;
    -ms-transition-delay: 200ms;
    -o-transition-delay: 200ms;
    transition-delay: 200ms;
}
.menu li:hover .submenu li:nth-child(6) {
    -webkit-transition-delay: 250ms;
    -moz-transition-delay: 250ms;
    -ms-transition-delay: 250ms;
    -o-transition-delay: 250ms;
    transition-delay: 250ms;
}
.menu li:hover .submenu li:nth-child(7) {
    -webkit-transition-delay: 300ms;
    -moz-transition-delay: 300ms;
    -ms-transition-delay: 300ms;
    -o-transition-delay: 300ms;
    transition-delay: 300ms;
}
.menu li:hover .submenu li:nth-child(8) {
    -webkit-transition-delay: 350ms;
    -moz-transition-delay: 350ms;
    -ms-transition-delay: 350ms;
    -o-transition-delay: 350ms;
    transition-delay: 350ms;
}

.submenu li:nth-child(1) {
    -webkit-transition-delay: 350ms;
    -moz-transition-delay: 350ms;
    -ms-transition-delay: 350ms;
    -o-transition-delay: 350ms;
    transition-delay: 350ms;
}
.submenu li:nth-child(2) {
    -webkit-transition-delay: 300ms;
    -moz-transition-delay: 300ms;
    -ms-transition-delay: 300ms;
    -o-transition-delay: 300ms;
    transition-delay: 300ms;
}
.submenu li:nth-child(3) {
    -webkit-transition-delay: 250ms;
    -moz-transition-delay: 250ms;
    -ms-transition-delay: 250ms;
    -o-transition-delay: 250ms;
    transition-delay: 250ms;
}
.submenu li:nth-child(4) {
    -webkit-transition-delay: 200ms;
    -moz-transition-delay: 200ms;
    -ms-transition-delay: 200ms;
    -o-transition-delay: 200ms;
    transition-delay: 200ms;
}
.submenu li:nth-child(5) {
    -webkit-transition-delay: 150ms;
    -moz-transition-delay: 150ms;
    -ms-transition-delay: 150ms;
    -o-transition-delay: 150ms;
    transition-delay: 150ms;
}
.submenu li:nth-child(6) {
    -webkit-transition-delay: 100ms;
    -moz-transition-delay: 100ms;
    -ms-transition-delay: 100ms;
    -o-transition-delay: 100ms;
    transition-delay: 100ms;
}
.submenu li:nth-child(7) {
    -webkit-transition-delay: 50ms;
    -moz-transition-delay: 50ms;
    -ms-transition-delay: 50ms;
    -o-transition-delay: 50ms;
    transition-delay: 50ms;
}
.submenu li:nth-child(8) {
    -webkit-transition-delay: 0s;
    -moz-transition-delay: 0s;
    -ms-transition-delay: 0s;
    -o-transition-delay: 0s;
    transition-delay: 0s;
}


5- smf menü

index.template.php de bul
// Show the menu up top. Something like [home] [help] [profile] [logout]...
function template_menu()
{
 global $context, $settings, $options, $scripturl, $txt;

 echo '
 <div id="main_menu">
 <ul class="dropmenu" id="menu_nav">';

 foreach ($context['menu_buttons'] as $act => $button)
 {
 echo '
 <li id="button_', $act, '">
 <a class="', $button['active_button'] ? 'active ' : '', 'firstlevel" href="', $button['href'], '"', isset($button['target']) ? ' target="' . $button['target'] . '"' : '', '>
 <span class="', isset($button['is_last']) ? 'last ' : '', 'firstlevel">', $button['title'], '</span>
 </a>';
 if (!empty($button['sub_buttons']))
 {
 echo '
 <ul>';

 foreach ($button['sub_buttons'] as $childbutton)
 {
 echo '
 <li>
 <a href="', $childbutton['href'], '"', isset($childbutton['target']) ? ' target="' . $childbutton['target'] . '"' : '', '>
 <span', isset($childbutton['is_last']) ? ' class="last"' : '', '>', $childbutton['title'], !empty($childbutton['sub_buttons']) ? '...' : '', '</span>
 </a>';
 // 3rd level menus :)
 if (!empty($childbutton['sub_buttons']))
 {
 echo '
 <ul>';

 foreach ($childbutton['sub_buttons'] as $grandchildbutton)
 echo '
 <li>
 <a href="', $grandchildbutton['href'], '"', isset($grandchildbutton['target']) ? ' target="' . $grandchildbutton['target'] . '"' : '', '>
 <span', isset($grandchildbutton['is_last']) ? ' class="last"' : '', '>', $grandchildbutton['title'], '</span>
 </a>
 </li>';

 echo '
 </ul>';
 }

 echo '
 </li>';
 }
 echo '
 </ul>';
 }
 echo '
 </li>';
 }

 echo '
 </ul>
 </div>';
}
değiştir
// Show the menu up top. Something like [home] [help] [profile] [logout]...
function template_menu()
{
 global $context, $settings, $options, $scripturl, $txt;

 echo '
 <nav class="Dark Green">
  <ul>';

 foreach ($context['menu_buttons'] as $act => $button)
 {
 echo '
 <li id="button_', $act, '">
 <a class="', $button['active_button'] ? 'active ' : '', 'firstlevel" href="', $button['href'], '"', isset($button['target']) ? ' target="' . $button['target'] . '"' : '', '>
 <span class="', isset($button['is_last']) ? 'last ' : '', 'firstlevel">', $button['title'], '</span>
 </a>';
 if (!empty($button['sub_buttons']))
 {
 echo '
 <ul style="display: none;">';

 foreach ($button['sub_buttons'] as $childbutton)
 {
 echo '
 <li>
 <a href="', $childbutton['href'], '"', isset($childbutton['target']) ? ' target="' . $childbutton['target'] . '"' : '', '>
 <span', isset($childbutton['is_last']) ? ' class="last"' : '', '>', $childbutton['title'], !empty($childbutton['sub_buttons']) ? '...' : '', '</span>
 </a>';
 // 3rd level menus :)
 if (!empty($childbutton['sub_buttons']))
 {
 echo '
 <ul>';

 foreach ($childbutton['sub_buttons'] as $grandchildbutton)
 echo '
 <li>
 <a href="', $grandchildbutton['href'], '"', isset($grandchildbutton['target']) ? ' target="' . $grandchildbutton['target'] . '"' : '', '>
 <span', isset($grandchildbutton['is_last']) ? ' class="last"' : '', '>', $grandchildbutton['title'], '</span>
 </a>
 </li>';

 echo '
 </ul>';
 }

 echo '
 </li>';
 }
 echo '
 </ul>';
 }
 echo '
 </li>';
 }

 echo '
 </ul>
</nav> ';
}
index.css de en alta ekle
/*Main Menu*/
nav { text-align: center;  height: 45px; }
nav ul {list-style-type: none; padding: 0 5px; margin: 0;}
nav ul li {margin: 0; display: block;}
nav ul li a{ font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif; font-size: 15px; text-decoration: none;
 border-radius: 6px 6px 0px 0px; height: 25px; padding: 10px 20px; margin-right: 5px; float: left;
 transform: translateY(0px);
 transition: All 0.4s ease; -moz-transform: translateY(0px);-webkit-transform: translateY(0px);
    -moz-box-shadow:inset 0px -3px 8px rgba(0, 0, 0, 0.2);
    -webkit-box-shadow:inset 0px -3px 8px rgba(0, 0, 0, 0.2);
    box-shadow:inset 0px -3px 8px rgba(0, 0, 0, 0.2);
}
nav ul li a:hover{
 height: 35px;
 transform: translateY(-10px); -moz-transform: translateY(-10px); -webkit-transform: translateY(-10px);
 -moz-box-shadow:inset 0px -3px 8px rgba(0, 0, 0, 0.2);
    -webkit-box-shadow:inset 0px -3px 8px rgba(0, 0, 0, 0.2);
    box-shadow:inset 0px -3px 8px rgba(0, 0, 0, 0.2);
}

/*Dark - Light*/
.Dark {border-bottom: 1px solid #333;}
.Dark ul li a {background-color: #333; color: #FFF; border-bottom: 1px solid rgba(255, 255, 255, 0)}
.Dark ul li a:hover {background-color: #333; color: #FFF; border-bottom: 1px solid rgba(255, 255, 255, 2)}
.Light {border-bottom: 1px solid #FFF;}
.Light ul li a {background-color: #FFF; color: #333; border-bottom: 1px solid rgba(50, 50, 50, 0)}
.Light ul li a:hover {background-color: #FFF; color: #333; border-bottom: 1px solid rgba(50, 50, 50, 2)}


/*Colors*/
.Red ul li a:hover{
 background-color: Red;
}
.Blue ul li a:hover{
 background-color: DeepSkyBlue;
}
.Green ul li a:hover{
 background-color: Green;
}
.Orange ul li a:hover{
 background-color: Orange;
}
.YellowGreen ul li a:hover{
 background-color: YellowGreen;
}
.Crimson ul li a:hover{
 background-color: Crimson;
}
.LightSeaGreen ul li a:hover{
 background-color: LightSeaGreen;
}
.SlateBlue  ul li a:hover{
 background-color: SlateBlue;
}

menümüz kullanıma hazır renk değşimi için
index.template.php içinde şu kısımı bulun
<nav class="Dark Green">Dark Green yazan yeri alttakilerden biri ile değiştirin hangi renk hoşunuza giderse artık
Dark Red
Dark Blue
Dark Orange
Dark YellowGreen
Dark Crimson
Dark LightSeaGreen
Dark SlateBlue



6- basit menü

index.template.php de bul
// Show the menu up top. Something like [home] [help] [profile] [logout]...
function template_menu()
{
 global $context, $settings, $options, $scripturl, $txt;

 echo '
 <div id="main_menu">
 <ul class="dropmenu" id="menu_nav">';

 foreach ($context['menu_buttons'] as $act => $button)
 {
 echo '
 <li id="button_', $act, '">
 <a class="', $button['active_button'] ? 'active ' : '', 'firstlevel" href="', $button['href'], '"', isset($button['target']) ? ' target="' . $button['target'] . '"' : '', '>
 <span class="', isset($button['is_last']) ? 'last ' : '', 'firstlevel">', $button['title'], '</span>
 </a>';
 if (!empty($button['sub_buttons']))
 {
 echo '
 <ul>';

 foreach ($button['sub_buttons'] as $childbutton)
 {
 echo '
 <li>
 <a href="', $childbutton['href'], '"', isset($childbutton['target']) ? ' target="' . $childbutton['target'] . '"' : '', '>
 <span', isset($childbutton['is_last']) ? ' class="last"' : '', '>', $childbutton['title'], !empty($childbutton['sub_buttons']) ? '...' : '', '</span>
 </a>';
 // 3rd level menus :)
 if (!empty($childbutton['sub_buttons']))
 {
 echo '
 <ul>';

 foreach ($childbutton['sub_buttons'] as $grandchildbutton)
 echo '
 <li>
 <a href="', $grandchildbutton['href'], '"', isset($grandchildbutton['target']) ? ' target="' . $grandchildbutton['target'] . '"' : '', '>
 <span', isset($grandchildbutton['is_last']) ? ' class="last"' : '', '>', $grandchildbutton['title'], '</span>
 </a>
 </li>';

 echo '
 </ul>';
 }

 echo '
 </li>';
 }
 echo '
 </ul>';
 }
 echo '
 </li>';
 }

 echo '
 </ul>
 </div>';
}
değiştir
// Show the menu up top. Something like [home] [help] [profile] [logout]...
function template_menu()
{
 global $context, $settings, $options, $scripturl, $txt;

 echo '
 <ul id="nav" class="dropdown dropdown-linear">';

 foreach ($context['menu_buttons'] as $act => $button)
 {
 echo '
 <li id="button_', $act, '">
 <a class="', $button['active_button'] ? 'active ' : '', 'firstlevel" href="', $button['href'], '"', isset($button['target']) ? ' target="' . $button['target'] . '"' : '', '>
 <span class="', isset($button['is_last']) ? 'last ' : '', 'firstlevel">', $button['title'], '</span>
 </a>';
 if (!empty($button['sub_buttons']))
 {
 echo '
 <ul>';

 foreach ($button['sub_buttons'] as $childbutton)
 {
 echo '
 <li>
 <a href="', $childbutton['href'], '"', isset($childbutton['target']) ? ' target="' . $childbutton['target'] . '"' : '', '>
 <span', isset($childbutton['is_last']) ? ' class="last"' : '', '>', $childbutton['title'], !empty($childbutton['sub_buttons']) ? '...' : '', '</span>
 </a>';
 // 3rd level menus :)
 if (!empty($childbutton['sub_buttons']))
 {
 echo '
 <ul>';

 foreach ($childbutton['sub_buttons'] as $grandchildbutton)
 echo '
 <li>
 <a href="', $grandchildbutton['href'], '"', isset($grandchildbutton['target']) ? ' target="' . $grandchildbutton['target'] . '"' : '', '>
 <span', isset($grandchildbutton['is_last']) ? ' class="last"' : '', '>', $grandchildbutton['title'], '</span>
 </a>
 </li>';

 echo '
 </ul>';
 }

 echo '
 </li>';
 }
 echo '
 </ul>';
 }
 echo '
 </li>';
 }

 echo '
 </ul>';
}
index.css de en alta ekle
ul.dropdown {
 padding-bottom: 1px;
 font: bold 13px/normal Arial, Helvetica, sans-serif;
}

 ul.dropdown li {
 padding: 4px 6px;
 color: #0063dc;
 }

 ul.dropdown li.divider {
 border-top: solid 1px #e5e5e5;
 }

 ul.dropdown li.hover,
 ul.dropdown li:hover {
 color: #0063dc;
 }

 ul.dropdown a:link,
 ul.dropdown a:visited { color: #0063dc; text-decoration: none; }
 ul.dropdown a:hover { color: #0063dc; text-decoration: underline; }
 ul.dropdown a:active { color: #ff0084; }

 /* -- level mark -- */

 ul.dropdown ul {
 width: 150px;
 padding: 3px 6px;
 border-style: solid;
 border-width: 1px;
 border-color: #f0f0f0 #666 #666 #f0f0f0;
 background-color: #fff;
 font-weight: normal;
 font-size: 11px;
 }


/* -- Supporting class `dir` -- */

ul.dropdown *.dir {
 padding-right: 25px;
 background-position: 95% 50%;
 background-repeat: no-repeat;
}


/* -- Components override -- */

ul.dropdown-vertical ul {
 top: 0;
 left: 100%;
}

ul.dropdown-vertical-rtl ul {
 right: 100%;
}

ul.dropdown-horizontal,
ul.dropdown-linear,
ul.dropdown-upward {
 width: 100%;
}


ul.dropdown,
ul.dropdown li,
ul.dropdown ul {
 list-style: none;
 margin: 0;
 padding: 0;
}

ul.dropdown {
 position: relative;
 z-index: 597;
 float: left;
}

ul.dropdown li {
 float: left;
 min-height: 1px;
 line-height: 1.3em;
 vertical-align: middle;
}

ul.dropdown li.hover,
ul.dropdown li:hover {
 position: relative;
 z-index: 599;
 cursor: default;
}

ul.dropdown ul {
 visibility: hidden;
 position: absolute;
 top: 100%;
 left: 0;
 z-index: 598;
 width: 100%;
}

ul.dropdown ul li {
 float: none;
}

ul.dropdown ul ul {
 top: 1px;
 left: 99%;
}

ul.dropdown li:hover > ul {
 visibility: visible;
}

ul.dropdown-linear {
 width: 100%;
}

ul.dropdown-linear ul li {
 float: left;
}

ul.dropdown-linear li.hover,
ul.dropdown-linear li:hover {
 position: static;
}

ul.dropdown-linear ul ul {
 display: none !important;
}

ul.dropdown a,
ul.dropdown span {
 display: block;
 padding: 4px 6px;
}

ul.dropdown ul a,
ul.dropdown ul span {
 padding: 4px 0;
 margin-left: 5px;
}


/* -- Base style override -- */

ul.dropdown li {
 padding: 0;
 border: none;
}


/* -- Custom styles -- */

ul.dropdown li a,
ul.dropdown *.dir {
 border-style: solid;
 border-width: 1px 1px 0;
 border-color: #fff;
}

ul.dropdown ul li a,
ul.dropdown ul *.dir {
 border: none;
}

ul.dropdown-vertical li a,
ul.dropdown-vertical *.dir {
 border-width: 1px 0 1px 1px;
}

ul.dropdown-vertical-rtl li a,
ul.dropdown-vertical-rtl *.dir {
 border-width: 1px 1px 1px 0;
}


/* -- Drop-down open -- */

ul.dropdown li:hover > *.dir {
 position: relative;
 z-index: 600;
 margin: -1px 0;
 padding-top: 5px;
 padding-bottom: 5px;
 border-color: #f0f0f0 #666 #666 #f0f0f0;
 background-color: #fff;

 color: #0063dc;
}

ul.dropdown-horizontal li:hover > *.dir,
ul.dropdown-upward li:hover > *.dir,
ul.dropdown-linear li:hover > *.dir {
 float: left;
}

ul.dropdown-vertical li:hover > *.dir {
 margin: 0 -1px 0 0;
 padding-top: 4px;
 padding-bottom: 4px;
 padding-right: 7px;
 *position: static;
}

ul.dropdown-vertical-rtl li:hover > *.dir {
 margin: 0 0 0 -1px;
 padding-right: 6px;
 padding-left: 7px;
}

ul.dropdown-vertical-rtl > li:hover > *.dir {
 background-position: 6px 50%;
}

ul.dropdown-vertical ul li:hover > *.dir {
 padding-right: 0;
 padding-left: 0;
}

ul.dropdown ul li:hover > *.dir {
 position: static;
 z-index: 0;
 float: none;
 margin: 0;
 padding-top: 4px;
 padding-bottom: 4px;
 border: none;
}





7- Nvidia menü

index.template.php de bul
// Show the menu up top. Something like [home] [help] [profile] [logout]...
function template_menu()
{
 global $context, $settings, $options, $scripturl, $txt;

 echo '
 <div id="main_menu">
 <ul class="dropmenu" id="menu_nav">';

 foreach ($context['menu_buttons'] as $act => $button)
 {
 echo '
 <li id="button_', $act, '">
 <a class="', $button['active_button'] ? 'active ' : '', 'firstlevel" href="', $button['href'], '"', isset($button['target']) ? ' target="' . $button['target'] . '"' : '', '>
 <span class="', isset($button['is_last']) ? 'last ' : '', 'firstlevel">', $button['title'], '</span>
 </a>';
 if (!empty($button['sub_buttons']))
 {
 echo '
 <ul>';

 foreach ($button['sub_buttons'] as $childbutton)
 {
 echo '
 <li>
 <a href="', $childbutton['href'], '"', isset($childbutton['target']) ? ' target="' . $childbutton['target'] . '"' : '', '>
 <span', isset($childbutton['is_last']) ? ' class="last"' : '', '>', $childbutton['title'], !empty($childbutton['sub_buttons']) ? '...' : '', '</span>
 </a>';
 // 3rd level menus :)
 if (!empty($childbutton['sub_buttons']))
 {
 echo '
 <ul>';

 foreach ($childbutton['sub_buttons'] as $grandchildbutton)
 echo '
 <li>
 <a href="', $grandchildbutton['href'], '"', isset($grandchildbutton['target']) ? ' target="' . $grandchildbutton['target'] . '"' : '', '>
 <span', isset($grandchildbutton['is_last']) ? ' class="last"' : '', '>', $grandchildbutton['title'], '</span>
 </a>
 </li>';

 echo '
 </ul>';
 }

 echo '
 </li>';
 }
 echo '
 </ul>';
 }
 echo '
 </li>';
 }

 echo '
 </ul>
 </div>';
}
değiştir
// Show the menu up top. Something like [home] [help] [profile] [logout]...
function template_menu()
{
 global $context, $settings, $options, $scripturl, $txt;

 echo '
 <ul class="dropdown dropdown-horizontal">';

 foreach ($context['menu_buttons'] as $act => $button)
 {
 echo '
 <li id="button_', $act, '">
 <a class="', $button['active_button'] ? 'active ' : '', 'firstlevel" href="', $button['href'], '"', isset($button['target']) ? ' target="' . $button['target'] . '"' : '', '>
 <span class="', isset($button['is_last']) ? 'last ' : '', 'firstlevel">', $button['title'], '</span>
 </a>';
 if (!empty($button['sub_buttons']))
 {
 echo '
 <ul>';

 foreach ($button['sub_buttons'] as $childbutton)
 {
 echo '
 <li>
 <a href="', $childbutton['href'], '"', isset($childbutton['target']) ? ' target="' . $childbutton['target'] . '"' : '', '>
 <span', isset($childbutton['is_last']) ? ' class="last"' : '', '>', $childbutton['title'], !empty($childbutton['sub_buttons']) ? '...' : '', '</span>
 </a>';
 // 3rd level menus :)
 if (!empty($childbutton['sub_buttons']))
 {
 echo '
 <ul>';

 foreach ($childbutton['sub_buttons'] as $grandchildbutton)
 echo '
 <li>
 <a href="', $grandchildbutton['href'], '"', isset($grandchildbutton['target']) ? ' target="' . $grandchildbutton['target'] . '"' : '', '>
 <span', isset($grandchildbutton['is_last']) ? ' class="last"' : '', '>', $grandchildbutton['title'], '</span>
 </a>
 </li>';

 echo '
 </ul>';
 }

 echo '
 </li>';
 }
 echo '
 </ul>';
 }
 echo '
 </li>';
 }

 echo '
 </ul>';
}
index.css de en alta ekle
ul.dropdown,
ul.dropdown li,
ul.dropdown ul {
 list-style: none;
 margin: 0;
 padding: 0;
}

ul.dropdown {
 position: relative;
 z-index: 597;
 float: left;
}

ul.dropdown li {
 float: left;
 min-height: 1px;
 line-height: 1.3em;
 vertical-align: middle;
}

ul.dropdown li.hover,
ul.dropdown li:hover {
 position: relative;
 z-index: 599;
 cursor: default;
}

ul.dropdown ul {
 visibility: hidden;
 position: absolute;
 top: 100%;
 left: 0;
 z-index: 598;
 width: 100%;
}

ul.dropdown ul li {
 float: none;
}

ul.dropdown ul ul {
 top: 1px;
 left: 99%;
}

ul.dropdown li:hover > ul {
 visibility: visible;
}

ul.dropdown {
 font: normal 12px "Trebuchet MS", Arial, Helvetica, sans-serif;
 text-transform: uppercase;
}

 ul.dropdown li {
 padding: 7px 0;
 background-color: #000;
 color: #fff;
 line-height: normal;
 }

 ul.dropdown a:link,
 ul.dropdown a:visited { color: #fff; text-decoration: none; }
 ul.dropdown a:hover { color: #76b900; text-decoration: none; }
 ul.dropdown a:active { color: #fff; }

 /* -- level mark -- */

 ul.dropdown ul {
 width: 170px;
 background-color: #333;
 color: #fff;
 font-size: 11px;
 text-transform: none;
 filter: alpha(opacity=90);
 -moz-opacity: .9;
 KhtmlOpacity: .9;
 opacity: .9;
 }

 ul.dropdown ul li {
 background-color: transparent;
 color: #000;
 filter: none;
 }

 ul.dropdown ul li.hover,
 ul.dropdown ul li:hover {
 background-color: transparent;
 }

 ul.dropdown ul a:link,
 ul.dropdown ul a:visited { color: #fff; }
 ul.dropdown ul a:hover { color: #fff; text-decoration: none; }
 ul.dropdown ul a:active { color: #fff; }


/* -- Supporting class `dir` -- */

ul.dropdown *.dir {
 padding-right: 12px;
 background-image: none;
 background-position: 100% 50%;
 background-repeat: no-repeat;
}

ul.dropdown li a {
 display: block;
 padding: 7px 14px;
}


/* -- Base style override -- */

ul.dropdown li {
 padding: 0;
}


/* -- Base style reinitiate: post-override activities -- */

ul.dropdown li.dir {
 padding: 7px 20px 7px 14px;
}

ul.dropdown ul li.dir {
 padding-right: 15px;
}


/* -- Custom -- */

ul.dropdown ul a {
 padding: 4px 5px 4px 14px;
 width: 151px; /* Especially for IE */
}

ul.dropdown ul a:hover {
 background-color: #76b900;
}


/* -- Drop-down open -- */

ul.dropdown li:hover > a.dir {
 background-color: #2e2e2e;
 color: #76b900;
}

ul.dropdown ul li:hover > a.dir {
 background-color: #76b900;
 color: #fff;
}




8- vimeo menü

http://yadi.sk/d/ssLuCz6nKMMp5
burdan indirdiğiniz resimleri temanızın images klasörüne atın
index.template.php de bul
// Show the menu up top. Something like [home] [help] [profile] [logout]...
function template_menu()
{
 global $context, $settings, $options, $scripturl, $txt;

 echo '
 <div id="main_menu">
 <ul class="dropmenu" id="menu_nav">';

 foreach ($context['menu_buttons'] as $act => $button)
 {
 echo '
 <li id="button_', $act, '">
 <a class="', $button['active_button'] ? 'active ' : '', 'firstlevel" href="', $button['href'], '"', isset($button['target']) ? ' target="' . $button['target'] . '"' : '', '>
 <span class="', isset($button['is_last']) ? 'last ' : '', 'firstlevel">', $button['title'], '</span>
 </a>';
 if (!empty($button['sub_buttons']))
 {
 echo '
 <ul>';

 foreach ($button['sub_buttons'] as $childbutton)
 {
 echo '
 <li>
 <a href="', $childbutton['href'], '"', isset($childbutton['target']) ? ' target="' . $childbutton['target'] . '"' : '', '>
 <span', isset($childbutton['is_last']) ? ' class="last"' : '', '>', $childbutton['title'], !empty($childbutton['sub_buttons']) ? '...' : '', '</span>
 </a>';
 // 3rd level menus :)
 if (!empty($childbutton['sub_buttons']))
 {
 echo '
 <ul>';

 foreach ($childbutton['sub_buttons'] as $grandchildbutton)
 echo '
 <li>
 <a href="', $grandchildbutton['href'], '"', isset($grandchildbutton['target']) ? ' target="' . $grandchildbutton['target'] . '"' : '', '>
 <span', isset($grandchildbutton['is_last']) ? ' class="last"' : '', '>', $grandchildbutton['title'], '</span>
 </a>
 </li>';

 echo '
 </ul>';
 }

 echo '
 </li>';
 }
 echo '
 </ul>';
 }
 echo '
 </li>';
 }

 echo '
 </ul>
 </div>';
}
değiştir
// Show the menu up top. Something like [home] [help] [profile] [logout]...
function template_menu()
{
 global $context, $settings, $options, $scripturl, $txt;

 echo '
 <ul id="nav" class="dropdown dropdown-horizontal"><li class="first"></li>';

 foreach ($context['menu_buttons'] as $act => $button)
 {
 echo '
 <li id="button_', $act, '">
 <a class="', $button['active_button'] ? 'active ' : '', 'firstlevel" href="', $button['href'], '"', isset($button['target']) ? ' target="' . $button['target'] . '"' : '', '>
 <span class="', isset($button['is_last']) ? 'last ' : '', 'firstlevel">', $button['title'], '</span>
 </a>';
 if (!empty($button['sub_buttons']))
 {
 echo '
 <ul>';

 foreach ($button['sub_buttons'] as $childbutton)
 {
 echo '
 <li>
 <a href="', $childbutton['href'], '"', isset($childbutton['target']) ? ' target="' . $childbutton['target'] . '"' : '', '>
 <span', isset($childbutton['is_last']) ? ' class="last"' : '', '>', $childbutton['title'], !empty($childbutton['sub_buttons']) ? '...' : '', '</span>
 </a>';
 // 3rd level menus :)
 if (!empty($childbutton['sub_buttons']))
 {
 echo '
 <ul>';

 foreach ($childbutton['sub_buttons'] as $grandchildbutton)
 echo '
 <li>
 <a href="', $grandchildbutton['href'], '"', isset($grandchildbutton['target']) ? ' target="' . $grandchildbutton['target'] . '"' : '', '>
 <span', isset($grandchildbutton['is_last']) ? ' class="last"' : '', '>', $grandchildbutton['title'], '</span>
 </a>
 </li>';

 echo '
 </ul>';
 }

 echo '
 </li>';
 }
 echo '
 </ul>';
 }
 echo '
 </li>';
 }

 echo '
 <li class="dir last"></li></ul>';
}
index.css de en alta ekle
ul.dropdown,
ul.dropdown li,
ul.dropdown ul {
 list-style: none;
 margin: 0;
 padding: 0;
}

ul.dropdown {
 position: relative;
 z-index: 597;
 float: left;
}

ul.dropdown li {
 float: left;
 min-height: 1px;
 line-height: 1.3em;
 vertical-align: middle;
}

ul.dropdown li.hover,
ul.dropdown li:hover {
 position: relative;
 z-index: 599;
 cursor: default;
}

ul.dropdown ul {
 visibility: hidden;
 position: absolute;
 top: 100%;
 left: 0;
 z-index: 598;
 width: 100%;
}

ul.dropdown ul li {
 float: none;
}

ul.dropdown ul ul {
 top: 1px;
 left: 99%;
}

ul.dropdown li:hover > ul {
 visibility: visible;
}

ul.dropdown {
 background: transparent url(../images/box1-bottom-left.png) 0 100% no-repeat;
 font: normal 14px/normal Tahoma, Verdana, Arial, Helvetica, sans-serif;
}

 ul.dropdown li {
 padding: 5px 10px;
 background-color: #172322;
 color: #fff;
 line-height: 22px;
 white-space: nowrap;
 }

 ul.dropdown li.first {
 padding-left: 15px;
 background: transparent url(../images/box1-bottom2.png) 0 100% no-repeat;
 height: 32px;
 }

 ul.dropdown li.last {
 padding-right: 15px;
 background: transparent url(../images/box1-bottom2.png) 100% 100% no-repeat;
 height: 22px;
 }

 ul.dropdown li.hover,
 ul.dropdown li:hover {
 color: #b0d730;
 }

 ul.dropdown a:link,
 ul.dropdown a:visited { color: #fff; text-decoration: none; }
 ul.dropdown a:hover { color: #b0d730; }
 ul.dropdown a:active { color: #0395cc; }

 /* -- level mark -- */

 ul.dropdown ul {
 left: -21px;
 width: 150px;
 padding: 0 16px;
 background: url(../images/box1-top.png) 50% 0 no-repeat;
 }

 ul.dropdown li.last ul {
 left: auto;
 right: 16px;
 }

 ul.dropdown ul li {
 height: auto;
 padding: 5px 15px;
 line-height: 1.3em;
 white-space: normal;
 }

 ul.dropdown ul li.first {
 padding-left: 0;
 background: #172322;
 }

 ul.dropdown ul li.last {
 padding-bottom: 10px;
 background: transparent url(../images/box1-bottom.png) 50% 100% no-repeat;
 }

 ul.dropdown ul li.first ul {
 top: 0;
 padding: 0 16px 0 0;
 background-image: url(../images/box1-outwards-top-right.png);
 }

 ul.dropdown ul li.first li.first {
 background-image: none;
 }

 ul.dropdown ul li.last {
 padding-right: 0;
 }

 ul.dropdown ul li.last ul {
 left: 100%;
 right: auto;
 top: -16px;
 }

 /* -- level mark -- */

 ul.dropdown ul ul {
 top: -12px;
 left: 100%;
 padding: 16px 0 0;
 background: transparent url(../images/box1-top-left.png) 0 0 no-repeat;
 }

 ul.dropdown ul ul li.first {
 padding-top: 10px;
 background: #172322 url(../images/box1-top-right.png) 100% 0 no-repeat;
 }



/* -- Supporting class `dir` -- */

ul.dropdown *.dir {
 padding-right: 20px;
 background-image: url(../images/nav-arrow-down.png);
 background-position: 100% 50%;
 background-repeat: no-repeat;
}


/* -- Components override -- */

ul.dropdown-horizontal ul *.dir {
 padding-right: 15px;
 background-image: url(../images/nav-arrow-right.png);
 background-position: 95% 50%;
 background-repeat: no-repeat;
}

ul.dropdown li a {
 display: block;
 padding: 5px 10px;
}


/* -- Base style override -- */

ul.dropdown li, ul.dropdown ul li {
 padding: 0;
}


/* -- Base style reinitiate: post-override activities -- */

ul.dropdown li.dir {
 padding: 5px 20px 5px 10px;
}

ul.dropdown ul li.dir {
 padding: 5px 15px;
}


/* -- Custom -- */

ul.dropdown ul a {
 padding-left: 15px;
}


/* -- Drop-down open -- */

ul.dropdown li:hover > *.dir {
 color: #b0d730;
}



9- retro menü
[IMG]http://snrj.eu5.org/uploads/2014/03/retro.jpg[/img]
index.template.php de bul
// Show the menu up top. Something like [home] [help] [profile] [logout]...
function template_menu()
{
global $context, $settings, $options, $scripturl, $txt;

echo '
<div id="main_menu">
<ul class="dropmenu" id="menu_nav">';

foreach ($context['menu_buttons'] as $act => $button)
{
echo '
<li id="button_', $act, '">
<a class="', $button['active_button'] ? 'active ' : '', 'firstlevel" href="', $button['href'], '"', isset($button['target']) ? ' target="' . $button['target'] . '"' : '', '>
<span class="', isset($button['is_last']) ? 'last ' : '', 'firstlevel">', $button['title'], '</span>
</a>';
if (!empty($button['sub_buttons']))
{
echo '
<ul>';

foreach ($button['sub_buttons'] as $childbutton)
{
echo '
<li>
<a href="', $childbutton['href'], '"', isset($childbutton['target']) ? ' target="' . $childbutton['target'] . '"' : '', '>
<span', isset($childbutton['is_last']) ? ' class="last"' : '', '>', $childbutton['title'], !empty($childbutton['sub_buttons']) ? '...' : '', '</span>
</a>';
// 3rd level menus :)
if (!empty($childbutton['sub_buttons']))
{
echo '
<ul>';

foreach ($childbutton['sub_buttons'] as $grandchildbutton)
echo '
<li>
<a href="', $grandchildbutton['href'], '"', isset($grandchildbutton['target']) ? ' target="' . $grandchildbutton['target'] . '"' : '', '>
<span', isset($grandchildbutton['is_last']) ? ' class="last"' : '', '>', $grandchildbutton['title'], '</span>
</a>
</li>';

echo '
</ul>';
}

echo '
</li>';
}
echo '
</ul>';
}
echo '
</li>';
}

echo '
</ul>
</div>';
}
değiştir
// Show the menu up top. Something like [home] [help] [profile] [logout]...
function template_menu()
{
global $context, $settings, $options, $scripturl, $txt;

echo '
<ul class="nav">';

foreach ($context['menu_buttons'] as $act => $button)
{
echo '
<li id="button_', $act, '">
<a class="', $button['active_button'] ? 'active ' : '', 'firstlevel" href="', $button['href'], '"', isset($button['target']) ? ' target="' . $button['target'] . '"' : '', '>
<span class="', isset($button['is_last']) ? 'last ' : '', 'firstlevel">', $button['title'], '</span>
</a>';
if (!empty($button['sub_buttons']))
{
echo '
<ul>';

foreach ($button['sub_buttons'] as $childbutton)
{
echo '
<li>
<a href="', $childbutton['href'], '"', isset($childbutton['target']) ? ' target="' . $childbutton['target'] . '"' : '', '>
<span', isset($childbutton['is_last']) ? ' class="last"' : '', '>', $childbutton['title'], !empty($childbutton['sub_buttons']) ? '...' : '', '</span>
</a>';
// 3rd level menus :)
if (!empty($childbutton['sub_buttons']))
{
echo '
<ul>';

foreach ($childbutton['sub_buttons'] as $grandchildbutton)
echo '
<li>
<a href="', $grandchildbutton['href'], '"', isset($grandchildbutton['target']) ? ' target="' . $grandchildbutton['target'] . '"' : '', '>
<span', isset($grandchildbutton['is_last']) ? ' class="last"' : '', '>', $grandchildbutton['title'], '</span>
</a>
</li>';

echo '
</ul>';
}

echo '
</li>';
}
echo '
</ul>';
}
echo '
</li>';
}

echo '
</ul>
';
}
index.css de en alta ekle
.nav, .nav ul {
margin: 0;
padding: 0;
list-style: none;
line-height: 1;
}

.nav {
/* Layout & positioning */
position: relative;
margin: auto; /* Centering the menu */
height: 46px;
width: 95%;
text-align: center;
border-radius: 5px;
/* Background & effects */
box-shadow: 0 1px 2px rgba(0, 0, 0, .3);
background: #557EA0;

}


.nav>li {
margin: 0;
line-height: 1;
padding: 0;
display: inline;
position: relative;

}

.nav::after, .nav::before {
content: "";
display: block;
position: absolute;
top: 6px;
height: 0px;
width: 0px;
border: 23px solid #557EA0;
z-index: -1;
}

/* The left ribbon */
.nav::before {
border-left-color: transparent;
left: -30px;z-index: 1;
}

/* The right ribbon */
.nav::after {
border-right-color: transparent;
right: -30px;z-index: 1;
}

.nav>li>a {
display: inline-block;
padding: 15px 20px;
position: relative;

font-family: 'Oswald', sans-serif;
font-size: 16px;
text-transform: uppercase;
text-decoration: none;
color: #fff;
text-shadow: 1px 2px rgba(0, 0, 0, .2);

-webkit-transition: color .3s linear;
   -moz-transition: color .3s linear;
     -o-transition: color .3s linear;
    -ms-transition: color .3s linear;
        transition: color .3s linear;
}

.nav>li>a:hover, .nav>li:hover>a {
color: #eae8a5;
}

.nav>li>a::after {
content: "";
height: 15px;
width: 15px;

position: absolute;
right: -20px;
top: 16px;
display: block;
}

.nav>li:last-child>a::after {
display: none;
}

.nav ul {
position: absolute;
left: -9999px;
padding-top: 10px;
border-bottom: 1px solid #ccc;
opacity: 0;
-webkit-transition: opacity .3s linear;
-moz-transition: opacity .3s linear;
-o-transition: opacity .3s linear;
-ms-transition: opacity .3s linear;
}

.nav>li:hover>ul {
left: 0;
opacity: 1;
top: 30px;
}


.nav ul li:hover>ul {
left: 150px;
opacity: 1;
top: -11px;
padding-left: 12px;
border-bottom: 0;
box-shadow: none;
}

.nav ul li {
display: block;
position: relative;
border-top: 1px solid #ccc;
border-left: 1px solid #ccc;
border-right: 1px solid #ccc;
width: 150px;
text-align: justify;
z-index: 9;
background: #eee;
box-shadow: 3px 4px 0 rgba(0, 0, 0, .1);
-webkit-transition: background .3s linear;
-moz-transition: background .3s linear;
-ms-transition: background .3s linear;
-o-transition: background .3s linear;
}

.nav ul li a {
font-family: "Oswald", sans-serif;
font-size: 14px;
text-decoration: none;
display: block;
padding: 7px 12px 7px 20px;
color: #65c0bb;
-webkit-transition: color .3s linear;
-moz-transition: color .3s linear;
-ms-transition: color .3s linear;
-o-transition: color .3s linear;
}

.nav ul li:hover>a, .nav ul li a:hover {
color: #4db6b0;
}

.nav ul li:hover {
background: #f7f7f7;
}

.nav ul ul li:last-child {
border-bottom: 1px solid #ccc;
}

.nav ul ul li {
box-shadow: 3px 3px 0 rgba(0, 0, 0, .1);
}

.nav ul::after, .nav ul::before {
content: "";
display: block;
z-index: 1;
position: absolute;
height: 9px;
width: 9px;
}

.nav>li>ul::after {
border: 1px solid #ccc;
background: #eee;
border-right: 0;
border-bottom: 0;
top: 5px;
left: 25px;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-o-transform: rotate(45deg);
-ms-transform: rotate(45deg);
}

.nav>li>ul::before {
height: 1px;
width: 12px;
background: #eee;
border-right: 0;
border-bottom: 0;
top: 10px;
left: 24px;
z-index: 99;
}

.nav ul ul::after {
border: 1px solid #ccc;
background: #eee;
border-right: 0;
border-bottom: 0;
top: 20px;
left: 8px;
position: absolute;
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
}

.nav ul ul::before {
height: 10px;
width: 1px;
background: #eee;
z-index: 99;
top: 20px;
left: 12px;
}



10- css menü

resim dosyaları indirin images klasörüne atın = http://yadi.sk/d/NnDgHzEKKqKD2
index.template.php de bul
// Show the menu up top. Something like [home] [help] [profile] [logout]...
function template_menu()
{
 global $context, $settings, $options, $scripturl, $txt;

 echo '
 <div id="main_menu">
 <ul class="dropmenu" id="menu_nav">';

 foreach ($context['menu_buttons'] as $act => $button)
 {
 echo '
 <li id="button_', $act, '">
 <a class="', $button['active_button'] ? 'active ' : '', 'firstlevel" href="', $button['href'], '"', isset($button['target']) ? ' target="' . $button['target'] . '"' : '', '>
 <span class="', isset($button['is_last']) ? 'last ' : '', 'firstlevel">', $button['title'], '</span>
 </a>';
 if (!empty($button['sub_buttons']))
 {
 echo '
 <ul>';

 foreach ($button['sub_buttons'] as $childbutton)
 {
 echo '
 <li>
 <a href="', $childbutton['href'], '"', isset($childbutton['target']) ? ' target="' . $childbutton['target'] . '"' : '', '>
 <span', isset($childbutton['is_last']) ? ' class="last"' : '', '>', $childbutton['title'], !empty($childbutton['sub_buttons']) ? '...' : '', '</span>
 </a>';
 // 3rd level menus :)
 if (!empty($childbutton['sub_buttons']))
 {
 echo '
 <ul>';

 foreach ($childbutton['sub_buttons'] as $grandchildbutton)
 echo '
 <li>
 <a href="', $grandchildbutton['href'], '"', isset($grandchildbutton['target']) ? ' target="' . $grandchildbutton['target'] . '"' : '', '>
 <span', isset($grandchildbutton['is_last']) ? ' class="last"' : '', '>', $grandchildbutton['title'], '</span>
 </a>
 </li>';

 echo '
 </ul>';
 }

 echo '
 </li>';
 }
 echo '
 </ul>';
 }
 echo '
 </li>';
 }

 echo '
 </ul>
 </div>';
}
değiştir
// Show the menu up top. Something like [home] [help] [profile] [logout]...
function template_menu()
{
 global $context, $settings, $options, $scripturl, $txt;

 echo '
 <div id="menu">
    <ul class="menu">';

 foreach ($context['menu_buttons'] as $act => $button)
 {
 echo '
 <li id="button_', $act, '">
 <a class="', $button['active_button'] ? 'active ' : '', 'firstlevel" href="', $button['href'], '"', isset($button['target']) ? ' target="' . $button['target'] . '"' : '', '>
 <span class="', isset($button['is_last']) ? 'last ' : '', 'firstlevel">', $button['title'], '</span>
 </a>';
 if (!empty($button['sub_buttons']))
 {
 echo '
 <div><ul>';

 foreach ($button['sub_buttons'] as $childbutton)
 {
 echo '
 <li>
 <a href="', $childbutton['href'], '"', isset($childbutton['target']) ? ' target="' . $childbutton['target'] . '"' : '', '>
 <span', isset($childbutton['is_last']) ? ' class="last"' : '', '>', $childbutton['title'], !empty($childbutton['sub_buttons']) ? '...' : '', '</span>
 </a>';
 // 3rd level menus :)
 if (!empty($childbutton['sub_buttons']))
 {
 echo '
 <ul>';

 foreach ($childbutton['sub_buttons'] as $grandchildbutton)
 echo '
 <li>
 <a href="', $grandchildbutton['href'], '"', isset($grandchildbutton['target']) ? ' target="' . $grandchildbutton['target'] . '"' : '', '>
 <span', isset($grandchildbutton['is_last']) ? ' class="last"' : '', '>', $grandchildbutton['title'], '</span>
 </a>
 </li>';

 echo '
 </ul>';
 }

 echo '
 </li>';
 }
 echo '
 <div></ul>';
 }
 echo '
 </li>';
 }

 echo '
 </ul>
 </div>';
}


index.css de en alta ekle
div#menu {
    height: 46px;
    padding-left: 24px;
    background: url(../images/menu/left.png) no-repeat;
    _background: url(../images/menu/left.gif) no-repeat;
    width:auto;
}

div#menu ul {
    margin: 0;
    padding: 0;
    list-style: none;
    float: left;
}
div#menu ul.menu {
    padding-right: 24px;
    background: url(../images/menu/right.png) no-repeat right 0;
    _background: url(../images/menu/right.gif) no-repeat right 0;   
}

div#menu li {
    position: relative;
    margin: 0;
    padding: 0;
    display: block;
    float: left;
    z-index: 9;
    width: auto;
}
div#menu ul ul li {
    z-index: 9;
}
div#menu li div {
    list-style: none;
    float: left;
    position: absolute;
    z-index: 11;
    top: 39px;
    left: -18px;
    -left: 4px;
    visibility: hidden;
    width: 180px;
  margin: 0px 0 0 -4px;
    padding: 0;
    background: url(../images/menu/submenu-top.png) no-repeat 0px 0;
    -background: url(../images/menu/submenu-top.gif) no-repeat 0px 0;
}
div#menu ul ul {
  z-index: 12;
  width: 180px;
    padding: 0px 0px 12px 0px;
    -padding: 0px 0px 3px 0px;   
    background: url(../images/menu/submenu-bottom.png) no-repeat 0px bottom;
    -background: #E4E4E2 none;       
    margin: 14px 0 0 0;   
    -margin: 5px 0 0 0;     
}
div#menu li:hover>div {
    visibility: visible;
}

div#menu a {
    position: relative;
    z-index: 10;
    height: 38px;
    display: block;
    float: left;
    line-height: 38px;
    text-decoration: none;
    margin-top: 1px;
    white-space: nowrap;
    width: auto;
    padding-right:5px;
    text-align:center;
}
div#menu span {
    margin-top: 2px;
    padding-left: 15px;
    color: #fff;
    font: normal 13px Tahoma;
    background: none;
    line-height: 38px;
    display: block;
    cursor: pointer;
    background-repeat: no-repeat;
    background-position: 95% 0;
    text-align: center;
}

/* menu::level1 */
div#menu a {
    padding: 0 15px 0 0;
    line-height: 38px;
    height: 46px;
    _margin-right: 1px;
    background: none;
    font-weight:bold;   

}
div#menu span {
    font-weight:bold;
}
div#menu a:hover{
    background-image: url(../images/menu/selected-sub.png);
    background-repeat: repeat-x;
    background-position: right -1px;   
    -background: url(../images/menu/selected-sub.gif) repeat-x right -1px;
}
div#menu li.current a,
div#menu ul.menu>li:hover>a {
    background-image: url(../images/menu/selected-sub.png);
    background-repeat: repeat-x;
    background-position: right -1px; 
    -background: url(../images/menu/selected-sub.gif)  repeat-x right -1px;
}
div#menu a:hover span{
  color: #000000;
}
div#menu ul.menu>li:hover>a span {
  color: #000000;
}
div#menu li {}
div#menu li.last { background: none; }


/* menu::level2 */
div#menu ul ul li {
    background-image: url(../images/menu/sep-sub.png);
    background-repeat: repeat-x;
    background-position: left bottom;
    margin: 0;
    padding: 0;
}
div#menu ul ul li:hover {
    background-image: url(../images/menu/sub-item-hover.gif);
    background-color: #717171;
    background-repeat: repeat-x;
    background-position: left top;
}
div#menu ul ul a {
  color: #000000;
    height: auto;
    float: none;
    display: block;
    line-height: 25px;
    font-size: 13px;
    z-index: -1;
    padding: 6px 0 6px 0px;
    white-space: normal;
    width: 166px;
    margin: 0 0px 0 13px;
    background: none;
}
   
div#menu ul ul a span {
    color: #000000;
  padding: 0 3px;
    line-height: 25px;
    font-size: 13px;
    font-weight: normal;
    margin:0;   
}
div#menu li.current ul a,
div#menu li.current ul a span {
    background: none;
}
div#menu ul ul a:hover {
background: none;
  color: #fff;
}
div#menu ul ul a:hover span {
  background: none;
  color: #fff;
}
div#menu ul ul a.parent {
  background: url(../images/menu/submenu-pointer.png) no-repeat right top;
  -background: url(../images/menu/submenu-pointer.gif) no-repeat right top; 
  margin-right: -1px;
}
div#menu ul ul a.parent span {
  padding-right: 26px;
}
div#menu ul ul a.parent:hover {
  background: url(../images/menu/submenu-pointer-hover.gif) no-repeat right top;
  -background: url(../images/menu/submenu-pointer.gif) no-repeat right top; 
}
div#menu ul ul a.parent:hover span {
}
div#menu ul ul span {

    margin-top: 0;
    text-align: left;
}
div#menu ul ul li.last { background: none; }
div#menu ul ul li {
    width: 100%;
}

/* menu::level3 */

div#menu ul ul div {
  width: 180px;
  padding: 0;
    background: url(../images/menu/subsubmenu-top.png) no-repeat 0px 0;
    -background: url(../images/menu/subsubmenu-top.gif) no-repeat 0px 0;  
    margin: -32px 0 0 198px !important;
    margin: -32px 0 0 176px;
}
div#menu ul ul ul {
    padding: 11px 0px 9px 0px;
    margin: 20px 0 0 0;
}
div#menu ul ul div li {
    position:relative;
    top:-10px;
}

/* lava lamp */
div#menu li.back {
    background: url(../images/menu/selected-sub.png) no-repeat 0 0;
    -background: url(../images/menu/selected-sub.gif) no-repeat 0 0;   
    width: 5px;
    height: 46px;
    z-index: 8;
    position: absolute;
    padding: 0;
    margin: 0px 0 0 0;
}


div#menu li.back .left {
    padding:0;
    width:auto;
    background: url(../images/menu/selected-sub.png) repeat-x right 0;
    -background: url(../images/menu/selected-sub.gif) repeat-x right 0;     
    height: 46px;
    margin: 0 0 0 5px;
    float: none;
    position: relative;
    top: 0;
    left: 0;
    visibility: visible;
}


11- düz menü
[IMG]http://snrj.eu5.org/uploads/2014/03/dz.jpg[/img]
resim dosyaları indirin images klasörüne atın = http://yadi.sk/d/luAJ1c0SLQymv
index.template.php de bul
// Show the menu up top. Something like [home] [help] [profile] [logout]...
function template_menu()
{
global $context, $settings, $options, $scripturl, $txt;

echo '
<div id="main_menu">
<ul class="dropmenu" id="menu_nav">';

foreach ($context['menu_buttons'] as $act => $button)
{
echo '
<li id="button_', $act, '">
<a class="', $button['active_button'] ? 'active ' : '', 'firstlevel" href="', $button['href'], '"', isset($button['target']) ? ' target="' . $button['target'] . '"' : '', '>
<span class="', isset($button['is_last']) ? 'last ' : '', 'firstlevel">', $button['title'], '</span>
</a>';
if (!empty($button['sub_buttons']))
{
echo '
<ul>';

foreach ($button['sub_buttons'] as $childbutton)
{
echo '
<li>
<a href="', $childbutton['href'], '"', isset($childbutton['target']) ? ' target="' . $childbutton['target'] . '"' : '', '>
<span', isset($childbutton['is_last']) ? ' class="last"' : '', '>', $childbutton['title'], !empty($childbutton['sub_buttons']) ? '...' : '', '</span>
</a>';
// 3rd level menus :)
if (!empty($childbutton['sub_buttons']))
{
echo '
<ul>';

foreach ($childbutton['sub_buttons'] as $grandchildbutton)
echo '
<li>
<a href="', $grandchildbutton['href'], '"', isset($grandchildbutton['target']) ? ' target="' . $grandchildbutton['target'] . '"' : '', '>
<span', isset($grandchildbutton['is_last']) ? ' class="last"' : '', '>', $grandchildbutton['title'], '</span>
</a>
</li>';

echo '
</ul>';
}

echo '
</li>';
}
echo '
</ul>';
}
echo '
</li>';
}

echo '
</ul>
</div>';
}
değiştir
// Show the menu up top. Something like [home] [help] [profile] [logout]...
function template_menu()
{
 global $context, $settings, $options, $scripturl, $txt;

 echo '
 <div class="topnav" id="topnav">
 <ul >';

 foreach ($context['menu_buttons'] as $act => $button)
 {
 echo '
 <li id="button_', $act, '">
 <a class="', $button['active_button'] ? ' ' : '', '" href="', $button['href'], '"', isset($button['target']) ? ' target="' . $button['target'] . '"' : '', '>
 <span class="', isset($button['is_last']) ? 'last ' : '', '">', $button['title'], '</span>
 </a>';
 
 echo '
 </li>';
 }

 echo '
 </ul>
 </div> ';
}
index.css de en alta ekle
.topnav {
background:url(../images/bg.jpg)  left top;
height: 53px;
overflow: hidden;
width: 100%;
}
.topnav ul {

margin:0 20px;

padding:0;

list-style:none;

}

.topnav ul li {

float:left;

font:11px Arial, Helvetica, sans-serif;

color:#fff;

text-transform:uppercase;

}

.topnav ul li a {

display:block;

color:#fff;

text-decoration:none;

background:url(../images/navli.png) no-repeat left top;

padding:18px 10px 17px 65px;

}

.topnav ul li a:hover {

color:#4cc8f3;

background:url(../images/navlih.png) no-repeat left top;

}



  1. 632

  2. 251
24 Şub 2015 21:12 #1 Son düzenlenme: 24 Şub 2015 21:15 Sosyal Öğretmeni
Burada ne kadar çok menü seçeneği var. Hepsi birbirinden güzel. Tek tek denemeye başlayalım. Emeğiniz için şimdiden teşekkür ederim.



  1. 632

  2. 251
index.template.php de kodların %90 nını bulamıyorum  Bu konuda ne yapabilirim?
Bir deresimleri İmages klasörüne klasör olarak mı atacağım yoksa dorudan mı?
Çünkü dosya olarak yükledim olmadı ama doğrudan images içine atınca çalıştı.

Kodları niçin bulamıyorum?

*

  1. 3,094

  2. 585

  3. 983

anlatımlar default temaya göre
temanızdaki kodlama faklı olduğu için bulamıyorsunuz
kısaca şöyle açıklayım
temenızın index.template.php
burdan
function template_menu()
{

buraya kadar olan
}

// Generate a strip of buttons.
kısımı değiştirmelisiniz
veya sizin için outline tema kullanıyorsunuz hep alttaki kısımı değiştireceksiniz
// Show the menu up top. Something like [home] [help] [profile] [logout]...
function template_menu()
{
global $context, $settings, $options, $scripturl, $txt;

echo '
<div id="topmenu">
<ul>';

foreach ($context['menu_buttons'] as $act => $button)
echo '<li><a ', $button['active_button'] ? ' class="current"' : '' , ' href="', $button['href'], '"><span>', $button['title'], '</span></a></li>';

echo '
</ul>
</div>';

}

resimlere gelince doğrudan images klasörüne atmalısınız



  1. 632

  2. 251
Çok faydalı bir konu, emeğe saygı ve teşekkür.


MENU ×