Kayıt ol
  • Sosyal Medya Hesaplarımız:

İndex çalışmalarınız için üst menü kodları

Adanalı

sɹǝʇ nq ʞǝʇ ɹıq ؛ ɐp ɐpunloʎ ʎǝsɹǝɥ ıʞuɐs
Yönetici
10
Katılım
9 Haziran 2018
Konular
1,392
Mesajlar
4,719
Çözümler
5
Reaksiyon puanı
1,283
Puanları
113
Konum
Adana
Cinsiyet
Erkek
İndex yapan arkadaşlar için hazırladığım beyaz, kırmızı, mavi ve pembe renklerinden oluşan 4 adet html ve css üst menü kodları.

Beyaz demo ve kodları:

Beyaz renk menü ön izleme linki =>
Değerli ziyaretçimiz, içeriği görüntüleyebilmek için lütfen Giriş yap veya Kayıt ol anlayışınız için teşekkürler.


Kodları:
Kod:
<style type="text/css">
* {margin:0 auto;padding:0;}
#header {background: url(images/header-bg.png);width:100%; height:70px;}
.content {width:80%;}
.content h1 {font-family:'Ranga', cursive;line-height:70px;color:#fff;cursor:default;}
.menu {margin-right:0;float:right;font-family:'Tahoma';}
.menu ul {position:relative;top:-70px;}
.menu ul li {list-style:none;float:left;margin-left:1px;}
.menu ul li a {color: #fff; padding: 25px 5px;text-decoration:none;display:block;}
.menu ul li a:hover {background:#fff;color:black;}
</style>
<body>
    <div id="header">
    <div class="content"><h1>FlatKolik.Net</h1>
    <div class="menu">
    <ul>
        <li><a href="#">Anasayfa</a></li>
        <li><a href="#">Dj Girişi</a></li>
        <li><a href="#">Nick Al</a></li>
        <li><a href="#">Aktivex</a></li>
        <li><a href="https://www.flatkolik.net">FlatKolik.Net</a></li>
        <li><a href="#">Yayıncılarımız</a></li>
        <li><a href="#">Kurallarımız</a></li>
    </ul>
    </div>
    <div>

Kırmızı demo ve kodları:

Kırmızı renkli menü ön izleme linki =>
Değerli ziyaretçimiz, içeriği görüntüleyebilmek için lütfen Giriş yap veya Kayıt ol anlayışınız için teşekkürler.


Kırmızı renkli menü kodları:
Kod:
<style type="text/css">
* {margin:0 auto;padding:0;}
#header {background: url(images/header-bg.png);width:100%; height:70px;}
.content {width:80%;}
.content h1 {font-family:'Ranga', cursive;line-height:70px;color:red;cursor:default;}
.menu {margin-right:0;float:right;font-family:'Tahoma';}
.menu ul {position:relative;top:-70px;}
.menu ul li {list-style:none;float:left;margin-left:1px;}
.menu ul li a {color:red; padding: 25px 5px;text-decoration:none;display:block;}
.menu ul li a:hover {background:red;color:black;}
</style>
<body>
    <div id="header">
    <div class="content"><h1>FlatKolik.Net</h1>
    <div class="menu">
    <ul>
        <li><a href="#">Anasayfa</a></li>
        <li><a href="#">Dj Girişi</a></li>
        <li><a href="#">Nick Al</a></li>
        <li><a href="#">Aktivex</a></li>
        <li><a href="https://www.flatkolik.net">FlatKolik.Net</a></li>
        <li><a href="#">Yayıncılarımız</a></li>
        <li><a href="#">Kurallarımız</a></li>
    </ul>
    </div>
    <div>

Mavi demo ve kodları:

Mavi renkli menü ön izleme linki =>
Değerli ziyaretçimiz, içeriği görüntüleyebilmek için lütfen Giriş yap veya Kayıt ol anlayışınız için teşekkürler.


Mavi renki menü kodları:
Kod:
<style type="text/css">
* {margin:0 auto;padding:0;}
#header {background: url(images/header-bg.png);width:100%; height:70px;}
.content {width:80%;}
.content h1 {font-family:'Ranga', cursive;line-height:70px;color:#56aaff;cursor:default;}
.menu {margin-right:0;float:right;font-family:'Tahoma';}
.menu ul {position:relative;top:-70px;}
.menu ul li {list-style:none;float:left;margin-left:1px;}
.menu ul li a {color: #56aaff; padding: 25px 5px;text-decoration:none;display:block;}
.menu ul li a:hover {background:#56aaff;color:black;}
</style>
<body>
    <div id="header">
    <div class="content"><h1>FlatKolik.Net</h1>
    <div class="menu">
    <ul>
        <li><a href="#">Anasayfa</a></li>
        <li><a href="#">Dj Girişi</a></li>
        <li><a href="#">Nick Al</a></li>
        <li><a href="#">Aktivex</a></li>
        <li><a href="https://www.flatkolik.net">FlatKolik.Net</a></li>
        <li><a href="#">Yayıncılarımız</a></li>
        <li><a href="#">Kurallarımız</a></li>
    </ul>
    </div>

Pembe menü demo ve kodları:

Pembe renkli menü ön izleme linki =>
Değerli ziyaretçimiz, içeriği görüntüleyebilmek için lütfen Giriş yap veya Kayıt ol anlayışınız için teşekkürler.


Pembe renkli menü kodları:
Kod:
<style type="text/css">
* {margin:0 auto;padding:0;}
#header {background: url(images/header-bg.png);width:100%; height:70px;}
.content {width:80%;}
.content h1 {font-family:'Ranga', cursive;line-height:70px;color:#ff56ff;cursor:default;}
.menu {margin-right:0;float:right;font-family:'Tahoma';}
.menu ul {position:relative;top:-70px;}
.menu ul li {list-style:none;float:left;margin-left:1px;}
.menu ul li a {color: #ff56ff; padding: 25px 5px;text-decoration:none;display:block;}
.menu ul li a:hover {background:#ff56ff;color:black;}
</style>
<body>
    <div id="header">
    <div class="content"><h1>FlatKolik.Net</h1>
    <div class="menu">
    <ul>
        <li><a href="#">Anasayfa</a></li>
        <li><a href="#">Dj Girişi</a></li>
        <li><a href="#">Nick Al</a></li>
        <li><a href="#">Aktivex</a></li>
        <li><a href="https://www.flatkolik.net">FlatKolik.Net</a></li>
        <li><a href="#">Yayıncılarımız</a></li>
        <li><a href="#">Kurallarımız</a></li>
    </ul>
    </div>
    <div>

Hangi rengi eklemek istiyorsanız o renk kodlarını buradan kopyalayarak indexinizde eklemek istediğiniz yere yapıştırarak düzenleyebilirsiniz.

Not: Ekte bulunan header-bg.png adlı resmi indexinizin images klasörüne yüklemeyi unutmayınız :)
 

Ekli dosyalar

  • header-bg.png
    header-bg.png
    950 bayt · Gösterim: 18

Sabotaj

Kayıtlı Üye +
1
Katılım
27 Temmuz 2020
Konular
0
Mesajlar
95
Reaksiyon puanı
10
Puanları
8
Cinsiyet
Erkek
emeginize saglik paylasima tesekkurler
 

Yorum yapmak için bir hesap oluşturun veya giriş yapın

Yeni bir konu oluşturabilmek veya konulara cevap verebilmek için sitemize üye olmanız gerekmektedir

Hesap oluştur

Forum sitemizde bir hesap oluşturun. Bu işlem çok kolay!

Giriş yap

Zaten bir hesabınız var mı? Giriş yapın.

DMCA.com Protection Status
Üst