20 Nis 2021 05:07 Yeni Konu Oluştur

Haberler:

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


Menu button

Başlatan tetik, 10 Nis 2016 01:25

« önceki - sonraki »

0 Üye ve 2 Ziyaretçi konuyu incelemekte.

*

  1. 39

  2. 14

  3. 4

Merhabalar arkadaşlar bayadır ugraşıyorum ama yapamadım olmadı bir türlü

kullandğım temanın ham halini versem reseller temasının menu kısmını benm temama uyarlayacak bir arkadaş varmıdır mobil görünümde menuler kötü görünüyor reseller temasında menuler navigator kısmına geçtiği için daha hoş derli toplu oluyor temalar ekte arkadaşlar

Reseller temasının menu kısmını TimeTraveler temasına uyarlayacak ve mobilde çalışmasını yapacak bir arkadaş varsa sevinirim..

Teşekkür Ederim..

*

  1. 1,111

  2. 104

  3. 316
Efsane temasının menusünü vereyim.
index.template.php </head> öncesine ekle

<script type="text/javascript" src="', $settings['theme_url'], '/scripts/jquery-1.11.1.min.js"></script>Ekten indirip script içine at.

index.template.php menu kodu.<body> sonrasına veya istediğin yere.
echo'
<nav id="cssmenu">
<div id="head-mobile"></div>
<div class="button"></div>';
template_menu();
echo'</nav>
</div>';

theme.js bu kodları at.
(function($) {
$.fn.menumaker = function(options) { 
 var cssmenu = $(this), settings = $.extend({
   format: "dropdown",
   sticky: false
 }, options);
 return this.each(function() {
   $(this).find(".button").on('click', function(){
     $(this).toggleClass('menu-opened');
     var mainmenu = $(this).next('ul');
     if (mainmenu.hasClass('open')) {
       mainmenu.slideToggle().removeClass('open');
     }
     else {
       mainmenu.slideToggle().addClass('open');
       if (settings.format === "dropdown") {
         mainmenu.find('ul').show();
       }
     }
   });
   cssmenu.find('li ul').parent().addClass('has-sub');
multiTg = function() {
     cssmenu.find(".has-sub").prepend('<span class="submenu-button"></span>');
     cssmenu.find('.submenu-button').on('click', function() {
       $(this).toggleClass('submenu-opened');
       if ($(this).siblings('ul').hasClass('open')) {
         $(this).siblings('ul').removeClass('open').slideToggle();
       }
       else {
         $(this).siblings('ul').addClass('open').slideToggle();
       }
     });
   };
   if (settings.format === 'multitoggle') multiTg();
   else cssmenu.addClass('dropdown');
   if (settings.sticky === true) cssmenu.css('position', 'fixed');
resizeFix = function() {
  var mediasize = 768;
     if ($( window ).width() > mediasize) {
       cssmenu.find('ul').show();
     }
     if ($(window).width() <= mediasize) {
       cssmenu.find('ul').hide().removeClass('open');
     }
   };
   resizeFix();
   return $(window).on('resize', resizeFix);
 });
  };
})(jQuery);

(function($){
$(document).ready(function(){
$("#cssmenu").menumaker({
   format: "multitoggle"
});
});
})(jQuery);

