CSS ile Menü Yapımı

CSS'in menü yapımına etkileri
Örnek1 Html kod:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link rel="stylesheet" type="text/css" href="stilim7.css" />
</head>

<body>

<ul style="list-style-type:none;" id="menu1">

        <li> Menu 1 </li>
        <li> Menu 2 </li>
        <li> Menu 3 </li>
        <li> Menu 4 </li>

</ul>
<ul style="list-style-type:none;" class="menu2">

        <li> <a href="http://www.google.com">Google</a> </li>
        <li> Menu 2 </li>
        <li> Menu 3 </li>
        <li> Menu 4 </li>

</ul> 
<ul style="list-style-type:none;" class="menu3">

        <li> Menu 1 </li>
        <li> Menu 2 </li>
        <li> Menu 3 </li>
        <li> Menu 4 </li>
</ul>

</body>
</html>

 

  CSS kodu (sitilim7.css):  

#menu1 li{ color:#ffffff; background-color:#CC0066; margin:10px; width:100px; height:20px; padding:5px; margin:3px; font-family:Impact; cursor:pointer; display:inline}

#menu1 li:hover { color:#CC0066; background-color:#CCCC00; margin:10px; width:100px; height:20px; margin:2px; padding:5px; font-family:Impact; cursor:pointer; display:inline}

