seoseo
tr-opencart

     
avatar Şuanki Zaman: 12-08-2016, 09:11 PMHoşgeldin Misafir !
  Şifremi Hatırlat   kayıt ol
opencart temaları

Header links te css menu tasarımı.

Konuyu görüntüleyenler: 1 Misafir
 
Değerlendir:
  • 0 Oy - 0 Yüzde
  • 1
  • 2
  • 3
  • 4
  • 5
%
Cevapla  Gönder 
v  v
Yazar  Kıroğlumarket - Görüntüleme - Okunma  3242 - Yorum  6

Kıroğlumarketv
Osmanlı Torunu
******
Süper Moderator user avatar
Çevrimdışı

Mesajlar: 2,965
Konular: 475
Katılma Tarihi: Jan 2012
Rep Puanı: 93
Teşekkürler: 1107
965 Mesajına, 1979 Teşekkür edildi.



Kişisel Bilgileri: v
Konu Tarihi: 07-11-2012 07:09 AM
Evet arkadaşlar bugünkü konumuz hedardaki linklerimize css menu olarak yapacağız. Farklı enuler oluşturmak isteyen varsa kullandığım program burdan indirin

Demo


1.Açınız: /httpdocs/catalog/view/theme/kenditeman/stylesheet/stylesheet.css

En altına Ekle

PHP Kod:
ul#css3menu1{
    
margin:0;list-style:none;padding:6px 6px 6px 0;background-color:#1b1200;background-image:-o-linear-gradient(-90deg,rgba(255,255,255,0.38),rgba(255,255,255,0.16)); background-image:-moz-linear-gradient(-90deg,rgba(255,255,255,0.38),rgba(255,255,255,0.16));   background-image:-webkit-gradient(linear,50% 0%,50% 100%,from(rgba(255,255,255,0.38)),to(rgba(255,255,255,0.16)));  background-image:-webkit-linear-gradient(-90deg,rgba(255,255,255,0.38),rgba(255,255,255,0.16));background-repeat:repeat;border-width:1px;border-style:solid;border-color:#343434;-moz-border-radius:33px;-webkit-border-radius:33px;border-radius:33px;font-size:0;z-index:999;position:relative;display:inline-block;zoom:1;
    
*display:inline;}
ul#css3menu1 li{
    
display:block;white-space:nowrap;font-size:0;float:left;}
html ul#css3menu1 li a{
    
display:inline-block;}
ul#css3menu1>li{
    
margin:0 0 0 6px;}
ul#css3menu1 a:active, ul#css3menu1 a:focus{
    
outline-style:none;}
ul#css3menu1 a{
    
display:block;vertical-align:middle;text-align:left;text-decoration:none;font:12px Impact,Charcoal,sans-serif;color:#E7E5E5;cursor:pointer;padding:8px 20px;background-color:;background-repeat:repeat;border-width:0;border-style:solid;border-color:transparent;}
ul#css3menu1 li:hover>a,ul#css3menu1 li a.pressed{
    
background-color:#7ACF27;border-color:#F8F8F8;border-style:solid;color:#333;background-image:-o-linear-gradient(-90deg,rgba(255,255,255,0.38),rgba(85,170,0,0.7)); background-image:-moz-linear-gradient(-90deg,rgba(255,255,255,0.38),rgba(85,170,0,0.7));   background-image:-webkit-gradient(linear,50% 0%,50% 100%,from(rgba(255,255,255,0.38)),to(rgba(85,170,0,0.7)));  background-image:-webkit-linear-gradient(-90deg,rgba(255,255,255,0.38),rgba(85,170,0,0.7));text-decoration:none;filter:progid:DXImageTransform.Microsoft.gradient(gradientType=0​,startColorstr=#60FFFFFF,endColorstr=#B355AA00)}
ul#css3menu1 img{
    
border:none;vertical-align:middle;margin-right:8px;}
ul#css3menu1 li.topmenu>a{
    
