0
Kayıt Ol

Menüyü Drop-down yapma ?

6

●

645

  • 05-02-2014, 17:38:50
    #1
    MandalinaJolie
    MandalinaJolie
    Menümün açılır alt menü özelliği var class'ı dropdown olan linklerin(li) altındaki ul leri direkt alt menü olarak gösteriyor ama wordpress'e entegre edemedim tam olarak kodlarıma ne eklemem yapmam gerekiyor ?

    header.php (sadece navigasyon)
    <ul id="menu">
					<?php wp_nav_menu( array( 'theme_location' => 'ust-menu' ) ); ?>
				</ul>
    functions.php
    /*	Menus	Start	*/
	function register_my_menus() {
	  register_nav_menus(
		array('ust-menu' => __( 'Üst Menü' ))
	  );
	}
	add_action( 'init', 'register_my_menus' );  
		/*	Menus	Finish	*/
    Yardımcı olacaklara şimdiden teşekkürler
  • 05-02-2014, 18:42:25
    #2
    Mintik
    Mintik
    MandalinaJolie adlı üyeden alıntı: mesajı görüntüle
    Menümün açılır alt menü özelliği var class'ı dropdown olan linklerin(li) altındaki ul leri direkt alt menü olarak gösteriyor ama wordpress'e entegre edemedim tam olarak kodlarıma ne eklemem yapmam gerekiyor ?

    header.php (sadece navigasyon)
    <ul id="menu">
					<?php wp_nav_menu( array( 'theme_location' => 'ust-menu' ) ); ?>
				</ul>
    functions.php
    /*	Menus	Start	*/
	function register_my_menus() {
	  register_nav_menus(
		array('ust-menu' => __( 'Üst Menü' ))
	  );
	}
	add_action( 'init', 'register_my_menus' );  
		/*	Menus	Finish	*/
    Yardımcı olacaklara şimdiden teşekkürler

    Menü kodunu bununla değiştir.
    <div class="primaryMenu">
	<div id="cerceveMenu">
	   <ul>
         <?php wp_nav_menu( array( 'theme_location' => 'primary', 'menu_class' => 'ust-menu' ) ); ?>
	   </ul> 
	</div><!--cerceveMenu-->
</div><!--secondaryMenu-->
    Css kodlar için de bunları kullanırsın. Kendine göre bir düzenleme yaparsın artık.
    .primaryMenu {
 max-width: 1200px;
 width:auto;
 height:40px;
 margin: auto;
 border-bottom: 1px #666666 solid;
 border-top: 1px #666666 solid;  
}
.primaryMenu #cerceveMenu {
 width:auto;
 display:block;
 margin: auto;
}
.primaryMenu #cerceveMenu ul.ust-menu {
  width:90%;
  height:40px;
  float:left;
  line-height:40px;
  position:absolute;
}
.primaryMenu #cerceveMenu ul.ust-menu a{
 display: block;
 color: #fff;
 text-decoration: none;
 text-transform: uppercase;
 font-family: Garamond, serif;
 padding-left:20px;
 padding-right:20px;
 font-weight:bold;
 font-size: 0.9em;
 color: rgba(0,0,0,0.6);
 text-shadow: 2px 2px 3px rgba(255,255,255,0.1); 
}
.primaryMenu #cerceveMenu ul.ust-menu > li {
 float:left;
 height: 40px;
 line-height: 40px;
 display:block;
 list-style:none;
 position:relative; 
}
.primaryMenu #cerceveMenu ul.ust-menu > li:hover {
 color: #468ECD;
 background-color:#d75813;
 z-index: 3;
}
.primaryMenu #cerceveMenu ul.ust-menu ul {
 visibility:hidden;
 position: absolute;
 background-color:#d75813;
 padding-top:5px;
 padding-bottom:5px;
 width: 150px;
 top:50px;
 opacity: 0;
 text-align: left;
}
.primaryMenu #cerceveMenu ul.ust-menu li:hover ul{
 opacity: 1;
 top: 40px;
 visibility:visible;
}
.primaryMenu #cerceveMenu ul.ust-menu ul li {
 display: block;
 position: relative;
}
.primaryMenu #cerceveMenu ul.ust-menu ul li:hover {
 display: block;
 position: relative;
 background-color:#FFFFFF;
}
.primaryMenu #cerceveMenu ul.ust-menu ul li a {
 padding-left: 30px;
}
    Örnek olarak belirttiğin function.php kodlarını da olduğu gibi kullan değişiklik yapma.
  • 05-02-2014, 19:25:31
    #3
    MandalinaJolie
    MandalinaJolie
    Mintik adlı üyeden alıntı: mesajı görüntüle
    Menü kodunu bununla değiştir.
    <div class="primaryMenu">
	<div id="cerceveMenu">
	   <ul>
         <?php wp_nav_menu( array( 'theme_location' => 'primary', 'menu_class' => 'ust-menu' ) ); ?>
	   </ul> 
	</div><!--cerceveMenu-->
