CSS İle Üst Menü Yapımı

Merhaba, Ziyaretçi! (Kayıt Ol — Şifremi Unuttum)

Blackinci bilgilerini paylaştığı kişisel
web sitesi
blackinci.com
Kategoriler halinde düzenlenmiş program arşivi
indirnet.org
Reklam Vermek İster misiniz
İletişim
500 Mb Hosting
10 GB Trafik
Yıllık : 30 YTL
dinamithosting.com
iyinet webmaster forumu 2008 seo yarışması
oqtr.com
MYBB Kurmaya Uygun
Ücretsiz Kurulum
Turhost.com

Sayfa (4): « İlk [1] 2 3 4 Sonraki > En Son »

Normal Mod | Çizgisel Mod

CSS İle Üst Menü Yapımı

Yazar Mesaj

Batur
Admin

Mesajlar: 5,737
Grup: Admin
Katılım: 2006
Statü: Çevrimiçi
Karma Puanı: 58

Mesaj: #1

CSS İle Üst Menü Yapımı

Css ile yapacağımız menü neye benziyor? Hemen altta caps mevcut.

Öncelikle Aşağıdaki kodları altta bahsettiğim yolu takip edip Ek Css kısmına ekliyelim.

Admin KP - Tema - Düzenle / Sil - Kullandığınız Temadan Git - Sayfanın en altına inip Ek Css Bölümünün de en altına inelim ve alttaki kodları oraya ekleyelim.

Kod:

<style type="text/css">

/*Credits: Dynamic Drive CSS Library */

/*Paylaşım: MyBBDestek.Com (Batur) */

.indentmenu{

font: bold 13px Arial;

width: 100%; /*leave this value as is in most cases*/

}

.indentmenu ul{

margin: 0;

padding: 0;

float: left;

width: 100%; /*width of menu*/

border: 1px solid #564c66; /*dark purple border*/

border-width: 1px 0;

background: black url(images/indentbg.gif) center center repeat-x;

}

.indentmenu ul li{

display: inline;

}

.indentmenu ul li a{

float: left;

color: white; /*text color*/

padding: 5px 11px;

text-decoration: none;

border-right: 1px solid #564c66; /*dark purple divider between menu items*/

}

.indentmenu ul li a:visited{

color: white;

}

.indentmenu ul li a:hover, .indentmenu ul li .current{

color: white !important; /*text color of selected and active item*/

padding-top: 6px; /*shift text down 1px for selected and active item*/

padding-bottom: 4px; /*shift text down 1px for selected and active item*/

background: black url(images/indentbg2.gif) center center repeat-x;

}

</style>

Daha Sonra Kalıplardan;

Düzenle / Sil - Kullandığımız Tema - Genişlet - Header kalıbını açıyoruz. Burada istediğiniz yere ise aşağıdaki kodları ekliyorsunuz. Ben denemelik bir menü hazırladım. Sizler kendinize göre aşağıdaki kodu düzenlersiniz.

Kod:

<div class="indentmenu">

<ul>

<li><a href="{$mybb->settings['bburl']}/portal.php/">Portal</a></li>

<li><a href="{$mybb->settings['bburl']}/index.php/" class="current">Forum Ana  Sayfa</a></li>

<li><a href="{$mybb->settings['bburl']}/usercp.php/">Kullanıcı KP</a></li>

<li><a href="{$mybb->settings['bburl']}/private.php?fid=1">Gelen Özel Masajlarım</a></li>

<li><a href="{$mybb->settings['bburl']}/private.php?action=send">Özel Mesaj Gönder</a></li>

<li><a href="{$mybb->settings['bburl']}/usercp.php?action=profile">Profil Ayarlarım</a></li>

<li><a href="{$mybb->settings['bburl']}/member.php?action=logout&uid={$mybb->user['uid']}&sid={$session->sid}">Çıkış Yap</a></li>

</ul>

<br style="clear: left" />

</div>

Düzenleme yapabileceğiniz yerler ve açıklamaları;

Kod:

<li><a href="{$mybb->settings['bburl']}/portal.php/">Portal</a></li>

Yukarıdaki kodlarda bulunan settings['bburl']} kısmı sitenizin ana adresidir. Örneğin bizim için orası http://www.mybbdestek.com anlamındadır. Eğer portal sayfasına link vermek istiyorsam settings['bburl']}/portal.php olmalı. tıklandığında çalışacak link http://www.mybbdestek.com/portal.php dir.

