Karincali.Net

Söze girmeden önce ders ile açıklama yapayım. Kimilerine kolay gibi görünsede bu tür şikayetlerle hep karşılaştım.Özellikle amatör webmasterlarda.Bu gördüğünüz menü gibi css ve js formatındaki dosyaları ne yapacakları bilemiyorlar.Aslında oldukça basit bir husus.Ama onlar koyulmassa hiç birşey olmaz. En önemli iki parcasıdır.Js yapılacak olan materyelin JavaScript uygulamasını oluşturur.Yani oluşturulacak şeyde açılış kapanışlar, animasyon şeklinde açılışlar vb. gibi.Css ise ana dil dir. Yani oluşturuların, oluşmasını o sağlar. Bu menüdeki css i gözlemleyelim.Css kodunun en üstünde 'droplinebar' yazıyor.The Html yazan bölümdeki 'droplinebar'a bakalım. Neymiş menün üstüne, kaba kısmının katmanıymış droplinebar.'droplinebar ul' ise açılacak menüymüş.Neyse fazla uzatmadan işimize dönelim.Menenün JS/CSS kodları şöyle;<link rel="stylesheet" type="text/css" href="droplinebar.css" /><br /> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script><br /> <script src="droplinemenu.js" type="text/javascript"></script><br /> <script type="text/javascript"> //build menu with DIV ID="myslidemenu" on page: droplinemenu.buildmenu("mydroplinemenu") </script><br />
.Şimdi DynamicDrive sayfasına bakalım droplinebar.css buna tıklayalım bulunan kodları not defteri açarak içine yapıştırılım.Not defteri demişken kodlarla daha haşır neşir olmak için şöyle bir not defteri kullanın.Yapıştırdığımız kodları .css fortmatında kaydediyoruz.( Bu işlemler notepad++ da çok daha kolay olur).Şimdide droplinemenu.js buna tıklıyoruz.Kodu aynısı gibi kopyalayıp not defterinde bu sefer ' .js ' formatında kaydediyoruz.Bunları şunun gibi upload sitesine yüklüyoruz.Evet yüklediğimiz doyada droplinebar.css olanın adresini yukarıdaki kodda  droplinebar.css yerine yapıştırıyoruz.Aynı işlemi droplinemenu.js yede yapıyoruz.Şimdide bu kodun arkasına link kodları yapıştırıyoruz.Yani Şu şekilde ;
<link rel="stylesheet" type="text/css" href="http://img29.xooimage.com/files/7/5/4/droplinebar-14c0245.css" /><br /> <br /> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script><br /> <br /> <script src="http://img40.xooimage.com/files/f/2/a/droplinemenu-14c0247.js" type="text/javascript"></script><br /> <br /> <script type="text/javascript"> //build menu with DIV ID="myslidemenu" on page: droplinemenu.buildmenu("mydroplinemenu") </script><br /> <div id="mydroplinemenu" class="droplinebar"><ul><li><a href="http://www.dynamicdrive.com/">Home</a></li> <li><a href="http://www.dynamicdrive.com/style/">CSS Examples</a><br /> <ul> <li><a href="#">Activities 1</a></li> <li><a href="#">Activities 2</a></li> <li><a href="#">Activities 3</a><br /> <ul> <li><a href="#">Water Sports 1</a></li> <li><a href="#">Water Sports 1</a></li> <li><a href="#">Water Sports 1</a></li> <li><a href="#">Water Sports 1</a></li> </ul> </li> <li><a href="#">Activities 4</a></li> </ul></li> <li><a href="http://tools.dynamicdrive.com">Tools</a></li> <li><a href="http://www.javascriptkit.com/">JavaScript</a><br /> <ul> <li><a href="#">Traveling 1</a></li> <li><a href="#">Traveling 2</a></li> <li><a href="#">Traveling 3</a></li> <li><a href="#">Traveling 4</a><br /> <ul> <li><a href="#">Africa 1</a></li> <li><a href="#">Africa 2</a></li> <li><a href="#">Africa 3</a></li> <li><a href="#">Africa 4</a><br /> <ul> <li><a href="#">Kenya 1</a></li> <li><a href="#">Kenya 2</a></li> <li><a href="#">Kenya 3</a></li> <li><a href="#">Kenya 4</a></li> <li><a href="#">Kenya 5</a></li> </ul> </li> </ul> </li> <li><a href="#">Traveling 5</a></li> </ul></li> <li><a href="http://www.cssdrive.com">Gallery</a></li> </ul></div>
Bu şekilde Olacaktır. Yani kısaca js ve css dosyalarını internete yükleyeceğiz...Size iyi şanslar eğer bir soru, sorun olursa alttan yazınız.

 Edit Post

 

Sonraki Kayıt Önceki Kayıt Ana Sayfa

 

Yorum Gönder 0 yorum:

Yorum Gönder