Skip to content

Commit

Permalink
Kod duzeltmeleri
Browse files Browse the repository at this point in the history
  • Loading branch information
@fatihhayri
fatihhayri committed Nov 15, 2023
1 parent e211d17 commit bd242b0
Show file tree
Hide file tree
Showing 4 changed files with 150 additions and 136 deletions.
173 changes: 91 additions & 82 deletions _posts/2006-11-08-css-ile-menu-yapmak-iii-dikey-acilir-menuler.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,49 +17,52 @@ sıralanmamış listeleri(<ul\>) kullanacağız. Buradaki fark alt
kategorilerin yani üzerine gelince açılacak menünün bir alt sırlanmış
liste olarak eklenmesidir.

:::html
<ul id="menu" >
<li><a href="#">Anasayfa</a></li>
<li><a href="#">Haberler</a>
<ul>
<li><a href="#">şžirket Haberleri </a></li>
<li><a href="#">Yurt içi Haberleri </a></li>
<li><a href="#">Yurt dışı Haberleri</a></li>
</ul>
</li>
<li><a href="#">Ürünler</a>
<ul>
<li><a href="#">Tencere</a></li>
<li><a href="#">Tava</a></li>
<li><a href="#">Ütü</a></li>
<li><a href="#">Tost Makinesi </a></li>
<li><a href="#">El Süpürgesi </a></li>
</ul>
</li>
```html
<ul id="menu" >
<li><a href="#">Anasayfa</a></li>
<li><a href="#">Haberler</a>
<ul>
<li><a href="#">şžirket Haberleri </a></li>
<li><a href="#">Yurt içi Haberleri </a></li>
<li><a href="#">Yurt dışı Haberleri</a></li>
</ul>
</li>
<li><a href="#">Ürünler</a>
<ul>
<li><a href="#">Tencere</a></li>
<li><a href="#">Tava</a></li>
<li><a href="#">Ütü</a></li>
<li><a href="#">Tost Makinesi </a></li>
<li><a href="#">El Süpürgesi </a></li>
</ul>
</li>
</ul>
```

![][100]

İlk olarak satır başı boşluklarını ve imgeleri kaldıralım.

:::css
ul {
margin: 0;
padding: 0;
list-style: none;
width: 150px;
}
```css
ul {
margin: 0;
padding: 0;
list-style: none;
width: 150px;
}
```

![][1]

Sonra ilk linkleri göreceli olarak konumlandırmalıyız. Bu konumlandırma
aslında ikinci kademe açılacak menüye mutlak konumlandırma yapılması
için kullanılır.

:::css
ul li {
position: relative;
}
```css
ul li {
position: relative;
}
```

Bir sonraki adımda da ikincil açılan menüleri konumlandırmak olacaktır.
Her birinci linke karşılık gelen ikincil açılır menüler ilkinin sağına
Expand All @@ -68,13 +71,14 @@ sola kaydırılır ki fare ilk linki üzerinde ikinci linkin üzerine
glemeden kaybolmasın. Ayrıca ikincil linklerin ilk sayfa açıldığında
görünmemesi için display:none özelliği atanır.

:::css
li ul {
position: absolute;
left: 149px;
top: 0;
display: none;
}
```css
li ul {
position: absolute;
left: 149px;
top: 0;
display: none;
}
```

![][2]

Expand All @@ -87,48 +91,52 @@ tanımı ver kenarlık tanımı yapalım. Üstteki linkin alt kenarlığı ile
alttaki linkin üst kenarlığı üst üste bineceğinde alt kenarlık değerini
sıfırlayalım.

:::css
ul li a {
display: block;
text-decoration: none;
background-color: #E2E2E2;
padding: 5px;
border:1px solid #000;
border-bottom:0;
}
```css
ul li a {
display: block;
text-decoration: none;
background-color: #E2E2E2;
padding: 5px;
border:1px solid #000;
border-bottom:0;
}
```

Bu kodu yazdığımızda IE linkler arasına boşluk koyacaktır(IE7 de hala bu
sorun devam ediyor) bu durumu düzeltmek için:

:::css
/* IE. gizle \*/
* html ul li { float: left; height: 1%; }
* html ul li a { height: 1%; }
/* IE den gizleme sonu */
```css
/* IE. gizle \*/
* html ul li { float: left; height: 1%; }
* html ul li a { height: 1%; }
/* IE den gizleme sonu */
```

![][3]

En alttaki çizgimiz eksik kalmaması için ilk link ul'sinin alt kenarlık
tanım yaparız.