Buda css kodları.
nav{position:relative;margin:0 auto;}
#cssmenu,#cssmenu ul,#cssmenu ul li,#cssmenu ul li a,#cssmenu #head-mobile{border:0;list-style:none;line-height:1;display:block;position:relative;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}
#cssmenu:after,#cssmenu > ul:after{content:".";display:block;clear:both;visibility:hidden;line-height:0;height:0}
#cssmenu #head-mobile{display:none}
#cssmenu{font-family:sans-serif;}
#cssmenu > ul > li{float:left}
#cssmenu > ul > li > a{padding:16px;font-size:12px;letter-spacing:1px;text-decoration:none;color:#ddd;font-weight:700;}
#cssmenu > ul > li:hover > a,#cssmenu ul li.active a{color:#fff}
#cssmenu > ul > li.has-sub > a{padding-right:30px}
#cssmenu > ul > li.has-sub > a:after{position:absolute;top:22px;right:11px;width:8px;height:2px;display:block;background:#ddd;content:''}
#cssmenu > ul > li.has-sub > a:before{position:absolute;top:19px;right:14px;display:block;width:2px;height:8px;background:#ddd;content:'';-webkit-transition:all .25s ease;-ms-transition:all .25s ease;transition:all .25s ease}
#cssmenu > ul > li.has-sub:hover > a:before{top:23px;height:0}
#cssmenu ul ul{position:absolute;left:-9999px;z-index: 1;}
#cssmenu ul ul li{height:0;-webkit-transition:all .25s ease;-ms-transition:all .25s ease;background:#333;transition:all .25s ease}
#cssmenu ul ul li:hover{}
#cssmenu li:hover > ul{left:auto}
#cssmenu li:hover > ul > li{height:35px}
#cssmenu ul ul ul{margin-left:100%;top:0}
#cssmenu ul ul li a{border-bottom:1px solid rgba(150,150,150,0.15);padding:11px 15px;width:170px;font-size:12px;text-decoration:none;color:#ddd;font-weight:400;}
#cssmenu ul ul li:last-child > a,#cssmenu ul ul li.last-item > a{border-bottom:0}
#cssmenu ul ul li:hover > a,#cssmenu ul ul li a:hover{color:#fff}
#cssmenu ul ul li.has-sub > a:after{position:absolute;top:16px;right:11px;width:8px;height:2px;display:block;background:#ddd;content:''}
#cssmenu ul ul li.has-sub > a:before{position:absolute;top:13px;right:14px;display:block;width:2px;height:8px;background:#ddd;content:'';-webkit-transition:all .25s ease;-ms-transition:all .25s ease;transition:all .25s ease}
#cssmenu ul ul > li.has-sub:hover > a:before{top:17px;height:0}
#cssmenu ul ul li.has-sub:hover,#cssmenu ul li.has-sub ul li.has-sub ul li:hover{background:#363636;}
#cssmenu ul ul ul li.active a{border-left:1px solid #333}
#cssmenu > ul > li.has-sub > ul > li.active > a,#cssmenu > ul ul > li.has-sub > ul > li.active> a{border-top:1px solid #333}

*

  1. 39

  2. 14

  3. 4
Merhabalar  olmadı malesef kodlarda bir çakışma oluyor galiba eski menüyü siliyorum ama yeni menüye dair hiç bir değişiklik görmüyorum bir yerde hatamı yapıyorum acaba ?

*

  1. 1,111

  2. 104

  3. 316

Alıntı yapılan: tetik - 10 Nis 2016 16:32Merhabalar  olmadı malesef kodlarda bir çakışma oluyor galiba eski menüyü siliyorum ama yeni menüye dair hiç bir değişiklik görmüyorum bir yerde hatamı yapıyorum acaba ?
Pardon eksik vermişim şunuda

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

echo '<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'] . '"' : '', '>', $button['title'], '
</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>';
}

*

  1. 39

  2. 14

  3. 4
merhabalar bu kodlamayı siz tema üzerinde denediniz mi acaba birde theme.js bu kodları at. bu tabirde tam olması gereken nedir bu dosyanın sonuna ekle mi anlatılmak istenen hata aldım bu durumda kadlamada ?

*

  1. 1,111

  2. 104

  3. 316
11 Nis 2016 15:04 #5 Son düzenlenme: 11 Nis 2016 15:57 CeeMoo
Neyse şöyle ek'te tamamdır.Kodları dahada düzgün yapmak sana kaldı :)


Bide daha sonra uygulamak istiyenler

index.template.php verdiğim jquery kütüphanesinden sonra şöyle yaparak verilen js kodu bunun içine atın
<script type="text/javascript" src="', $settings['theme_url'], '/scripts/menujs.js"></script>scripts/menujs.js oluşturun atın js kodları.

index.css üsteki kodlardan sonra ekleyin.
ul,li{padding:0;margin:0;}

