smf 2.1 responsive menü 2 (responsive menu)

index.template.php de bul

Kod Seç Expand

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

// Note: Menu markup has been cleaned up to remove unnecessary spans and classes.
foreach ($context['menu_buttons'] as $act => $button)
{
echo '
<li id="button_', $act, '"', !empty($button['sub_buttons']) ? ' class="subsections"' :'', '>
<a', $button['active_button'] ? ' class="active"' : '', ' href="', $button['href'], '"', isset($button['target']) ? ' target="' . $button['target'] . '"' : '', '>
', $button['icon'], $button['title'], '
</a>';

if (!empty($button['sub_buttons']))
{
echo '
<ul>';

foreach ($button['sub_buttons'] as $childbutton)
{
echo '
<li', !empty($childbutton['sub_buttons']) ? ' class="subsections"' :'', '>
<a href="', $childbutton['href'], '"' , isset($childbutton['target']) ? ' target="' . $childbutton['target'] . '"' : '', '>
', $childbutton['title'], '
</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'] . '"' : '', '>
', $grandchildbutton['title'], '
</a>
</li>';

echo '
</ul>';
}

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

echo '
</ul>
</div>';
değiştir

Kod Seç Expand

echo '<a class="toggleMenu3" href="#"><span class="generic_icons home"></span><span>Menu</span></a><ul class="konusalnav3">';

// Note: Menu markup has been cleaned up to remove unnecessary spans and classes.
foreach ($context['menu_buttons'] as $act => $button)
{
echo '
<li id="button_', $act, '"', !empty($button['sub_buttons']) ? ' class="subsections"' :'', '>
<a', $button['active_button'] ? ' class="active"' : '', ' href="', $button['href'], '"', isset($button['target']) ? ' target="' . $button['target'] . '"' : '', '>
', $button['icon'], $button['title'], '
</a>';

if (!empty($button['sub_buttons']))
{
echo '
<ul>';

foreach ($button['sub_buttons'] as $childbutton)
{
echo '
<li', !empty($childbutton['sub_buttons']) ? ' class="subsections"' :'', '>
<a href="', $childbutton['href'], '"' , isset($childbutton['target']) ? ' target="' . $childbutton['target'] . '"' : '', '>
', $childbutton['title'], '
</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'] . '"' : '', '>
', $grandchildbutton['title'], '
</a>
</li>';

echo '
</ul>';
}

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

echo '
</ul><script>
var ww = document.body.clientWidth;
$(document).ready(function() {
$(".konusalnav3 li a").each(function() {
if ($(this).next().length > 0) {
$(this).addClass("parent");
};
})

$(".toggleMenu3").click(function(e) {
e.preventDefault();
$(this).toggleClass("active");
$(".konusalnav3").toggle();
});
adjustMenu();
})

$(window).bind(\'resize orientationchange\', function() {
ww = document.body.clientWidth;
adjustMenu();
});

var adjustMenu = function() {
if (ww < 768) {
$(".toggleMenu3").css("display", "inline-block");
if (!$(".toggleMenu3").hasClass("active")) {
$(".konusalnav3").hide();
} else {
$(".konusalnav3").show();
}
$(".konusalnav3 li").unbind(\'mouseenter mouseleave\');
$(".konusalnav3 li a.parent").unbind(\'click\').bind(\'click\', function(e) {
// must be attached to anchor element to prevent bubbling
e.preventDefault();
$(this).parent("li").toggleClass("hover");
});
}
else if (ww >= 768) {
$(".toggleMenu3").css("display", "none");
$(".konusalnav3").show();
$(".konusalnav3 li").removeClass("hover");
$(".konusalnav3 li a").unbind(\'click\');
$(".konusalnav3 li").unbind(\'mouseenter mouseleave\').bind(\'mouseenter mouseleave\', function() {
// must be attached to li so that mouseleave is not triggered when hover over submenu
$(this).toggleClass(\'hover\');
});
}
}

</script>';
index.css de en alta ekle

Kod Seç Expand

.toggleMenu3 {
    display:  none;
    background: #666;
    padding: 10px 15px;
background: #557EA0;
}
.toggleMenu3 span{
color: #fff;}
.konusalnav3 {
    list-style: none;
     *zoom: 1;
    background: #557EA0;
}
.konusalnav3:before,
.konusalnav3:after {
    content: " ";
    display: table;
}
.konusalnav3:after {
    clear: both;
}
.konusalnav3 ul {
    list-style: none;
    min-width: 200px;
}
.konusalnav3 a {
    padding: 10px 15px;
    color:#fff;
}
.konusalnav3 li {
    position: relative;
}
.konusalnav3 > li {
    float: left;
    border-top: 1px solid #557EA0;
}
.konusalnav3 > li > .parent {
    background-image: url("downArrow.png");
    background-repeat: no-repeat;
    background-position: right;
}
.konusalnav3 > li > a {
    display: block;
}
.konusalnav3 li  ul {
    position: absolute;
    left: -9999px;
}
.konusalnav3 > li.hover > ul {
    left: 0;
}
.konusalnav3 li li.hover ul {
    left: 100%;
    top: 0;
}
.konusalnav3 li li a {
    display: block;
    background: #557EA0;
    position: relative;
    z-index:100;
    border-top: 1px solid #fff;
}
.konusalnav3 li li li a {
    background:#249578;
    z-index:200;
    border-top: 1px solid #1d7a62;
}

@media screen and (max-width: 768px) {
    .active {
        display: block;
    }
    .konusalnav3 > li {
        float: none;
    }
    .konusalnav3 > li > .parent {
        background-position: 95% 50%;
    }
    .konusalnav3 li li .parent {
        background-image: url("downArrow.png");
        background-repeat: no-repeat;
        background-position: 95% 50%;
    }
    .konusalnav3 ul {
        display: block;
        width: 100%;
    }
   .konusalnav3 > li.hover > ul , .konusalnav3 li li.hover ul {
        position: static;
    }

}
ekteki resimleri index.css yanına atın

Teşekkürler Emeğinize sağlık.

Evet, ilk defa bir smf destek forumunun bir konusudan yararlanıp sitede değişiklik yapabildim

Her şey iyi gitti yalnız menü açılır menü olmadı, bunun sebebi ne olabilir?

sitenizde smf 2.0.9 kurulu bu anlatım smf 2.1 için hata olması normal

sitenizde smf 2.0.9 kurulu bu anlatım smf 2.1 için hata olması normal

fark etmemişim her şeyi geri alıp 2.0.9 için bakayım madem.