background-color:;border-width:1px 0 0 0;border-style:solid;border-color:;border-radius:10px;-moz-border-radius:10px;-webkit-border-radius:10px;-moz-transition:all 0.5s;-webkit-transition:all 0.5s;-o-transition:all 0.5s;font:bold 13px "Arial Black",Gadget,sans-serif;color:#E7E5E5;text-decoration:none;text-shadow:0 1px 1px #000000;}
ul#css3menu1 li.topmenu:hover>a,ul#css3menu1 li.topmenu a.pressed{
    
background-color:#7dfa00;background-image:-o-linear-gradient(-90deg,rgba(255,255,255,0.77),rgba(85,170,0,0.7)); background-image:-moz-linear-gradient(-90deg,rgba(255,255,255,0.77),rgba(85,170,0,0.7));   background-image:-webkit-gradient(linear,50% 0%,50% 100%,from(rgba(255,255,255,0.77)),to(rgba(85,170,0,0.7)));  background-image:-webkit-linear-gradient(-90deg,rgba(255,255,255,0.77),rgba(85,170,0,0.7));border-style:solid;border-color:#F8F8F8;color:#444444;text-decoration:none;text-shadow:0 1px 0 #C5EAA1;filter:progid:DXImageTransform.Microsoft.gradient(gradientType=0,st​artColorstr=#C6FFFFFF,endColorstr=#B355AA00)} 

1.Açınız: /httpdocs/catalog/view/theme/kenditeman/template/common/header.tpl

bul: eğer aşağıdaki aramada çıkmıyorsa <div class="links"> olarak aratın ve <div class="links"> ten başlayıp </div> 'e kadar olan kısmı seçiniz

PHP Kod:
<div class="links"><a href="<?php echo $home; ?>"><?php echo $text_home?></a><a href="<?php echo $wishlist?>" id="wishlist-total"><?php echo $text_wishlist?></a><a href="<?php echo $account?>"><?php echo $text_account?></a><a href="<?php echo $shopping_cart?>"><?php echo $text_shopping_cart?></a><a href="<?php echo $checkout?>"><?php echo $text_checkout?></a></div> 

bununla değiştir ... adefault benim kullandığım temadır ekteki dosyaları kendi temanızın image klasörüne atınız ve adefault olan kısımları kendi tema adınızı yazınız.

PHP Kod:
<div class="links"><ul id="css3menu1" class="topmenu"><li class="topmenu""><a href="<?php echo $home?>"><img src="catalog/view/theme/adefault/image/home.png" alt=""/><?php echo $text_home?></a></li><li class="topmenu"><a href="<?php echo $wishlist?>" id="wishlist-total"><img src="catalog/view/theme/adefault/image/infoo.png" alt=""/><?php echo $text_wishlist?></a></li><li class="topmenu"><a href="<?php echo $account?>"><img src="catalog/view/theme/adefault/image/service.png" alt=""/><?php echo $text_account?></a></li><li class="topmenu"><a href="<?php echo $shopping_cart?>"><img src="catalog/view/theme/adefault/image/buy.png" alt=""/><?php echo $text_shopping_cart?></a></li><li class="topmenu"><a href="<?php echo $checkout?>"><img src="catalog/view/theme/adefault/image/register.png" alt=""/><?php echo $text_checkout?></a></li></ul></div> 



Bu arada eğer farklı tema kullanan varsa ve header linkste farklı bir css uygulaması kullanıyorsa .
#header .links ten başlayıp /* menu */ olan kısma kadar seçip aşağıdaki kodla değiştiriniz. Aşağıdaki kod default temada header links normal olarak göstermesini sağlıyor.

PHP Kod:
#header .links {
    
positionabsolute;
    
right0px;
    
bottom3px;
    
font-size10px;
    
padding-right10px;
}
#header .links a {
    
floatleft;
    
displayblock;
    
padding0px 0px 0px 7px;
    
color#38B0E3;
    
text-decorationnone;
    
font-size12px;
}
#header .links a + a {
    
margin-left8px;
    
border-left1px solid #CCC;


Şimdi default temada kullananlar için sorun yok ama başka tema kullananlar için eğer search input text yani arama kutusunun üstüne çıkıyorsa stylesheet.css dosyasında gösterdiğim yerleri kendinize göre düzenleyin

PHP Kod:
#header #search {
    