@media screen and (max-width: 768px) {
 #cssmenu{width:100%}
 #cssmenu ul{width:100%;display:none;background-color: #444;
 z-index: 1;}
 #cssmenu ul li{width:100%;border-top:1px solid #444}
 #cssmenu ul li:hover{background:#363636;}
 #cssmenu ul ul li,#cssmenu li:hover > ul > li{height:auto}
 #cssmenu ul li a,#cssmenu ul ul li a{border-bottom:0}
 #cssmenu > ul > li{float:none}
 #cssmenu ul ul li a{padding-left:25px}
 #cssmenu ul ul li{background:#333!important;}
 #cssmenu ul ul li:hover{background:#363636!important}
 #cssmenu ul ul ul li a{padding-left:35px}
 #cssmenu ul ul li a{color:#ddd;background:none}
 #cssmenu ul ul li:hover > a,#cssmenu ul ul li.active > a{color:#fff}
 #cssmenu ul ul,#cssmenu ul ul ul{position:relative;left:0;width:100%;margin:0;text-align:left}
 #cssmenu > ul > li.has-sub > a:after,#cssmenu > ul > li.has-sub > a:before,#cssmenu ul ul > li.has-sub > a:after,#cssmenu ul ul > li.has-sub > a:before{display:none}
 #cssmenu #head-mobile{display:block;padding:23px;color:#ddd;font-size:12px;font-weight:700}
 .button{width:55px;height:46px;position:absolute;left:0;top:0;cursor:pointer;z-index: 12399994;}
 .button:after{position:absolute;top:22px;right:20px;display:block;height:4px;width:20px;border-top:2px solid #dddddd;border-bottom:2px solid #dddddd;content:''}
 .button:before{-webkit-transition:all .3s ease;-ms-transition:all .3s ease;transition:all .3s ease;position:absolute;top:16px;right:20px;display:block;height:2px;width:20px;background:#ddd;content:''}
 .button.menu-opened:after{-webkit-transition:all .3s ease;-ms-transition:all .3s ease;transition:all .3s ease;top:23px;border:0;height:2px;width:19px;background:#fff;-webkit-transform:rotate(45deg);-moz-transform:rotate(45deg);-ms-transform:rotate(45deg);-o-transform:rotate(45deg);transform:rotate(45deg)}
 .button.menu-opened:before{top:23px;background:#fff;width:19px;-webkit-transform:rotate(-45deg);-moz-transform:rotate(-45deg);-ms-transform:rotate(-45deg);-o-transform:rotate(-45deg);transform:rotate(-45deg)}
 #cssmenu .submenu-button{position:absolute;z-index:99;right:0;top:0;display:block;border-left:1px solid #444;height:46px;width:46px;cursor:pointer}
 #cssmenu .submenu-button.submenu-opened{background:#262626}
 #cssmenu ul ul .submenu-button{height:34px;width:34px}
 #cssmenu .submenu-button:after{position:absolute;top:22px;right:19px;width:8px;height:2px;display:block;background:#ddd;content:''}
 #cssmenu ul ul .submenu-button:after{top:15px;right:13px}
 #cssmenu .submenu-button.submenu-opened:after{background:#fff}
 #cssmenu .submenu-button:before{position:absolute;top:19px;right:22px;display:block;width:2px;height:8px;background:#ddd;content:''}
 #cssmenu ul ul .submenu-button:before{top:12px;right:16px}
 #cssmenu .submenu-button.submenu-opened:before{display:none}
 #cssmenu ul ul ul li.active a{border-left:none}
 #cssmenu > ul > li.has-sub > ul > li.active > a,#cssmenu > ul ul > li.has-sub > ul > li.active > a{border-top:none}
 #cssmenu, #cssmenu ul, #cssmenu ul li, #cssmenu ul li a, #cssmenu #head-mobile {box-sizing: content-box;}

}



Buda resimler


*

  1. 39

  2. 14

  3. 4
Merhabalar

CeeMoo Arkadaşıma teşekkür ediyorum yardımların için ama şöyle bir sorunum var mobilde menu açılır açılmaz hemen kapanıyor bu konuda bir fikrin varmıdır acaba ? 

*

  1. 1,111

  2. 104

  3. 316

Şuan localde baktım bir sıkıntı yok.Kod çakışması vs.. olabilir modlarla ilgili olabilir.Ben bakarım genede bulabilirsem hatası söylerim size.


MENU ×