.menu2 li { color:#ffffff; background-color:#CC0066; margin:10px; width:100px; height:20px; padding:5px; margin:3px; font-family:Impact; cursor:pointer;}

.menu2 li:hover { color:#CC0066; background-color:#CCCC00; margin:10px; width:100px; height:20px; margin:2px; padding:5px; font-family:Impact; cursor:pointer; }

.menu3 li { color:#ffffff; background-color:#A347FF; margin:10px; width:100px; height:20px; padding:2px; margin:2px; font-family:Impact; cursor:pointer; display:inline}

.menu3 li:hover { color:#fffff; background-color:#A347FF; margin:10px; width:100px; height:20px; padding:5px; margin:2px; font-family:Impact; cursor:pointer; display:inline}

  www.dijitalders.com

Örnek 2 Html Kodu:

www.dijitalders.com

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link rel="stylesheet" type="text/css" href="stilim8.css" />
</head>
<body>
 

<ul style="list-style-type:none;" id="menu1">

        <li> Menu 1 </li>
        <li> Menu 2 </li>
        <li> Menu 3 </li>
        <li> Menu 4 </li>

</ul>

</body>        
</html>

  CSS kod (sitilim8.css):   

#menu1 li{ color:#ffffff; background-image:url(m1.gif); margin:10px; width:111px; height:41px; padding:5px; margin:3px; font-family:Impact; cursor:pointer; display:inline}

#menu1 li:hover { color:#CC0066; background-image:url(m2.gif); margin:10px; width:111px; height:41px; margin:2px; padding:5px; font-family:Impact; cursor:pointer; display:inline}

 

Örnek 3 Html  Kod:

www.dijitalders.com

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link rel="stylesheet" type="text/css" href="stilim3.css" />
</head>

<body>
<ul class="menu" style="list-style-type:none">
        <li>Menu1</li>
        <li>Menu2</li>
        <li>Menu3</li>
        <li>Menu4</li>
</ul>
</body>

</html>

 

CSS kod (sitilim3.css):  

*{ cursor:default }

.menu li { width:100px; height:27px; color:#ffffff; font-family:Impact; font-size:12pt; text-align:center; padding-top:4px; background-image:url(b1.gif);}

.menu li:hover { width:100px; height:27px; color:#ffffff; font-family:Impact; font-size:12pt; text-align:center; padding-top:4px; background-image:url(b2.gif); }

 

Örnek 4 Html Kod : 

CSS ile Menü Yapımı  

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link rel="stylesheet" type="text/css" href="stilim5.css" />
</head>
<body>

<table class="menuler" cellpadding="0" cellspacing="0" rules="cols" style="border:1px solid #ffffff">
        <tr>
                <td>Menu A</td>
                <td>Menu B</td>
                <td>Menu C</td>
                <td>Menu D</td>
        </tr>
</table>
</body>
</html>

  CSS kod (sitilim5.css) : 

* { cursor:default }

.menuler td { width:100px; height:30px; color:#ffffff; font-family:Impact; font-size:12pt; text-align:center; margin:0px; padding:0px;background-color:#8A8A2E;}

.menuler td:hover { width:100px; height:30px; color:#ffffff; font-family:Impact; font-size:12pt; text-align:center; margin:0px; padding:0px; background-color:#8A8A2E; background-image:url(ust.gif); background-repeat:no-repeat; background-position:top center }

 

Örnek 5 HTML Kod :

CSS ile Menü Yapımı

<!DOCTYPE HTML>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <title>Untitled Document</title>
        <link rel="stylesheet" type="text/css" href="stil.css">
    </head>

    <body>
        <ul id="Menu">
            <li> Spor </li>
            <li> Video </li>
            <li> Galeri </li>
            <li> Sağlık </li>
        </ul>
    </body>
</html>
 

  stil.css:

#Menu {
    list-style-type:none;
}
#Menu>li {
    background-color: #FBFAF8;
    border-top: 2px solid #F4F3E0;
    border-bottom: 3px solid #F4F3E0;
    float:left;
    height: 140px;
    min-width: 150px;
    color:#81A731;
    font:24px/140px bold Arial, Helvetica, sans-serif;
    text-transform:uppercase;
    text-align:center;
}
#Menu>li:hover {
    border: 1px solid #F4F3E0;
    border-top:3px solid #3CC;
    cursor:default;
    background-color:#FBFCF9;
    height:150px;
    color:#645951;
    font-size:26px;
}

 

Örnek 6 HTML Kod :

CSS ile Menü Yapımı

<!DOCTYPE HTML>
<html lang="tr">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <title>Untitled Document</title>
        <link rel="stylesheet" type="text/css" href="stil.css">
    </head>

    <body>
        <div>
            <ul id="Menu">
                <li> Spor
                    <div>Spor Yapıyoruz</div>
                </li>
                <li> Video
                    <div>Seyrediyoruz</div>
                </li>
                <li> Galeri
                    <div>Geziyoruz</div>
                </li>
                <li> Sağlık
                    <div>Sağlıklıyız</div>
                </li>
            </ul>
        </div>
    </body>
</html>

stil.css

body>div {
    background-color: #FBFAF8;
    height: 140px;
    width: 100%;
    border-bottom: 3px solid #F4F3E0;
    border-top: 2px solid #F4F3E0;
}
#Menu {
    list-style-type:none;
    margin:0;
}
#Menu>li {
    background-color: #FBFAF8;
    color: #81A731;
    float: left;
    font: 24px/24px bold Arial, Helvetica, sans-serif;
    height: 90px;
    min-width: 150px;
    padding: 50px 0 0 0;
    text-align: center;
    text-transform: uppercase;
}
#Menu>li>div {
    font-size:12px;
    color:#BEBBB8;
}
#Menu>li:hover {
    border: 1px solid #F4F3E0;
    border-top:3px solid #3CC;
    cursor:default;
    height: 100px;
    padding: 50px 0 0 0;
    background-color:#FBFCF9;
    color:#645951;
    font-size:26px;
}
#Menu>li:hover>div {
    color:#81A731;
}

   

 

Örnek

CSS ile Menü Yapımı

<style>
body {
  margin: 0;
  font-family: Arial, Helvetica, sans-serif;
}

.UstBar {
  height: 48px;
  background-color: #333;
}

.UstBar a {
  color: #f2f2f2;
  text-align: center;
  padding: 15px 16px;
  text-decoration: none;
  font-size: 17px;
  transition: all 1s;
  float: left;
}

.UstBar a:hover {
  background-color: #ddd;
  color: black;
}

.UstBar a:nth-child(2) {
  background-color: #04AA6D;
  color: white;
}
</style>

    <div class="UstBar">
        <a  href="#">Logo</a>
        <a  href="#">Ana Sayfa</a>
        <a href="#">Galeri</a>
        <a href="#">Videolar</a>
        <a href="#">Hakkımızda</a>
        <a href="#">iletişim</a>
    </div>

 

 

 

57,915 Okunma Henüz yorum yapılmamış 01/11/2024 12:36:47 01/11/2024 12:37:49

Yorumunuzu Ekleyin
CSS ile Menü Yapımı Yorumları +1 Yorum
  • premium template
    1
    premium template
    Yaa Bir türlü Yatay Drop Down tipli bir menü bulamadım

    Her menü için farklı renkte olan

    www.premiumtemplate.net için( öneride bulunabilirmisiniz nasıl bir menü uygun olur sizce...)

    yardımcı olabilecek varsa sevinirim.
    22 Ağustos 2016 18:05:33, Pazartesi
Görsel Liste


Div ile Bölümler Oluşturmak

Div tagı yardımı ile sayfalı %40 ve %60 şeklinde ikiye bölüp içerisine iki farklı içerik yerleştirme ile ilgili bir çalışma

82,310 okuma, 31/05/2014

Div ile Bölümler Oluşturmak
List Tagları ve Css ile Yatay Menü Yapımı

İngilizce bir makaledir.

46,221 okuma,

List Tagları ve Css ile Yatay Menü Yapımı
CSS ile Dikey Menü Yapımı

Web sitelerinin vazgeçilmez öğelerinde biridir menüler. Menüler kullanıcının oluşturduğumuz sayfalara hızlı erişimini sağlar. Bir çok site de Ürünler, İletişim, Hakkımızda vb. bölümlerini menü öğesi olarak görürüz. Bu makalede sırasız listeler()ve CSS yardımı ile menü yapımını anlatacağız. CSS ile yapılan menüler esnek, kolay düzenlenebilir, güzel görünen ve rollover efekti uygulana bilen menülerdir

33,134 okuma,

CSS ile Dikey Menü Yapımı
CSS z-index Uygulamaları

29,396 okuma, 31/05/2014

CSS z-index Uygulamaları
Renkli Form Yapımı

CSS yardımı ile renkli form kutucuklarının nasıl yapıldığına bir örnek

26,856 okuma, 01/11/2024

Renkli Form Yapımı
Renkli ve Aktif Form Uygulaması

25,744 okuma,

Renkli ve Aktif Form Uygulaması
CSS ve Font Uygulamaları

24,007 okuma,

CSS ve Font Uygulamaları
CSS ve Clip

23,153 okuma, 28/05/2014

CSS ve Clip
CSS ve Text Uygulamaları

23,127 okuma,

CSS ve Text Uygulamaları
CSS Background Örneği

23,077 okuma,

CSS Background Örneği
Tek parça resim dosyasından ilgili resmi css ile gösterme

Tek parça resim dosyasından ilgili resmi css ile gösterme çağrı

22,936 okuma,

Tek parça resim dosyasından ilgili resmi css ile gösterme
CSS ile Pozisyon ve Katman Uygulamaları

22,835 okuma,

CSS ile Pozisyon ve Katman Uygulamaları
CSS Dimension Uygulamaları

Height, width, line-height uygulamaları

22,822 okuma,

CSS Dimension Uygulamaları
CSS ve Tablolar

22,563 okuma,

CSS ve Tablolar
CSS İle Yorum Baloncukları Yapmak

22,258 okuma, 03/12/2016

CSS İle Yorum Baloncukları Yapmak
Pseudo - Classes Kullanımları

Konu hakkında üç farklı örnek

22,181 okuma,

Pseudo - Classes Kullanımları
Tek Parça Resim Dosyasından İlgili Resmi Ekrana Çıkartma

22,103 okuma,

Tek Parça Resim Dosyasından İlgili Resmi Ekrana Çıkartma
CSS ve Sıralı Listeler

22,087 okuma,

CSS ve Sıralı Listeler
CSS Border Uygulamaları

21,698 okuma,

CSS Border Uygulamaları
CSS Background Uygulamaları

21,552 okuma,

CSS Background Uygulamaları
CSS Görünürlük Özellikleri

Display, none ve Visibility hidden farkı

20,979 okuma,

CSS Görünürlük Özellikleri
CSS Padding ve Margin

20,856 okuma,

CSS Padding ve Margin
CSS Stillerini Web Sayfasına İliştirmek

20,768 okuma,

CSS Stillerini Web Sayfasına İliştirmek
CSS ve Overflow

19,477 okuma,

CSS ve Overflow
CSS Animasyon Örnekleri

Bir kaç faydalı cssle yapılan animasyon örneği...

5,499 okuma, 27/06/2019

CSS Animasyon Örnekleri
Yükleniyor...
Yükleniyor...