Jimdo sitenizin navigasyonunu açılır menü olarak kullanmak ister misiniz? Bunun için ilk kodu sitenizin Head bölümüne kopyalayın ve ikinci kodu bir bileşenler / HTML öğesi ile içerik alanına ekleyin. Bu işlemlerden sonra Jimdo sitenizin navigasyonu da, navigasyon menüsündeki "Göz" işareti ile gizlemeniz ve açılır menülü navigasyonunuzu tüm alt sayfalarınıza kopyalamanız gerekir.
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js" type="text/javascript">
</script>
<script type="text/javascript" language="javascript">
//<![CDATA[
$(document).ready(function() {
$("#nav li:has(ul)").hover(function(){
$(this).find("ul").slideDown();
}, function(){
$(this).find("ul").hide();
});
});
//]]>
</script>
<style type="text/css">
/*<![CDATA[*/
#nav {}
#nav ul {
list-style-type:none;
margin:0;
padding:0;
}
#nav li {
float:left;
padding:0;
margin:0;
}
#nav li a {
width: 140px;
display: block;
text-align: center;
background: white;
background: -moz-linear-gradient(top, white 0%, #dcd5cf 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, white), color-stop(100%, #dcd5cf));
background: -webkit-linear-gradient(top, white 0%, #dcd5cf 100%);
background: -o-linear-gradient(top, white 0%, #dcd5cf 100%);
background: -ms-linear-gradient(top, white 0%, #dcd5cf 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='white', endColorstr='#dcd5cf',GradientType=0 );
background: linear-gradient(top, white 0%, #dcd5cf 100%);
margin-right: 5px;
height: 35px;
line-height: 35px;
text-decoration: none;
color: black;
font-size: 100%;
border: none;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
}
#nav li a:hover {
color: #f00;
}
#nav ul ul {
display: none;
position: absolute;
z-index: 999;
}
#nav li li {
float: none;
}
#nav li li a {
background: #499bea; /* Old browsers */
/* IE9 SVG, needs conditional override of 'filter' to 'none' */
background:
url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzQ5OWJlYSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMyMDdjZTUiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
background: -moz-linear-gradient(top, #499bea 0%, #207ce5 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#499bea), color-stop(100%,#207ce5)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #499bea 0%,#207ce5 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #499bea 0%,#207ce5 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #499bea 0%,#207ce5 100%); /* IE10+ */
background: linear-gradient(to bottom, #499bea 0%,#207ce5 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#499bea', endColorstr='#207ce5',GradientType=0 ); /* IE6-8 */
color: white;
text-align: left;
height: auto;
line-height: 1;
width: auto;
padding: 8px 20px 8px 22px;
border: 1px solid #D0D0D0;
border-top: none; margin-right:0;
}
/*]]>*/
</style>
<div id="nav">
<ul>
<li>
<a href="http://BAĞLANTINIZ/">ANA SAYFA</a>
</li>
<li>
<a href="http://BAĞLANTINIZ/">RESİMLER</a>
<ul>
<li>
<a href="http://BAĞLANTINIZ/">GÜNCEL
</a>
</li>
<li>
<a href="http://BAĞLANTINIZ/">YILIN
RESİMLER</a>
</li>
<li>
<a href="http://BAĞLANTINIZ/">ESKİ
RESİMLER</a>
</li>
</ul>
</li>
<li>
<a href="http://BAĞLANTINIZ/">Menü 3</a>
<ul>
<li>
<a href="http://BAĞLANTINIZ/">ALT BAŞLIK
1</a>
</li>
<li>
<a href="http://BAĞLANTINIZ/">ALT BAŞLIK
2</a>
</li>
<li>
<a href="http://BAĞLANTINIZ/">ALT BAŞLIK
3</a>
</li>
<li>
<a href="http://BAĞLANTINIZ/">ALT BAŞLIK
4</a>
</li>
<li>
<a href="http://BAĞLANTINIZ/">ALT BAŞLIK
5</a>
</li>
</ul>
</li>
<li style="list-style: none">
<a href="http://BAĞLANTINIZ/">MENÜ 4</a>
<ul>
<li>
<a href="http://BAĞLANTINIZ/">ALT BAŞLIK
1</a>
</li>
<li>
<a href="http://BAĞLANTINIZ/">ALT BAŞLIK
2</a>
</li>
<li>
<a href="http://BAĞLANTINIZ/">ALT BAŞLIK
3</a>
</li>
<li>
<a href="http://BAĞLANTINIZ/">ALT BAŞLIK
4</a>
</li>
<li>
<a href="http://BAĞLANTINIZ/">ALT BAŞLIK
5</a>
</li>
</ul>
</li>
<li style="list-style: none">
<a href="http://BAĞLANTINIZ/">Menü 5</a>
<ul>
<li>
<a href="http://BAĞLANTINIZ/">ALT BAŞLIK
1</a>
</li>
<li>
<a href="http://BAĞLANTINIZ/">ALT BAŞLIK
2</a>
</li>
<li>
<a href="http://BAĞLANTINIZ/">ALT BAŞLIK
3</a>
</li>
<li>
<a href="http://BAĞLANTINIZ/">ALT BAŞLIK
4</a>
</li>
<li>
<a href="http://BAĞLANTINIZ/">ALT BAŞLIK
5</a>
</li>
</ul>
</li>
<li style="list-style: none">
<a href="http://BAĞLANTINIZ/">Menü 6</a>
<ul>
<li>
<a href="http://BAĞLANTINIZ/">ALT BAŞLIK
1</a>
</li>
<li>
<a href="http://BAĞLANTINIZ/">ALT BAŞLIK
2</a>
</li>
<li>
<a href="http://BAĞLANTINIZ/">ALT BAŞLIK
3</a>
</li>
<li>
<a href="http://BAĞLANTINIZ/">ALT BAŞLIK
4</a>
</li>
<li>
<a href="http://BAĞLANTINIZ/">ALT BAŞLIK
5</a>
</li>
</ul>
</li>
</ul>
</div>
</div>
Kod ile ilgili soru ve yorumlarınızı buradan iletin.
turhan (Wednesday, 26 February 2020 21:09)
öncelikle ellerinize sağlık. Harika bir çalışma yapmışsınız...ben 60 yaşındayım ve amatörce bir site hazırlıyorum.Bu konuda teknik belgim yok denecek kadar yetersiz.. Bu menüyü hazırladığım kiteye koymak istiyorum izninizle. Ancak boyutu biraz küçültme ve buton sayısını artırma gibi bir şansımız olabilirmi. Bu konuda bana bir yanıt verebilirseniz çok sevinirim. Teşekkürler, sevgi ve selamlar... mail adresim. turhandurgun@gmail.com
harun acarlıoglu (Sunday, 23 December 2018 20:26)
güzel
oıou (Wednesday, 05 September 2018 16:17)
uyoy
Yusuf Yılmaz (Friday, 01 June 2018 12:48)
Selamlar ben wix sitesinden site kuruyorum şu anda. Şairler menüsü oluşurdum ve o şairler menüsüne şairlerin hepsini ekledim. Şimdi de o şairlerin her birine şiirlerini eklemek istiyorum ama yapamıyorum. Yardımcı olur musunuz?
ömer (Wednesday, 28 February 2018 09:38)
hell0
mertfkfdkfm (Saturday, 17 February 2018 13:18)
dsömflsdöflösdf
google (Wednesday, 10 January 2018 22:04)
guzel calisma
Ersin Makaryos (Thursday, 10 August 2017 13:00)
aswdefwregtrhytuyöu
Öner Adaletli (Thursday, 28 July 2016 04:54)
çok Sağolun... Allah razı olsun...
hakan (Sunday, 06 March 2016 18:10)
dikey menü lazım o yok mu
devrim (Monday, 21 December 2015 20:22)
Harikasınız teşekkürler çok yardımcı oldu, açılır menünün sayfama girildiğinde açık olması ayrı bir şok etki tabi :D açılır menünün arkaplanı mavi değil de pembe olmasını istiyorum nasıl olcak? aynı zamanda açılır menü açık değilde üstüne gelindiğinde açılması için ne yapabilirim ? :) Şimdiden teşekkürler..
aybik (Thursday, 26 March 2015 00:33)
menüyü ortalamam gerekiyor, center kullanıyorum ama olmuyor menüyü nasıl ortayabilirim?
arda (Friday, 07 November 2014 15:08)
Merhaba, mavi rengi değiştirmek için hangi kodları değiştirmem gerekiyor? Teşekkür ederim..
tuna (Saturday, 12 July 2014 11:02)
Biraz kötü görünmüyor mu? Navigasyon bölümü boş, altta başlıklar var bu durumda navigasyon gereksiz yer kaplıyor
Site Efektleri (Friday, 11 July 2014 16:00)
Merhaba,
Navigasyon bölümüne zaten bir öğe eklemiyorsun aksine mevcut sayfalarını görünmez hale getiriyorsun. Daha sonra açılır menüyü sitenin içerik alanına ekliyorsun (2. kod ile)
popivideo (Friday, 11 July 2014 15:21)
Benim F4245 şablonununu kullanmam gerekiyor ve bu şablonun navigayon bölümünü bir öge eklenmiyor sanırım. Nasıl yapabilirim?
Site Efektleri (Friday, 11 July 2014 14:58)
Merhaba Popivideo,
Yukarıda zaten nasıl uygulayabileceğin yazıyor. Navigasyonunu gizle, ilk kodu head bölümüne, ikinci kodu sitenin içerik alanlarında bileşenler / HTMl öğesinin içine ekle.
Kolay gelsin.
popivideo (Friday, 11 July 2014 14:35)
Benim sitemde de "Ana Sayfa" "Efektler" gibi başlıklar var. Ben bu efekti o başlıklara uygulamak istiyorum yani mesela "Ana Sayfa yazısının üzerine tıklayınca yukarıdaki koddaki gibi bir efekt başlıkta olsun. Nasıl yapabilirim?
Site Efektleri (Monday, 09 June 2014 16:57)
Merhaba,
Alt sayfaları oluşturmak için doğru noktada ikinci bir <ul> </ul>parametresi girerek ikinci derecelerin oluşmasını sağlamanız gerekiyor.
Örnek olarak aşağıdaki örnekte sadece bir kere <ul> açılarak kapandığı için sadece birinci derece sayfalar olacaktır:
<div id="nav">
<ul>
<li>
<a href="http://BAĞLANTINIZ/">ANASAYFA</a>
</li>
<li>
<a href="http://BAĞLANTINIZ/">HAKKIMIZDA</a>
</li>
<li>
<a href="http://BAĞLANTINIZ/">İLETİŞİM</a>
</li>
</ul>
</div>
Öte yandan HAKKIMIZDA sayfasında ikinci bir <ul> açıp kapatarak bir alt seviyeye geçebilir ve buraya TARİHÇE ve BİZ KİMİZ sayfaları ekleyebiliriz. Bu durumda HAKKIMIZDA sayfasının kodu şu şekilde değişecek:
<li>
<a href="http://BAĞLANTINIZ/">HAKKIMIZDA</a>
<ul>
<li>
<a href="http://BAĞLANTINIZ/">TARİHÇE</a>
</li>
<li>
<a href="http://BAĞLANTINIZ/">BİZ KİMİZ</a>
</li>
</li>
</ul>
Kodun tamamı ise aşağıdaki şekilde olacak:
<div id="nav">
<ul>
<li>
<a href="http://BAĞLANTINIZ/">ANASAYFA</a>
</li>
<li>
<a href="http://BAĞLANTINIZ/">HAKKIMIZDA</a>
<ul>
<li>
<a href="http://BAĞLANTINIZ/">TARİHÇE</a>
</li>
<li>
<a href="http://BAĞLANTINIZ/">BİZ KİMİZ</a>
</li>
</li>
</ul>
<li>
<a href="http://BAĞLANTINIZ/">İLETİŞİM</a>
</li>
</ul>
</div>
Bu şekilde alt sayfaları kolayca ekleyebilirsiniz. Burada <ul> parametrelerini yukarıdaki gibi konumlandırmaya özen gösterin.
zeynep kıcıkoğlu (Monday, 09 June 2014 15:00)
merhaba,
ben menümde nasıl alt sayfa yapabilirim bu sizin oluşturduğunuz menü
Site Efektleri (Thursday, 24 April 2014 10:22)
Merhaba,
Sadece "Efektler" sayfasında yer verdiğim kodlar ile ilgili yardımcı oluyorum.
loncahicret (Wednesday, 23 April 2014 19:00)
Dostum sitenin üst kısmını(navigasyon-header oluyor sanırım) nasıl seninki gibi yapabilirim yada alternatifler var mı?
http://loncahicret.jimdo.com/ web sitemdeki üst kısım hiç hoş gözükmüyor. Mevcut şablon: F4245