</div><!--secondaryMenu-->
    Css kodlar için de bunları kullanırsın. Kendine göre bir düzenleme yaparsın artık.
    .primaryMenu {
 max-width: 1200px;
 width:auto;
 height:40px;
 margin: auto;
 border-bottom: 1px #666666 solid;
 border-top: 1px #666666 solid;  
}
.primaryMenu #cerceveMenu {
 width:auto;
 display:block;
 margin: auto;
}
.primaryMenu #cerceveMenu ul.ust-menu {
  width:90%;
  height:40px;
  float:left;
  line-height:40px;
  position:absolute;
}
.primaryMenu #cerceveMenu ul.ust-menu a{
 display: block;
 color: #fff;
 text-decoration: none;
 text-transform: uppercase;
 font-family: Garamond, serif;
 padding-left:20px;
 padding-right:20px;
 font-weight:bold;
 font-size: 0.9em;
 color: rgba(0,0,0,0.6);
 text-shadow: 2px 2px 3px rgba(255,255,255,0.1); 
}
.primaryMenu #cerceveMenu ul.ust-menu > li {
 float:left;
 height: 40px;
 line-height: 40px;
 display:block;
 list-style:none;
 position:relative; 
}
.primaryMenu #cerceveMenu ul.ust-menu > li:hover {
 color: #468ECD;
 background-color:#d75813;
 z-index: 3;
}
.primaryMenu #cerceveMenu ul.ust-menu ul {
 visibility:hidden;
 position: absolute;
 background-color:#d75813;
 padding-top:5px;
 padding-bottom:5px;
 width: 150px;
 top:50px;
 opacity: 0;
 text-align: left;
}
.primaryMenu #cerceveMenu ul.ust-menu li:hover ul{
 opacity: 1;
 top: 40px;
 visibility:visible;
}
.primaryMenu #cerceveMenu ul.ust-menu ul li {
 display: block;
 position: relative;
}
.primaryMenu #cerceveMenu ul.ust-menu ul li:hover {
 display: block;
 position: relative;
 background-color:#FFFFFF;
}
.primaryMenu #cerceveMenu ul.ust-menu ul li a {
 padding-left: 30px;
}
    Örnek olarak belirttiğin function.php kodlarını da olduğu gibi kullan değişiklik yapma.
    Merhaba.
    Cevap için teşekkür ederim ama şöyle bir şey yapamaz mıyız ;
    Benim kendi stil kodlamam var onun üzerinden gidemez miyim mesela ?
    Örneğin şöyle;
    ul#menu li.dropdown ul {position:absolute;list-style:none;padding:0;margin:0;background:#c03;width:200px;opacity:0;-webkit-transition:all .5s;}
ul#menu li.dropdown ul li {border-right:none;float:none;border-bottom:1px dotted #900;-webkit-transition:all .5s;}
ul#menu li.dropdown ul li:hover {border-bottom:1px dotted #c03;-webkit-transition:all .5s;}
ul#menu li.dropdown:hover > ul {opacity:1;}
    Çünkü bir gün template entegre ettiğimde oralarda .primaryMenu gibi kodlar olmayacak

    Ayrıca;
    <div class="primaryMenu">
	<div id="cerceveMenu">
	   <ul>
         <?php wp_nav_menu( array( 'theme_location' => 'primary', 'menu_class' => 'ust-menu' ) ); ?>
	   </ul> 
	</div><!--cerceveMenu-->
