DH Anasayfa
İndirim Kodu
Ara
Popüler
Foruma Git
Hakkımızda
Destek
Mobil Sürüm
Standart Site Görünümü
Bu Konuda
  • Tüm Forumlar
  • Web Tasarım - Programlama
  • Tasarım ve grafik
  • Web Tasarım ve Hazır Kodlar
  • Bu Konuda
Arama butonu
Bağlan:
Facebook
Google+
Twitter
Aşağı Git Tüm Forumlar Web Tasarım - Programlama Tasarım ve grafik Web Tasarım ve Hazır Kodlar açılır menü sorunsalı
Bu konudaki kullanıcılar: 1 misafir
8
Cevap 782
Tıklama 0
Öne Çıkarma
açılır menü sorunsalı
Cevap Yaz
Konuya Özel
O
O-Zee AKA Contecau
10 yıl
Teğmen
Konu Sahibi

Merhaba,

Bir site üzerinde çalışıyorum fakat menü kısmında alt menüyü açılır şekilde yapmaya çalışmaktayım. Sliderın altında kaldığı için menü görünmüyor.

Desteklerinizi rica ederim.

html kod : 

<ul class="menu"> 
                      <li class="home-page current"><a data-test="test" rel="nofollow" style="word-wrap: break-word; text-decoration: underline;" target="_blank" onclick="return dhExternalLinkRedirect(this)" href="/ExternalLinkRedirect?module=pgdcode&messageId=108461018&url=index.html" data-href="index.html"><span></span></a></li> 
                      <li><a data-test="test" rel="nofollow" style="word-wrap: break-word; text-decoration: underline;" target="_blank" onclick="return dhExternalLinkRedirect(this)" href="/ExternalLinkRedirect?module=pgdcode&messageId=108461018&url=about.html" data-href="about.html">Hakkımızda</a></li> 
                      <li><a data-test="test" rel="nofollow" style="word-wrap: break-word; text-decoration: underline;" target="_blank" onclick="return dhExternalLinkRedirect(this)" href="/ExternalLinkRedirect?module=pgdcode&messageId=108461018&url=services.html" data-href="services.html">Hizmetlerimiz</a> 
                         <ul class="alt"> 
  						<li><a data-test="test" rel="nofollow" style="word-wrap: break-word; text-decoration: underline;" target="_blank" onclick="return dhExternalLinkRedirect(this)" href="/ExternalLinkRedirect?module=pgdcode&messageId=108461018&url=#" data-href="#">a</a></li> 
  						<li><a data-test="test" rel="nofollow" style="word-wrap: break-word; text-decoration: underline;" target="_blank" onclick="return dhExternalLinkRedirect(this)" href="/ExternalLinkRedirect?module=pgdcode&messageId=108461018&url=#" data-href="#">b</a></li> 
  						<li><a data-test="test" rel="nofollow" style="word-wrap: break-word; text-decoration: underline;" target="_blank" onclick="return dhExternalLinkRedirect(this)" href="/ExternalLinkRedirect?module=pgdcode&messageId=108461018&url=#" data-href="#">c</a></li> 
  					</ul></li> 
                      <li><a data-test="test" rel="nofollow" style="word-wrap: break-word; text-decoration: underline;" target="_blank" onclick="return dhExternalLinkRedirect(this)" href="/ExternalLinkRedirect?module=pgdcode&messageId=108461018&url=projects.html" data-href="projects.html">Projects</a></li> 
                      <li><a data-test="test" rel="nofollow" style="word-wrap: break-word; text-decoration: underline;" target="_blank" onclick="return dhExternalLinkRedirect(this)" href="/ExternalLinkRedirect?module=pgdcode&messageId=108461018&url=clients.html" data-href="clients.html">Clients</a></li> 
                      <li><a data-test="test" rel="nofollow" style="word-wrap: break-word; text-decoration: underline;" target="_blank" onclick="return dhExternalLinkRedirect(this)" href="/ExternalLinkRedirect?module=pgdcode&messageId=108461018&url=contacts.html" data-href="contacts.html">İletişim</a></li> 
                  </ul>


ücerinde uğraşılmış css kod : 