>Portal< burası ise sayfalarınızda görünecek menüdeki tıklanacak isim kısmıdır. Sayfada sadece Portal kelimesi gözükür.

Not: Verdiğim menü rengini değiştrimek isteyenler indentbg.gif ve indentbg2.gif resimlerini kendileri tasarlamak zorundalar. Birazcık Photoshop bilgisi yere herhalde.

Ben standart gifleri aşağı ekliyorum. İsteyenler bunları da kullanabilir.

Ek olarak birde siyah zemin üzerine gelince de kırmızı olacak gifleri rarladım şidi, ekten indirebilirsiniz.

Eklenti(ler)

indentbg.gif (Boyut: 292 byte / İndirilme: 1792)
.gif File

indentbg2.gif (Boyut: 300 byte / İndirilme: 1787)
.rar File

kirmizi-siyah.rar (Boyut: 256 byte / İndirilme: 189)

En son düzenleme: 01-05-2008 11:43 Batur.

28-10-2007 02:48

Bu kullanıcının gönderdiği mesajları bul

medea
İbrahimKendirci.OrG

Mesajlar: 2,473
Grup: Üye
Katılım: 2007
Statü: Çevrimdışı
Karma Puanı: 10

Mesaj: #2

RE: CSS İle Üst Menü Yapımı

tşkler batur hocam güzel olmuş

28-10-2007 02:53

uwit
I LoVe You PS

Mesajlar: 894
Grup: Üye
Katılım: 2007
Statü: Çevrimdışı
Karma Puanı: 1

Mesaj: #3

RE: CSS İle Üst Menü Yapımı

tşk batur

28-10-2007 02:58

Dedektif
Mesajcı Üye

Mesajlar: 1,577
Grup: Üye
Katılım: 2007
Statü: Çevrimdışı
Karma Puanı: 14

Mesaj: #4

RE: CSS İle Üst Menü Yapımı

Bravo sana Batur hocam. Yeni açacağım sitede bunu kullanıcam

28-10-2007 02:58

Batur
Admin

Mesajlar: 5,737
Grup: Admin
Katılım: 2006
Statü: Çevrimiçi
Karma Puanı: 58

Mesaj: #5

RE: CSS İle Üst Menü Yapımı

Güle güle kullanın arkadaşlar.

28-10-2007 03:00

the.danger
www.forumdanger.net

Mesajlar: 312
Grup: Üye
Katılım: 2007
Statü: Çevrimdışı
Karma Puanı: 2

Mesaj: #6

RE: CSS İle Üst Menü Yapımı

TeşekkürLer.

28-10-2007 03:01

exosmaster
m a r u n v

Mesajlar: 478
Grup: Üye
Katılım: 2007
Statü: Çevrimdışı
Karma Puanı: 1

Mesaj: #7

RE: CSS İle Üst Menü Yapımı

Çok güzel anlatım. Tşkler... Batur bugün 2. sorum olacak http://www.marunv.com daki üst menüleri forum ve anasayfayı birbirine benzettim fakat linkin üstüne gelindiğinde kırmızı arkaplan yerine buradaki gibi resim koymak istiyorum.

background: black url(images/indentbg.gif) center center repeat-x;

.identmenu ul nin altına eklesem işe yarar mı?

28-10-2007 03:20

Batur
Admin

Mesajlar: 5,737
Grup: Admin
Katılım: 2006
Statü: Çevrimiçi
Karma Puanı: 58

Mesaj: #8

RE: CSS İle Üst Menü Yapımı

kullandığın css kodlarındaki background: kodunu resme göre düzenlersen olur.

yukarıdaki gibi olursa renk yerine resim verir.

background: black url(images/indentbg.gif) center center repeat-x; gibi.

menü kodlarını kurcalamana gerek kalmaz. Ha menü kodlarında background renk kolu ise onu silmen lazım.

28-10-2007 03:26

Sayfa (4): « İlk [1] 2 3 4 Sonraki > En Son »

« Daha Eski | Daha Yeni »

Yazdırılabilir Bir Versiyona Bak
Bu Konuyu Bir Arkadaşına Gönder
Bu Konuya Abone Ol | Konuyu Favorilerine Ekle

Veteriner hekimler Klip İzle Taha'nın Yeri Kampus Alanya Otel Ara Alanya Travel Msn Nickleri ultravb