positionabsolute;
    [
b]top2px/* arama kutusunun pozisyonu 
    right: 90px; /* arama kutusunun sağda bulunduğu pozisyonu
    width: 298px;[/b]  /* arama kutusunun uzunluğu
    z-index: 15;


eğer header linste bir kayma oluyorsaki illa olacak diye düşünüyorum onuda gene aynı dosyadan aşağıdaki gösterdiğim yerlerden ayarlaya bilirsiniz. 4 tarayıcıda test ettim . Opera firefox safari bunlarda güzel çalıştı ama ie gene yaptı yapacağını Big Grin

PHP Kod:
#header .links {
    
positionabsolute;
    [
b]right0px/* sağdaki pozisyonu
    top: 83px; /* üstteki pozisyonu[/b]
    font-size: 10px;
    padding-right: 10px;



Ekli Dosya(lar) Önizleme(ler)
Resmi Büyütmek İçin Tıklayın   
.rar css3menu1.rar Eklentiyi indir...
Boyut: 14.24 KB İndirme: 24
Telif Hakkı için Rapor Edin...
Kıroğlumarket
Alıntı Yaparak Cevapla
Paylaş!
 Teşekkür Edenler: osdem66 , nokta , bayramdal1978 , fe_odaliz
opencart temaları
noktav
Süper Moderator
******
Süper Moderator user avatar
Çevrimdışı

Mesajlar: 629
Konular: 24
Katılma Tarihi: Jan 2012
Rep Puanı: 12
Teşekkürler: 672
174 Mesajına, 272 Teşekkür edildi.



Kişisel Bilgileri: v
Konu Tarihi: 07-11-2012 02:53 PM
Emeklerine sağlık gerçekten çok güzel bir konu işlemişsin.
Bir çok kullanıcının derdine derman olacak çalışman.
nokta
Bu Dünya Acılardan Kaçamayacağın Kadar Küçük,
Kaybettiklerini Bir Daha Bulamayacağın Kadar Büyüktür!..
Alıntı Yaparak Cevapla
Paylaş!
kullanıcı2v
Üye
***
Üye user avatar
Çevrimdışı

Mesajlar: 116
Konular: 30
Katılma Tarihi: May 2012
Rep Puanı: 0
Teşekkürler: 5
13 Mesajına, 22 Teşekkür edildi.



Kişisel Bilgileri: v
Konu Tarihi: 07-11-2012 03:49 PM
Peki Kardeş Alttaki Bilgileri Hakkımızda Vb Gibi Bilileri alabirsek çok güzel olur SmileSmileSmile
Alıntı Yaparak Cevapla
Paylaş!
Kıroğlumarketv
Osmanlı Torunu
******
Süper Moderator user avatar
Çevrimdışı

Mesajlar: 2,965
Konular: 475
Katılma Tarihi: Jan 2012
Rep Puanı: 93
Teşekkürler: 1107
965 Mesajına, 1979 Teşekkür edildi.



Kişisel Bilgileri: v
Konu Tarihi: 07-11-2012 04:02 PM
(07-11-2012 03:49 PM)kullanıcı2 Yazılan:  Peki Kardeş Alttaki Bilgileri Hakkımızda Vb Gibi Bilileri alabirsek çok güzel olur SmileSmileSmile

fena fiki değil şuanda ürn sayfasında hemen al butonu üzerinde çalışma yapıyorum onuda eklerim zaman bulunca
Kıroğlumarket
Alıntı Yaparak Cevapla
Paylaş!
nextwenv
Acemi Üye
**
Üye user avatar
Çevrimdışı

Mesajlar: 19
Konular: 4
Katılma Tarihi: May 2012
Rep Puanı: 0
Teşekkürler: 0
0 Mesajına, 0 Teşekkür edildi.



Kişisel Bilgileri: v
Konu Tarihi: 07-12-2012 04:51 PM
ben üst menü modül istiyorum istediğim kategori veya sayfa ekleyip link verebilecek şekilde bir modül istiyorum.
Alıntı Yaparak Cevapla
Paylaş!
unsoundv
Üye
***
Üye
Çevrimdışı

Mesajlar: 73
Konular: 13
Katılma Tarihi: Jan 2012
Rep Puanı: 0
Teşekkürler: 8
11 Mesajına, 15 Teşekkür edildi.



Kişisel Bilgileri: v
Konu Tarihi: 07-13-2012 02:44 PM
Sepete ürün atıldığı zaman , sepete bakmak istenildiğinde link kutusu üstte kalıp sepeti ezebiliyor. Bunuda çözümlerseniz süper olucak :o) Sanırım z index -100 veriyorduk :o)
Alıntı Yaparak Cevapla
Paylaş!
opencart temaları
Kıroğlumarketv
Osmanlı Torunu
******
Süper Moderator user avatar
Çevrimdışı

Mesajlar: 2,965
Konular: 475
Katılma Tarihi: Jan 2012
Rep Puanı: 93
Teşekkürler: 1107
965 Mesajına, 1979 Teşekkür edildi.



Kişisel Bilgileri: v
Konu Tarihi: 07-13-2012 03:40 PM
(07-13-2012 02:44 PM)unsound Yazılan:  Sepete ürün atıldığı zaman , sepete bakmak istenildiğinde link kutusu üstte kalıp sepeti ezebiliyor. Bunuda çözümlerseniz süper olucak :o) Sanırım z index -100 veriyorduk :o)
Uyarı İçin teşekkürler Eklediğiniz kodu aşağıdaki belirttiğim şekilde z-indexi düzeltme yapınız.

z-index:999; yerine z-index:100;

PHP Kod:
ul#css3menu1{
    
margin:0;list-style:none;padding:6px 6px 6px 0;background-color:#1b1200;background-image:-o-linear-gradient(-90deg,rgba(255,255,255,0.38),rgba(255,255,255,0.16)); background-image:-moz-linear-gradient(-90deg,rgba(255,255,255,0.38),rgba(255,255,255,0.16));   background-image:-webkit-gradient(linear,50% 0%,50% 100%,from(rgba(255,255,255,0.38)),to(rgba(255,255,255,0.16)));  background-image:-webkit-linear-gradient(-90deg,rgba(255,255,255,0.38),rgba(255,255,255,0.16));background-repeat:repeat;border-width:1px;border-style:solid;border-color:#343434;-moz-border-radius:33px;-webkit-border-radius:33px;border-radius:33px;font-size:0;[b]z-index:100;[/b]position:relative;display:inline-block;zoom:1;
    
*display:inline;}
ul#css3menu1 li{
    
display:block;white-space:nowrap;font-size:0;float:left;}
html ul#css3menu1 li a{
    
display:inline-block;}
ul#css3menu1>li{
    
margin:0 0 0 6px;}
ul#css3menu1 a:active, ul#css3menu1 a:focus{
    
outline-style:none;}
ul#css3menu1 a{
    
display:block;vertical-align:middle;text-align:left;text-decoration:none;font:12px Impact,Charcoal,sans-serif;color:#E7E5E5;cursor:pointer;padding:8px 20px;background-color:;background-repeat:repeat;border-width:0;border-style:solid;border-color:transparent;}
ul#css3menu1 li:hover>a,ul#css3menu1 li a.pressed{
    
background-color:#7ACF27;border-color:#F8F8F8;border-style:solid;color:#333;background-image:-o-linear-gradient(-90deg,rgba(255,255,255,0.38),rgba(85,170,0,0.7)); background-image:-moz-linear-gradient(-90deg,rgba(255,255,255,0.38),rgba(85,170,0,0.7));   background-image:-webkit-gradient(linear,50% 0%,50% 100%,from(rgba(255,255,255,0.38)),to(rgba(85,170,0,0.7)));  background-image:-webkit-linear-gradient(-90deg,rgba(255,255,255,0.38),rgba(85,170,0,0.7));text-decoration:none;filter:progid:DXImageTransform.Microsoft.gradient(gradientType=0​,startColorstr=#60FFFFFF,endColorstr=#B355AA00)}
ul#css3menu1 img{
    
border:none;vertical-align:middle;margin-right:8px;}
ul#css3menu1 li.topmenu>a{
    
background-color:;border-width:1px 0 0 0;border-style:solid;border-color:;border-radius:10px;-moz-border-radius:10px;-webkit-border-radius:10px;-moz-transition:all 0.5s;-webkit-transition:all 0.5s;-o-transition:all 0.5s;font:bold 13px "Arial Black",Gadget,sans-serif;color:#E7E5E5;text-decoration:none;text-shadow:0 1px 1px #000000;}
ul#css3menu1 li.topmenu:hover>a,ul#css3menu1 li.topmenu a.pressed{
    
background-color:#7dfa00;background-image:-o-linear-gradient(-90deg,rgba(255,255,255,0.77),rgba(85,170,0,0.7)); background-image:-moz-linear-gradient(-90deg,rgba(255,255,255,0.77),rgba(85,170,0,0.7));   background-image:-webkit-gradient(linear,50% 0%,50% 100%,from(rgba(255,255,255,0.77)),to(rgba(85,170,0,0.7)));  background-image:-webkit-linear-gradient(-90deg,rgba(255,255,255,0.77),rgba(85,170,0,0.7));border-style:solid;border-color:#F8F8F8;color:#444444;text-decoration:none;text-shadow:0 1px 0 #C5EAA1;filter:progid:DXImageTransform.Microsoft.gradient(gradientType=0,st​artColorstr=#C6FFFFFF,endColorstr=#B355AA00)} 

Gene aynı dosyada header cart ta z-index:101, yapınız.

#header #cart {
position: absolute;
top: 0px;
right: 0px;
z-index: 101;
min-width: 300px;
Kıroğlumarket
Alıntı Yaparak Cevapla
Paylaş!

« Önceki | Sonraki »
Cevapla  Gönder 

Header links te css menu tasarımı. Konusunun Linki Direk Link
Header links te css menu tasarımı. Konusunun HTML Kodu HTML Link
Header links te css menu tasarımı. Konusu BBCode Linki BBCode Link
Header links te css menu tasarımı. Konusunu Paylaş Sosyal Paylaş

Benzeyen Konular
Konu: Yazar Cevaplar: Gösterim: Son Mesaj
  Sabit üst menü Ersen16 5 1,953 09-26-2016 11:36 AM
Son Mesaj: tolikachocolate
  üst menü bağımsız eklame barikat87 0 178 05-03-2016 03:51 PM
Son Mesaj: barikat87
  musteri uye sayfasi sag menu linkleri yusuf14 0 210 12-15-2015 02:03 PM
Son Mesaj: yusuf14
  [Ücretli] menü ve tab sorunu çözümü xenophanes 0 469 09-13-2015 09:08 PM
Son Mesaj: xenophanes
  Super Category Menu numara,beden,renk filtresini aktif etme djmega 1 470 08-04-2015 07:55 PM
Son Mesaj: Kıroğlumarket
  [Modifikasyon] Sepete ürün atınca header sepet açılsın? pialfa 0 408 06-22-2015 08:40 PM
Son Mesaj: pialfa
  [Modifikasyon] Opencart 2.0.1.1 Fixed Header Menu (Sabit Başlık Menü) yapımı mustafaabanoz 2 1,442 05-25-2015 02:53 PM
Son Mesaj: sakaryanotebook
  sağ kategoriler menü teknolajek 0 429 05-20-2015 02:40 AM
Son Mesaj: teknolajek
Shocked header düzenleme yardım djsroe 9 1,322 02-28-2015 07:54 PM
Son Mesaj: Kıroğlumarket
  Css Modifiyeli 2 levellii Menu Düzenlemesi Kıroğlumarket 10 3,341 08-27-2014 04:56 PM
Son Mesaj: evren236

Header links te css menu tasarımı. indir, Header links te css menu tasarımı. Videosu, Header links te css menu tasarımı. online izle, Header links te css menu tasarımı. Bedava indir, Header links te css menu tasarımı. Yükle, Header links te css menu tasarımı. Hakkında, Header links te css menu tasarımı. nedir, Header links te css menu tasarımı. Free indir, Header links te css menu tasarımı. oyunu, Header links te css menu tasarımı. download


Forum Atla: