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>

 

Örnek
CSS ile Menü Yapımı 
<!DOCTYPE html>
<html>

  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    <style>
      body {
        margin: 0;
        font-family: Arial, Helvetica, sans-serif;
      }

      .topnav {
        overflow: hidden;
        background-color: #04AA6D;
      }

      .topnav a {
        float: left;
        display: block;
        color: #f2f2f2;
        text-align: center;
        padding: 14px 16px;
        text-decoration: none;
        font-size: 17px;
      }

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

      .topnav a.active {
        background-color: #04AA6D;
        color: white;
      }

      .topnav .icon {
        display: none;
      }

      @media screen and (max-width: 600px) {
        .topnav a:not(:first-child) {
          display: none;
        }

        .topnav a.icon {
          float: right;
          display: block;
        }

        .topnav.responsive {
          position: absolute;
          top: 0;
          left: 0;
          z-index: 100000;
          width: 100%;
        }

        .topnav.responsive .icon {
          position: absolute;
          right: 0;
          top: 0;
        }

        .topnav.responsive a {
          float: none;
          display: block;
          text-align: left;
        }
      }
    </style>
  </head>

  <body>
    <div class="topnav" id="myTopnav">
      <a href="#home" class="active">Home</a>
      <a href="#news">News</a>
      <a href="#contact">Contact</a>
      <a href="#about">About</a>
      <a href="javascript:void(0);" class="icon" onclick="myFunction()">
        <i class="fa fa-bars"></i>
      </a>
    </div>
    <div style="padding-left:16px">
      <h2>Responsive Topnav Example</h2>
      <p>Resize the browser window to see how it works.</p>
    </div>
    <script>
      function myFunction() {
        var x = document.getElementById("myTopnav");
        if (x.className === "topnav") {
          x.className += " responsive";
        } else {
          x.className = "topnav";
        }
      }
    </script>
  </body>

</html>

 

Örnek
CSS ile Menü Yapımı 
<!DOCTYPE html>
<html>
<head>
<style> 

ul.Anamenu {
position:relative;
}

ul.Anamenu li {
display:inline-block;
/*border: 1px solid grey;*/
background-color:#f4f4f4;
padding: 10px;
transition: all 0.5s;
border-radius:10px;
min-width:100px;
}

ul.Anamenu li:last-child, ul.Anamenu li:first-child, ul.Anamenu li:nth-child(4) {
  background-color: yellow;
}

ul.Anamenu li:hover {
background-color:gold;
cursor:default;
position:relative;
bottom:-10px;
}

ul.Anamenu li ul li:hover {
	bottom:-5px;
}

ul.Anamenu li:hover ul {
	display:block;
}

ul.Anamenu ul li {
	display:block;
    position:relative;
}

ul.Anamenu ul {
	display:none;
    position:absolute;
    z-index:10;
    padding:0;
    margin:0;
    margin-top:10px;
    width:100%;
}
</style>
</head>
<body>


<ul class="Anamenu">
  <li>Ana Sayfa</li>
  <li>Hakkımızda
  		<ul>
        	<li>Kuruluş</li>
        	<li>Gelişim</li>
  			<li>Vizyon</li>
        </ul>
  </li>
  <li>Resimler</li>
  <li>Videolar</li>
  <li>Makaleler</li>
  <li>Arşiv
  		<ul>
        	<li>Dosyalar</li>
        	<li>Resimler</li>
  			<li>Videolar</li>
        </ul>
  </li>
  <li>İletişim</li>
</ul>

</body>
</html>

63,478 Okunma 1 Yorum 12/02/2026.10:16:36 12/02/2026.13:16:54

/ 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

86,457 okuma, 31.05.2014 16:44

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

İngilizce bir makaledir.

50,056 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

36,295 okuma,

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

32,936 okuma, 20.12.2024 09:04

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

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

30,187 okuma, 01.11.2024 13:17

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

29,118 okuma,

Renkli ve Aktif Form Uygulaması
CSS ve Font / Text Uygulamaları

27,674 okuma, 27.11.2025 10:51

CSS ve Font / Text Uygulamaları
CSS ile Pozisyon ve Katman Uygulamaları

27,022 okuma, 25.12.2025 15:27

CSS ile Pozisyon ve Katman Uygulamaları
CSS ve Clip

26,110 okuma, 22.11.2024 13:36

CSS ve Clip
CSS ve Text Uygulamaları

26,098 okuma,

CSS ve Text Uygulamaları
CSS Background Örneği

26,068 okuma,

CSS Background Örneği
CSS Dimension Uygulamaları

Height, width, line-height uygulamaları

25,989 okuma,

CSS Dimension Uygulamaları
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ı

25,965 okuma,

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

25,646 okuma,

CSS ve Tablolar
CSS İle Yorum Baloncukları Yapmak

25,337 okuma, 03.12.2016 00:22

CSS İle Yorum Baloncukları Yapmak
CSS Background Uygulamaları

25,278 okuma, 04.12.2025 10:58

CSS Background Uygulamaları
Tek Parça Resim Dosyasından İlgili Resmi Ekrana Çıkartma

25,150 okuma,

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

Konu hakkında üç farklı örnek

25,052 okuma,

Pseudo - Classes Kullanımları
CSS ve Sıralı Listeler

24,971 okuma,

CSS ve Sıralı Listeler
CSS Border Uygulamaları

24,592 okuma,

CSS Border Uygulamaları
CSS Padding ve Margin

23,918 okuma,

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

Display, none ve Visibility hidden farkı

23,805 okuma,

CSS Görünürlük Özellikleri
CSS Stillerini Web Sayfasına İliştirmek

23,733 okuma,

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

22,454 okuma,

CSS ve Overflow
CSS Animasyon Örnekleri

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

9,413 okuma, 22.11.2024 09:28

CSS Animasyon Örnekleri
Div ile Kart (Card) Yapımı

3,920 okuma, 08.11.2024 11:19

Div ile Kart (Card) Yapımı
Geçişli Renk (Gradient)

3,789 okuma, 20.12.2024 12:27

Geçişli Renk (Gradient)
position:fixed Uygulama Örnekleri

3,778 okuma, 20.12.2024 10:20

position:fixed Uygulama Örnekleri
Küçük Mesaj Ekranı (Toast) Yapımı

3,738 okuma, 13.12.2024 13:38

Küçük Mesaj Ekranı (Toast) Yapımı
Kart Tasarımı

3,442 okuma,

Kart Tasarımı
Yükleniyor...
Yükleniyor...