ul.menu {margin:0 1px 0 0;  border-right:#7acad7 1px solid; display:inline-block; float:left; z-index: 9999;  position:relative;} 
  ul.menu li {float:left; line-height:17px; margin:0 0 0 0; background:url(../images/transp.png) 0 0 repeat; border-right:#53b2c3 1px solid; border-left:#82ceda 1px solid} 
  ul.menu li a {font-size:13px; line-height:17px; color:#fff; font-weight:bold; display:block; padding:23px 28px 24px 28px} 
   
  ul.alt {margin:0 1px 0 0;  border-right:#7acad7 1px solid; display:inline-block; float:left  z-index: 9999;  position:relative;} 
  ul.alt li {float:left; line-height:17px; margin:0 0 0 0; background:url(../images/transp.png) 0 0 repeat; border-right:#53b2c3 1px solid; border-left:#82ceda 1px solid} 
  ul.alt li a {font-size:13px; line-height:17px; color:#fff; font-weight:bold; display:block; padding:23px 28px 24px 28px} 
   
  ul.menu li ul.alt{ 
      position:absolute; /* al listeyi diğer nesneleri etkilemeyecek şekilde konumlandırıyoruz*/ 
      display:none;/*alt menümüzü ekrandan kaldırıyoruz.*/ 
      /*mouse menü üzerine gelince görünür olacak*/ 
  } 
  ul.menu li ul.alt li{ 
      float:none; /*alt liste elemanlarının yanyana olmasını istemiyoruz. Alt alta yer alacaklar*/ 
  } 
  ul.menu li.home-page {display:inline-block; background:url(../images/transp.png) 0 0 repeat; border-radius:8px 0 0 8px; border:none !important} 
  ul.menu li:hover , ul.menu li.current {background:url(../images/current.jpg) 0 0 repeat-x #000000; border-right:#000000 1px solid; border-left:#000000 1px solid} 
  ul.menu li.home-page a {padding:21px 22px 24px 23px !important} 
  ul.menu li.home-page span {background:url(../images/home-page-img.png) 0 0 no-repeat; width:19px; height:19px; display:block} 
  ul.menu li:hover > ul.alt{ 
      display:block; 
  } 
  ul.alt li.home-page {display:inline-block; background:url(../images/transp.png) 0 0 repeat; border-radius:8px 0 0 8px; border:none !important} 
  ul.alt li:hover , ul.alt li.current {background:url(../images/current.jpg) 0 0 repeat-x #000000; border-right:#000000 1px solid; border-left:#000000 1px solid} 
  ul.alt li.home-page a {padding:21px 22px 24px 23px !important} 
  ul.alt li.home-page span {background:url(../images/home-page-img.png) 0 0 no-repeat; width:19px; height:19px; display:block}


Bu css kodunun orjinalinde sadece ul.menu vardı fakat ben alt menü ekleyeceğim için ul.alt ekledim

Orjinalini paylaşmamı isterseniz eğer ; 

ul.menu {margin:0 1px 0 0;  border-right:#7acad7 1px solid; display:inline-block; float:left} 
  ul.menu li {float:left; line-height:17px; margin:0 0 0 0; background:url(../images/transp.png) 0 0 repeat; border-right:#53b2c3 1px solid; border-left:#82ceda 1px solid} 
  ul.menu li a {font-size:13px; line-height:17px; color:#fff; font-weight:bold; display:block; padding:23px 28px 24px 28px} 
  ul.menu li.home-page {display:inline-block; background:url(../images/transp.png) 0 0 repeat; border-radius:8px 0 0 8px; border:none !important} 
  ul.menu li:hover , ul.menu li.current {background:url(../images/current.jpg) 0 0 repeat-x #000000; border-right:#000000 1px solid; border-left:#000000 1px solid} 
  ul.menu li.home-page a {padding:21px 22px 24px 23px !important} 
  ul.menu li.home-page span {background:url(../images/home-page-img.png) 0 0 no-repeat; width:19px; height:19px; display:block}


Teşekkürler.

DH forumlarında vakit geçirmekten keyif alıyor gibisin ancak giriş yapmadığını görüyoruz.

Üye olduğunda özel mesaj gönderebilir, beğendiğin konuları favorilerine ekleyip takibe alabilir ve daha önce gezdiğin konulara hızlıca erişebilirsin.

Üye Ol Şimdi Değil
Bir Daha Gösterme



M
MOLİVER
10 yıl
Yüzbaşı

Manşetin position değeri absoulute mi? Sorununun çözümü ya z-index ile yada position değerini değiştirmekle çözülür. "ul.menu li:hover" bu koda position:relative; bu değeri ver bakalım sonuç ne olacak.


Bu mesaja 1 cevap geldi.

Bu mesajda bahsedilenler: @O-Zee AKA Contecau
O
O-Zee AKA Contecau
10 yıl
Teğmen
Konu Sahibi

Hocam şimdi iki adet ul.menu li:hover var.

ul.menu li:hover , ul.menu li.current {background:url(../images/current.jpg) 0 0 repeat-x #000000; border-right:#000000 1px solid; border-left:#000000 1px solid}

buna koydum bir şey olmadı fakat

ul.menu li:hover > ul.alt{
display:block;
}

bu kısma koyunca şöyle göründü;

< Resime gitmek için tıklayın >





< Bu mesaj bu kişi tarafından değiştirildi O-Zee AKA Contecau -- 26 Temmuz 2015; 16:47:39 >
Bu mesaja 1 cevap geldi.
M
MOLİVER
10 yıl
Yüzbaşı

Şöyle yapalım o zaman.Üste çıkacak yani menünün divine bu değeri ver.
position:absolute; z-index:2;
Altta kalacak yani manşetin divine de şu değeri ver.
position:absolute; z-index:1;


Bu mesaja 1 cevap geldi.

Bu mesajda bahsedilenler: @O-Zee AKA Contecau
O
O-Zee AKA Contecau
10 yıl
Teğmen
Konu Sahibi

Hocam ilginiz için teşekkürler fakat kodda yerleştirebilirseniz daha sağlıklı olacak.

Çünkü deneme yanılma yapıyorum fakat sonuca erişemedim ya kayma oluyor, ya da hiç alt alta çıkmıyor.

div dediğiniz kısım sanırım şurası

ul.menu {margin:0 1px 0 0; border-right:#7acad7 1px solid; display:inline-block; float:left; z-index:2; position:absolute;}

ul.alt {margin:0 1px 0 0; border-right:#7acad7 1px solid; display:inline-block; float:left z-index:1; position:absolute;}

fakat bunda da herhangi bir değişiklik olmuyor.


Bu mesaja 1 cevap geldi.
M
MOLİVER
10 yıl
Yüzbaşı

Menü kodlarınızı sizin düzenlediğiniz css kodları ile birlikte denedim.Altına resim ekledim.Açılır menüde bir sorun var mı diye baktım fakat bir sorun görünmüyor.Bu yüzden hata manşet kodlarınız da diye düşünüyorum.


Bu mesaja 1 cevap geldi.

Bu mesajda bahsedilenler: @O-Zee AKA Contecau
O
O-Zee AKA Contecau
10 yıl
Teğmen
Konu Sahibi

quote:

Orijinalden alıntı: MOLİVER

Menü kodlarınızı sizin düzenlediğiniz css kodları ile birlikte denedim.Altına resim ekledim.Açılır menüde bir sorun var mı diye baktım fakat bir sorun görünmüyor.Bu yüzden hata manşet kodlarınız da diye düşünüyorum.

hocam manşet dediğiniz kısım neresi oraya yoğunlaşayım


Bu mesaja 1 cevap geldi.
M
MOLİVER
10 yıl
Yüzbaşı

Slider demek yerine manşet demeyi tercih ediyorum.İkisi aynı anlama geliyor.


Bu mesaja 1 cevap geldi.

Bu mesajda bahsedilenler: @O-Zee AKA Contecau
O
O-Zee AKA Contecau
10 yıl
Teğmen
Konu Sahibi

Teşekkürler hocam ilginiz için.



Cevap Yaz
Tüm Forumlar Web Tasarım - Programlama Tasarım ve grafik Web Tasarım ve Hazır Kodlar açılır menü sorunsalı
DH Mobil uygulaması ile devam edin. Mobil tarayıcınız ile mümkün olanların yanı sıra, birçok yeni ve faydalı özelliğe erişin.
App Store'danİndirin Google Play'denİndirin
Gizle ve güncelleme çıkana kadar tekrar gösterme.
DonanımHaber Forum - Mini Sürüm

Hakkımızda | Yukarı

Tam sürüm için tıklayınız
Version: 1.2.874
Donanım Sponsoru: incehesap.com