aslında java bilgin olmasada yapabilirsin. Yani hiç java bilmiyorsun diyelim ama html, php, programladan biraz anlıyorsun diyelim. sitenin kaynak kodlarını açarsan göreceksinki css/stye.css?v6 ile bu menüye stil vermişler. js kütüphanesi olarak js/transmenu.js ' yi kullanmışlar. bu söylediğim css/stye.css?v6 js/transmenu.js ' nin içine gir kaynaktan, sonra onları bilgisayarında bir text editör ile kaydet fakat kaydederken yine .css .js şeklinde kaydedeceksin. bi tane index.html oluştur indirdiğin dosyaların yolunu belirt.
örnek verecek olursak yine aynı kaynaktan aldığını düşün.
<?xml version="1.0" encoding="utf-8"?><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="tr" lang="tr"><head><title>Kanal A Haber Menüsü </title><meta http-equiv="Pragma" content="no-cache" /><meta http-equiv="Expires" content="-1" /><meta http-equiv="Cache-Control" content="no-cache" /><meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /><meta http-equiv="Refresh" content="300" /><meta name="keywords" content="" /><meta name="description" content="" /><link href="css/style.css" type="text/css" rel="stylesheet"><script type="text/javascript" src="js/transmenu.js"></script>
</head>
sonra bunun altına yine kaynağa baktığında görürsün, js transmenü ' deki kütüphaneyi sayfada çalıştıran yani efekt veren js kodu var
Oda şu /head bittikten sonra ekliyorsun.
<script type="text/javascript">
var prevHD2Ind = 1;
function showHD2Item(ind)
{
document.getElementById('HD2_cur_' + prevHD2Ind).style.display = 'none';
document.getElementById('HD2_cur_' + ind).style.display = 'block';
document.getElementById('HD2_lst_' + prevHD2Ind).style.display = 'block';
document.getElementById('HD2_lst_' + ind).style.display = 'none';
prevHD2Ind = ind;
}
showHD2Item('1');
</script>gelelim içeriklere yine sayfanın kaynağında gördüğümüz gibi div id 'leri ve js id'lerini çalıştırdığı html içerik kodlarını görüyoruz.
<div class="headline2"><div class="item_2" id="HD2_lst_1" onmouseover="showHD2Item('1');"><div class="item_inner">
<a href="diyanete-5-bin-kadro-haberi-50645.htm">» Diyanet'e 5 bin kadro</a></div></div>
<div class="item_3" style="display: none;" id="HD2_cur_1"><div class="title"><a href="diyanete-5-bin-kadro-haberi-50645.htm">Diyanet'e 5 bin kadro</a></div>
<div class="image"><a href="diyanete-5-bin-kadro-haberi-50645.htm"><img src="images/32967.jpg"></a></div>
<div class="spot"><a href="diyanete-5-bin-kadro-haberi-50645.htm">Diyanet İşleri Başkanlığı'na açıktan 5 bin atama.</a></div></div>
<div class="item_1" id="HD2_lst_2" onmouseover="showHD2Item('2');"><div class="item_inner"><a href="asiri-sicaklar-134-can-aldi-haberi-50643.htm">» Aşırı sıcaklar 134 can aldı</a></div></div>
<div class="item_3" style="display: none;" id="HD2_cur_2"><div class="title"><a href="asiri-sicaklar-134-can-aldi-haberi-50643.htm">Aşırı sıcaklar 134 can aldı</a></div>
<div class="image"><a href="asiri-sicaklar-134-can-aldi-haberi-50643.htm"><img src="images/32965.jpg"></a></div>
<div class="spot"><a href="asiri-sicaklar-134-can-aldi-haberi-50643.htm">Sıcaklığın 49,3 dereceye kadar yükseldiği ülkede, ölü sayısı 134'e yükseldi.</a></div></div>
<div class="item_2" id="HD2_lst_3" onmouseover="showHD2Item('3');"><div class="item_inner"><a href="kamyon-minibusu-bicti-8-yarali-haberi-50641.htm">» Kamyon minibüsü biçti: 8 yaralı</a></div></div>
<div class="item_3" style="display: none;" id="HD2_cur_3"><div class="title"><a href="kamyon-minibusu-bicti-8-yarali-haberi-50641.htm">Kamyon minibüsü biçti: 8 yaralı</a></div>
<div class="image"><a href="kamyon-minibusu-bicti-8-yarali-haberi-50641.htm"><img src="images/32964.jpg"></a></div>
<div class="spot"><a href="kamyon-minibusu-bicti-8-yarali-haberi-50641.htm">Freni patlayan ve direksiyonu kilitlenen kamyon, minibüsü biçti: 8 yaralı.</a></div></div>
<div class="item_1" id="HD2_lst_4" onmouseover="showHD2Item('4');"><div class="item_inner"><a href="gul-isvicreye-gidiyor-haberi-50638.htm">» Gül İsviçre'ye gidiyor</a></div></div>
<div class="item_3" style="display: none;" id="HD2_cur_4"><div class="title"><a href="gul-isvicreye-gidiyor-haberi-50638.htm">Gül İsviçre'ye gidiyor</a></div>
<div class="image"><a href="gul-isvicreye-gidiyor-haberi-50638.htm"><img src="images/29133.jpg"></a></div>
<div class="spot"><a href="gul-isvicreye-gidiyor-haberi-50638.htm">Cumhurbaşkanı Abdullah Gül, Türkiye'nin 2016 Avrupa Futbol Şampiyonası'na adaylığı kapsamında yürütülen çalışmalara destek amacıyla İsviçre'nin Cenevre kentine gidecek.</a></div></div>
<div class="item_2" id="HD2_lst_5" onmouseover="showHD2Item('5');"><div class="item_inner"><a href="bucasporun-basina-uygun-geliyor-haberi-50637.htm">» Bucaspor'un başına Uygun geliyor</a></div></div>
<div class="item_3" style="display: none;" id="HD2_cur_5"><div class="title"><a href="bucasporun-basina-uygun-geliyor-haberi-50637.htm">Bucaspor'un başına Uygun geliyor</a></div>
<div class="image"><a href="bucasporun-basina-uygun-geliyor-haberi-50637.htm"><img src="images/20107.jpg"></a></div>
<div class="spot"><a href="bucasporun-basina-uygun-geliyor-haberi-50637.htm">Turkcell Süper Lig'in yeni ekiplerinden Bucaspor'da, teknik direktör Bülent Uygun ile anlaşma sağlandığı, yarın sözleşme imzalanacağı bildirildi.</a></div></div>
<div class="item_1" id="HD2_lst_6" onmouseover="showHD2Item('6');"><div class="item_inner"><a href="emniyet-mudurleri-yargilaniyor-haberi-50631.htm">» Emniyet müdürleri yargılanıyor</a></div></div>
<div class="item_3" style="display: none;" id="HD2_cur_6"><div class="title"><a href="emniyet-mudurleri-yargilaniyor-haberi-50631.htm">Emniyet müdürleri yargılanıyor</a></div>
<div class="image"><a href="emniyet-mudurleri-yargilaniyor-haberi-50631.htm"><img src="images/16243.jpg"></a></div><div class="spot"><a href="emniyet-mudurleri-yargilaniyor-haberi-50631.htm">Emniyet Genel Müdür Yardımcısı Emin Arslan ve iki emniyet müdürü hakim karşısında...</a></div></div>
<div class="item_2" id="HD2_lst_7" onmouseover="showHD2Item('7');"><div class="item_inner"><a href="menderes-mezari-basinda-anildi-haberi-50630.htm">» Menderes mezarı başında anıldı</a></div></div><div class="item_3" style="display: none;" id="HD2_cur_7"><div class="title"><a href="menderes-mezari-basinda-anildi-haberi-50630.htm">Menderes mezarı başında anıldı</a></div>
<div class="image"><a href="menderes-mezari-basinda-anildi-haberi-50630.htm"><img src="images/12453.jpg"></a></div><div class="spot"><a href="menderes-mezari-basinda-anildi-haberi-50630.htm">Eski Başbakan Adnan Menderes ile eski bakanlardan Fatih Rüştü Zorlu ve Hasan Polatkan, 27 Mayıs 1960 askeri darbesinin yıldönümünde mezarları başında anıldı.</a></div></div>
<div class="item_1" id="HD2_lst_8" onmouseover="showHD2Item('8');"><div class="item_inner"><a href="dolmus-direge-carpti-9-yarali-haberi-50629.htm">» Dolmuş direğe çarptı: 9 yaralı</a></div></div>
<div class="item_3" style="display: none;" id="HD2_cur_8"><div class="title"><a href="dolmus-direge-carpti-9-yarali-haberi-50629.htm">Dolmuş direğe çarptı: 9 yaralı</a></div>
<div class="image"><a href="dolmus-direge-carpti-9-yarali-haberi-50629.htm"><img src="images/31476.jpg"></a></div><div class="spot"><a href="dolmus-direge-carpti-9-yarali-haberi-50629.htm">Konya'da içinde yolcu bulunan şehir içi minibüsün tramvay yolundaki direğine çarpması sonucu 9 kişi yaralandı. </a></div></div>
<div class="item_2" id="HD2_lst_9" onmouseover="showHD2Item('9');"><div class="item_inner"><a href="youtube-ne-zaman-acilacak-haberi-50628.htm">» Youtube ne zaman açılacak?</a></div></div>
<div class="item_3" style="display: none;" id="HD2_cur_9"><div class="title"><a href="youtube-ne-zaman-acilacak-haberi-50628.htm">Youtube ne zaman açılacak?</a></div>
<div class="image"><a href="youtube-ne-zaman-acilacak-haberi-50628.htm"><img src="images/29950.jpg"></a></div><div class="spot"><a href="youtube-ne-zaman-acilacak-haberi-50628.htm">Başbakan Yardımcısı Bülent Arınç'a, katıldığı İnternet Zirvesi'nde erişim yasağı bulunan sosyal paylaşım sitesi Youtube'un ne zaman açılacağı soruldu. Arınç ayrıca kendisine ait Facebook ya da twitter üyeliğinin olmadığını sözlerine ekledi.</a></div></div>
<div class="item_1" id="HD2_lst_10" onmouseover="showHD2Item('10');"><div class="item_inner"><a href="vali-yuksel-gorevi-devraldi-haberi-50627.htm">» Vali Yüksel görevi devraldı</a></div></div><div class="item_3" style="display: none;" id="HD2_cur_10"><div class="title"><a href="vali-yuksel-gorevi-devraldi-haberi-50627.htm">Vali Yüksel görevi devraldı</a></div>
<div class="image"><a href="vali-yuksel-gorevi-devraldi-haberi-50627.htm"><img src="images/32952.jpg"></a></div><div class="spot"><a href="vali-yuksel-gorevi-devraldi-haberi-50627.htm">Eski Ankara Valisi Kemal Önal'dan boşalan koltuğa oturan vali Alaaddin Yüksel, valilik bahçesinde düzenlenen törenle görevine başladı.</a></div></div></div>ben resim yollarını direk images/ klasörü içersinde gösterdiğim için, indireceğin resimleride yeni oluşturacağın /images/ klasörünün içerisine atacaksın.
style.css dosyasının içerisindeki resimlerinde yine yolları belirtilmiş. ayrıca style.css dosyasındaki kodların sayfamızdaki stil ile çakışmaması içinde herşeyi değil sadece işimize yarayan bölümünü alacağız. ben senin için onuda yaptım
aşağıdaki kodları oluşturduğun style.css ' nin içerisine kaydet ve sytle.css dosyasını yeni oluşturduğun /css/ klasörünün içersine at.
/**/
.font_sizer{
text-align: right;
margin-bottom: 10px;
}
.font_sizer img{
width: 18px;
height: 20px;
margin-left: 2px;
}
/**/
.headline2{
margin-bottom: 9px;
}
.headline2 .item_inner{
width: 250px;
height: 25px;
overflow: hidden;
}
.headline2 .item_1{
background: url(../images/headline_2_item_1_bck.png) no-repeat;
width: 300px;
height: 25px;
margin-bottom: 1px;
font: 700 8pt/25px Tahoma;
}
.headline2 .item_1 a{
padding-left: 13px;
color: #303030;
}
.headline2 .item_2{
background: url(../images/headline_2_item_2_bck.png) no-repeat;
width: 300px;
height: 25px;
margin-bottom: 1px;
font: 700 8pt/25px Tahoma;
}
.headline2 .item_2 a{
padding-left: 13px;
color: #303030;
}
.headline2 .item_3{
position: relative;
width: 300px;
height: 116px;
background: url(../images/headline_2_item_3_bck.png) no-repeat;
margin-bottom: 1px;
}
.headline2 .item_3 .title{
position: absolute;
top: 13px;
left: 13px;
width: 160px;
height: 32px;
font: 700 8pt/16px Tahoma;
overflow: hidden;
}
.headline2 .item_3 .title a{
color: #ffffff;
}
.headline2 .item_3 .spot{
position: absolute;
top: 47px;
left: 13px;
width: 160px;
height: 52px;
font: 100 8pt/13px Tahoma;
overflow: hidden;
}
.headline2 .item_3 .spot a{
color: #a1a1a1;
}
.headline2 .item_3 .image{
position: absolute;
top: 19px;
left: 184px;
display: inline-block;
}
.headline2 .item_3 .image img{
width: 99px;
height: 74px;
margin: 2px;
}
/**/kaydettiğin transmenu.js ' yi oluşturacağın /js/ klasörünün içersine at ve index.html içerisine yazdığımız kodlarıda kaydettikten sonra artık göreceksinki sorunsuz çalışıyor olacaktır.
bu kadar uzun yazıyı bilmeyen arkadaşların mantığını anlaması için yazıyorum. umarım faydalı olabilmişimdir.
örneğini bilgisayarına indirmek için
bu konuyu incele