</div><!--secondaryMenu-->
    kısmı çalışmadı maalesef.
  • 05-02-2014, 21:24:47
    #4
    Mintik
    Mintik
    MandalinaJolie adlı üyeden alıntı: mesajı görüntüle
    Merhaba.
    Cevap için teşekkür ederim ama şöyle bir şey yapamaz mıyız ;
    Benim kendi stil kodlamam var onun üzerinden gidemez miyim mesela ?
    Örneğin şöyle;
    ul#menu li.dropdown ul {position:absolute;list-style:none;padding:0;margin:0;background:#c03;width:200px;opacity:0;-webkit-transition:all .5s;}
ul#menu li.dropdown ul li {border-right:none;float:none;border-bottom:1px dotted #900;-webkit-transition:all .5s;}
ul#menu li.dropdown ul li:hover {border-bottom:1px dotted #c03;-webkit-transition:all .5s;}
ul#menu li.dropdown:hover > ul {opacity:1;}
    Çünkü bir gün template entegre ettiğimde oralarda .primaryMenu gibi kodlar olmayacak

    Ayrıca;
    <div class="primaryMenu">
	<div id="cerceveMenu">
	   <ul>
         <?php wp_nav_menu( array( 'theme_location' => 'primary', 'menu_class' => 'ust-menu' ) ); ?>
	   </ul> 
	</div><!--cerceveMenu-->
</div><!--secondaryMenu-->
    kısmı çalışmadı maalesef.
    Haklısın çalışmaz primary yerne ust-menu yazılması gerekiyordu.
  • 05-02-2014, 22:06:02
    #5
    MandalinaJolie
    MandalinaJolie
    Mintik adlı üyeden alıntı: mesajı görüntüle
    Haklısın çalışmaz primary yerne ust-menu yazılması gerekiyordu.
    Bende 1 saat bunu aradım en sonunda yabancı forumdaki metinleri translateden Türkçeye çevire çevire buldum en sonunda hallettim teşekkürler
  • 06-02-2014, 11:01:09
    #6
    MandalinaJolie
    MandalinaJolie
    Bişii daha sormak istiyorum.
    Peki her şey güzel de, Mesela alt menülerin class’larını nereden belirtiyoruz ?
    Bootstrap da var olan bir yapıyı entegre etmek istiyorum lakin biraz takıldım bildiğiniz gibi bootstrap da açılır menülerin parenti olan li etiketleri dropdown class’ı alır burdan yola çıkarak kod yapımız nasıl olmalıdır tam çözemedim.
  • 06-02-2014, 16:36:13
    #7
    MandalinaJolie
    MandalinaJolie
    Arkadaşlar konu güncel hala yapamadım
    farzedelim ki ben bootstrap kullanmak istiyorum ve bootstrap da açılır menülerin li taglarına dropdown classı ekleniyor açılır menü olabilmesi için ama wp de bu sub-menu acaba burda ne yapmamız gerekiyor tam olarak yani ben bootstrap da ki açılır menüyü de dropdown classına eklemek istiyorum,acaba şu koda;

    PHP- Kodu:
    <?php wp_nav_menu(array('container_class' => 'myMenu','container' => 'nav')); ?>
    ne gibi bir ekleme yapmak gerekiyor, bence illa ki vardır bi yolu

    Edit: yanlış anlaşılmasın ben sub-menu classını değiştirmek istemiyorum, açılır menülerin parentinde ki li'e class vermeyi soruyorum şöyle gibi;
    <ul id="menu">
			<li><a href="#">Anasayfa</a></li>
			<li class="dropdown"><a href="#">Referanslar</a>
				<ul class="sub-menu">
					<li><a href="#">Alt menü 1</a></li>
					<li><a href="#">Alt menü 2</a></li>
					<li><a href="#">Alt menü 3</a></li>
				</ul>
			</li>
		</ul>