smf 2.1 responsive menü 2 (responsive menu)

Başlatan snrj, 16 Şub 2015 13:10

« önceki - sonraki »

0 Üyeler ve 1 Ziyaretçi konuyu incelemekte.

*

  1. 3,115

  2. 588

  3. 1005


index.template.php de bul
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
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
.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

*

  1. 1,181

  2. 117

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



  1. 632

  2. 251
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?

*

  1. 3,115

  2. 588

  3. 1005

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



  1. 632

  2. 251
Alıntı yapılan: snrj - 28 Mar 2015 01:16sitenizde 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.


MENU ×