Kayıt ol

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

Masmavi

Administrator
10
Katılım
9 Haziran 2018
Konular
1,336
Mesajlar
5,589
Çözümler
8
Reaksiyon puanı
1,734
Puanları
113
Konum
İstanbul
Web sitesi
www.masmavi.net
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 => Header - Üst Kısım Html Kodlaması

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>masmavi.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.masmavi.net">masmavi.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 => Header - Üst Kısım Html Kodlaması

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>masmavi.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.masmavi.net">masmavi.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 => Header - Üst Kısım Html Kodlaması

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>masmavi.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.masmavi.net">masmavi.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 => Header - Üst Kısım Html Kodlaması

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>masmavi.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.masmavi.net">masmavi.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

Katılımcı
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.

Modem ara yüzüne erişmek için Tüm Marka ve Model Modem Şifreleri konumuza göz atabilirsiniz.
Üst