slidemenu

< Web Derslerine Geri Dön <

Soru:

Sitenizin yanlarında duran ve göze çok hoş gözüken menüleri internette bir çok yerde gördüm ama bir türlü siteme uygulayamadım. Rica etsem kodunu gönderebilir misiniz?

Cevap:

Bana en fazla sorulan sorulardan birisi.  İlgili menü uygulaması bir çok internet sitesinde açık kod olarak sunulmakta. Örneğin bu sayfada ilgili menü uygulamasını görebilirsiniz. Bunun değişik bir versiyonu da burada yer almaktadır.

Şimdi gelelim sitemize bu menüyü nasıl uygulayacağız. Bu sayfamızdan ilgili menü kodunu indirdikten sonra aşağıdaki gibi adım adım uygulamayı görelim.

İndirmiş olduğunuz dosyanın içeriği şu şekilde:



1 - yanmenu.java yada yanmenu.js Java kodlarını herhangi bir düzenleyici ile açınız. Benim önerim notepad2 ile düzenleyiniz. Notepad2 yoksa notepad programı ile düzenlemeye başlayabilirisniz. Bilgisayarınızda daha pofesyonel programlar varsa onları kullanmanız daha iyi olur tabi ki. İlgili java kodları tarafımızca Türkçeleştirilmiştir. Kendi sitenize göre düzenledikten sonra kaydederek ikinci adıma geçiniz.

2 - Düzenlediğiniz java kodunu direkt link olarak almak için direkt link desteği veren bir upload sitesine yükleyiniz.

Eğer google.pages.com üyesi iseniz  .js uzantılı java kodunu buraya yükleyin. Ancak günlük hitiniz 200'ü geçiyorsa bandwith aşımı yeme ihtimaliniz çok yüksek. Bandwith aşımı durumunda menünüz çalışmayacaktır.

Eğer google.pages.com üyesi değilseniz artık buraya üye olma imkanınız yok. Çünkü Google'ın almış olduğu karar sonucu artık bu hizmet verilmeyecek. Üye olmak istediğinizde yeni bir hizmet olan sites.google.com sayfasına yönlendireleceksiniz. Buraya yüklediğiniz dosyaları ise direkt link olarak alamıyoruz maalesef.

Bu durumda fileden.com sitesi imdadımıza yetişiyor. Free üyeliklere aylık 5 GB bandwith veren bu siteden direkt link alabiliyoruz. Ancak bu siteye de .js uzantılı dosyaları yüklemiyoruz. Çünkü .js uzantısı izin verilmeyen dosya uzantıları listesinde yer almakta. Bu duruma kıvrak Türk zekası devreye giriyor. İlgili java kodununun uzantısını .java yada .txt yaparak siteye upload ediyoruz. Bir sonraki aşamaya geçelim.

Bir başka alternatif olarak da mysite.mynet.com üyesi iseniz  .js uzantılı olarak dosyanızı yükleyebilirsiniz. Ancak burada da google.pages.com'da olduğu gibi bandwith riski var.

3 - Upload yaptıktan sonra sitemizin Tasarım Ayarlarına girelim. Herhangi bir kısıma, örneğin TASARIM ÜZERİNDEKİ YAZI, aşağıdaki şekilde java kodunu yazalım.

<script src="http://uploadyaptığınızsiteninurlsi" type="text/javascript"></script>

4 - En son olarak CSS kodunu sitemize yerleştirmek gerekiyor. Eğer bir CSS tasarıma sahipseniz aşağıdaki kodu CSS kısmına yapıştırınız. Baştaki ve sondaki style etiketlerini kaldırın.

Başka bir tasarım kullanıyorsanız tasarım ayarlarındaki herhangi bir kutucuğa style etiketlerini kaldırmadan CSS kodunu yapıştırın.

<style>

#menu1 a {color:black;background-color:white;text-decoration:none;text-indent:1ex;}

#menu1 a:active {color:black;text-decoration:none;}

#menu1 a:hover {color:black;background-color:#FFFF99}

#menu1 a:visited {color:black;text-decoration:none;}

#menu2 a {color:navy;background-color:white;text-decoration:none;text-indent:1ex;}

#menu2 a:active    {color:blue;text-decoration:none;}

#menu2 a:visited {color:blue;text-decoration:none;}

#menu2 a:hover {color:navy;background-color:#f0fea8}

#menu3 a {color:black;background-color:white;text-decoration:none;

text-indent:1ex;}

#menu3 a:hover {color:black;background-color:#FFFF99;}

#menu3 a:active    {color:black;text-decoration:none;}

#menu3 a:visited    {color:black;text-decoration:none;}

td,tr,p{font-family: Verdana, Arial, Helvetica, sans-serif;font-size:12px;color:#000000;text-align: left;}

</style>

Menü kodunu Türkçeleştirdiğimiz için kolay bir şekilde yapabilirsiniz.

< Web Derslerine Geri Dön <