:::css
ul {
margin: 0;
padding: 0;
list-style: none;
width: 150px;
border-bottom: 1px solid #00;
}
```css
ul {
margin: 0;
padding: 0;
list-style: none;
width: 150px;
border-bottom: 1px solid #00;
}
```

![][4]

Birincil menü görünümü tamamlandı ancak ikincil menüler görünmüyor.
İkincil menüleri göstermek için:

:::css
li:hover ul {
display: block;
}
```css
li:hover ul {
display: block;
}
```


Bu kadar basit bir kod menümüzü tamamlar. Ancak bir sorun var ki o da
Expand All @@ -141,33 +149,34 @@ linklerde (<a\>) uygulanmasını destekler diğer elementlerde bu
Peki menümüz böyle mi kalacak hayır. IE6 ve altı için bir javascript
kodu yazacağız.

:::javascript
startList = function() {
```javascript
startList = function() {
if (document.all&&document.getElementById) {
navRoot = document.getElementById("menu");
for (i=0; i<navRoot.childNodes.length; i++) {
node = navRoot.childNodes[i];
if (node.nodeName=="LI") {
node.onmouseover=function() {
this.className+=" over";
navRoot = document.getElementById("menu");
for (i=0; i<navRoot.childNodes.length; i++) {
node = navRoot.childNodes[i];
if (node.nodeName=="LI") {
node.onmouseover=function() {
this.className+=" over";
}
node.onmouseout=function() {
this.className=this.className.replace(" over", "");
}
}
}
}
node.onmouseout=function() {
this.className=this.className.replace(" over", "");
}
}
}
}
}
window.onload=startList;
}
window.onload=startList;
```

Bu çözümü bize kazandıran arkadaşlara teşekkürü bir borç biliriz ve
[linkini][] de yazarız.

Ayrıca aşağıdaki kodu da eklemeliyiz.

:::css
li:hover ul, li.over ul{ display: block; }

```css
li:hover ul, li.over ul{ display: block; }
```

Ayrıca kod daki<ul id="**menu**" \> ve javascriptteki navRoot = document.getElementById("**menu**"); aynı olmasına dikkat edelim.

Expand Down
2 changes: 1 addition & 1 deletion _posts/2006-12-02-yuvarlak-kenarli-kutular.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -131,7 +131,7 @@ görecektir:
</div>
</div>
</div>
``
```

Dört resimin iki tanesi üst köşeleri yuvarlamak için, iki tanesi alt
köşeleri yuvarlamak için kullanacağız.
Expand Down
49 changes: 25 additions & 24 deletions _posts/2006-12-05-icice-float-elementlerinin-kullanimi.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,18 +11,19 @@ güzel imkanlar sağlar. Bir genel float elementinin sağ üstüne bir float
element yerleştirelim. Bu kodlama genelde menü ve resim ekleme gibi
durumlar için kullanılır.

:::css
#icerikAlani {
margin: 10px;
border: 1px solid gray;
}
#icerikAlani #menu {
float: right;
width: 150px;
border-left: 1px solid gray;
border-bottom: 1px solid gray;
margin-left: 5px;
}
```css
#icerikAlani {
margin: 10px;
border: 1px solid gray;
}
#icerikAlani #menu {
float: right;
width: 150px;
border-left: 1px solid gray;
border-bottom: 1px solid gray;
margin-left: 5px;
}
```

İçerik alanına(#icerikAlani) margin ve kenarlık tanımlası yaptık. Daha
sonra menu alanını(#menu) içerik alanının sağ üst kısmına yerleştirmek
Expand All @@ -32,19 +33,19 @@ border-bottom**(sağ ve üst ksımlarda zaten olduğu için buralara kenarlık
ataması yapmadık) ve içerik metini ile arasında boşluk bırakmak için
**margin-left** atamlarını yapıyoruz.

:::html
<div id="icerikAlani">
<div id="menu">
<ul>
<li><a href="anasayfa.html">Ana Sayfa </a></li>
<li><a href="haberler.html">Haberler</a></li>
<li><a href="iletisim.html">İletişim</a></li>
</ul>
</div>
<h1>Lorem Ipsum Dolar </h1>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p> . . .
```html
<div id="icerikAlani">
<div id="menu">
<ul>
<li><a href="anasayfa.html">Ana Sayfa </a></li>
<li><a href="haberler.html">Haberler</a></li>
<li><a href="iletisim.html">İletişim</a></li>
</ul>
</div>

<h1>Lorem Ipsum Dolar </h1>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p> . . .
</div>
```

Örnek sayfayı görmek için [tıklayınız.][]

Expand Down
Loading

0 comments on commit bd242b0

Please sign in to comment.