seoseo
tr-opencart

     
avatar Şuanki Zaman: 12-10-2016, 09:57 AMHoşgeldin Misafir !
  Şifremi Hatırlat   kayıt ol
opencart temaları

Non-sTop Header links te css menu tasarımı V2

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  1322 - Yorum  3

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

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



Kişisel Bilgileri: v
Konu Tarihi: 07-16-2012 05:40 PM
Eve arkadaşlar ilk sunumumda ie denilen zaıt muhterem kardeşimiz oyun bozanlık yaptı ama şimdi kozlar bende ... bir modifiye daha paylaşıyorum sizlere. Css olarak bir görsellik sunuyorum bunu kategori linklerinde kullanmıştık biraz oynama ile header links menuye ekledim.

Demo



Şimdi Dosyamızı Açalım :
/httpdocs/catalog/view/theme/adefault/stylesheet/stylesheet.css

en alta ekleyiniz. eğer kategorilerde css menu uygulaması yapan varsa eklemesine gerek yok

PHP Kod:
/* ----------------------  ---------------------- */
.blue #slatenav{position:relative;display:block;height:42px;font-size:11px;font-weight:bold;background:transparent url(../image/blueslate_background.gif) repeat-x top left;font-family:Arial,Verdana,Helvitica,sans-serif;text-transform:uppercase;}
.blue #slatenav ul{margin:0px;padding:0;list-style-type:none;width:auto;}
.blue #slatenav ul li{display:block;float:left;margin:0 1px 0 0;}
.blue #slatenav ul li a{display:block;float:left;color:#D5F1FF;text-decoration:none;padding:14px 22px 0 22px;height:28px;}
.blue #slatenav ul li a:hover,.blue #slatenav ul li a.current{color:#fff;background:transparent url(../image/blueslate_backgroundOVER.gif) no-repeat top center;}
/* ----------------------  ---------------------- */

/* ----------------------  ---------------------- */
.green #slatenav{position:relative;display:block;height:42px;font-size:11px;font-weight:bold;background:transparent url(../image/greenslate_background.gif) repeat-x top left;font-family:Arial,Verdana,Helvitica,sans-serif;text-transform:uppercase;}
.green #slatenav ul{margin:0px;padding:0;list-style-type:none;width:auto;}
.green #slatenav ul li{display:block;float:left;margin:0 1px 0 0;}
.green #slatenav ul li a{display:block;float:left;color:#EEFFDF;text-decoration:none;padding:14px 22px 0 22px;height:28px;}
.green #slatenav ul li a:hover,.green #slatenav ul li a.current{color:#fff;background:transparent url(../image/greenslate_backgroundOVER.gif) no-repeat top center;}
/* ----------------------  ---------------------- */

/* ----------------------  ---------------------- */
.red #slatenav{position:relative;display:block;height:42px;font-size:11px;font-weight:bold;background:transparent url(../image/redslate_background.gif) repeat-x top left;font-family:Arial,Verdana,Helvitica,sans-serif;text-transform:uppercase;}
.red #slatenav ul{margin:0px;padding:0;list-style-type:none;width:auto;}
.red #slatenav ul li{display:block;float:left;margin:0 1px 0 0;}
.red #slatenav ul li a{display:block;float:left;color:#FECCC3;text-decoration:none;padding:14px 22px 0 22px;height:28px;}
.red #slatenav ul li a:hover,.red #slatenav ul li a.current{color:#fff;background:transparent url(../image/redslate_backgroundOVER.gif) no-repeat top center;}
/* ----------------------  ---------------------- */

/* ----------------------  ---------------------- */
.purple #slatenav{position:relative;display:block;height:42px;font-size:11px;font-weight:bold;background:transparent url(../image/purpleslate_background.gif) repeat-x top left;font-family:Arial,Verdana,Helvitica,sans-serif;text-transform:uppercase;}
.purple #slatenav ul{margin:0px;padding:0;list-style-type:none;width:auto;}
.purple #slatenav ul li{display:block;float:left;margin:0 1px 0 0;}
.purple #slatenav ul li a{display:block;float:left;color:#FBDAFA;text-decoration:none;padding:14px 22px 0 22px;height:28px;}
.purple #slatenav ul li a:hover,.purple #slatenav ul li a.current{color:#fff;background:transparent url(../image/purpleslate_backgroundOVER.gif) no-repeat top center;}
/* ----------------------  ---------------------- */ 


Dosyamızı Açalım :
/httpdocs/catalog/view/theme/adefault/template/common/header.tpl

Bulalım:
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> 

Değiştirelim:
PHP Kod:
div class="links" ><div class="blue ">   <div id="slatenav"><ul><li><a href="<?php echo $home; ?>"><?php echo $text_home?></a></li> <li><a href="<?php echo $wishlist?>" id="wishlist-total"><?php echo $text_wishlist?></a></li><li><a href="<?php echo $account?>"><?php echo $text_account?></a></li><li><a href="<?php echo $shopping_cart?>"><?php echo $text_shopping_cart?></a></li><li><a href="<?php echo $checkout?>"><?php echo $text_checkout?></a></li></ul></div></div></div> 

Eğer Önceki css menu olayını ekleyen varsa üsttek,yle değiştir.

Bul:


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> 


Ekli Dosya(lar) Önizleme(ler)
Resmi Büyütmek İçin Tıklayın   
.rar img.rar Eklentiyi indir...
Boyut: 8.8 KB İndirme: 13
Telif Hakkı için Rapor Edin...
Kıroğlumarket
Alıntı Yaparak Cevapla
Paylaş!
 Teşekkür Edenler: nokta , 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-16-2012 06:05 PM
Emeklerine sağlık gerçekten müthiş düzenlemeler paylaşıyorsun bu aralar.
En altta Bul demiş kalmışsın acaba kod eksik mi yoksa en alttaki kısım gereksiz mi?
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-16-2012 06:14 PM
gerçekten çok güzel olmuş bunu bir modül haline getirsen müthiş olur
Alıntı Yaparak Cevapla
Paylaş!
Kıroğlumarketv
Osmanlı Torunu
******
Süper Moderator user avatar
Çevrimdışı

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



Kişisel Bilgileri: v
Konu Tarihi: 07-16-2012 06:16 PM
(07-16-2012 06:05 PM)nokta Yazılan:  Emeklerine sağlık gerçekten müthiş düzenlemeler paylaşıyorsun bu aralar.
En altta Bul demiş kalmışsın acaba kod eksik mi yoksa en alttaki kısım gereksiz mi?

konuda belirtmiştim gözden kaçmış olmalı sanırım

Eğer Önceki css menu olayını ekleyen varsa üsttekiyle değiştir. Bir daha fazladan aynı kodu yazmak istemedim. Burada belirtmek istedim

<div class="blue "> blue yazan yere css te tanımlı green purple red yazarak farklı renklendirme yapabilirsiniz
Kıroğlumarket
Alıntı Yaparak Cevapla
Paylaş!

« Önceki | Sonraki »
Cevapla  Gönder 

Non-sTop Header links te css menu tasarımı V2 Konusunun Linki Direk Link
Non-sTop Header links te css menu tasarımı V2 Konusunun HTML Kodu HTML Link
Non-sTop Header links te css menu tasarımı V2 Konusu BBCode Linki BBCode Link
Non-sTop Header links te css menu tasarımı V2 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 179 05-03-2016 03:51 PM
Son Mesaj: barikat87
  musteri uye sayfasi sag menu linkleri yusuf14 0 211 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 471 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 432 05-20-2015 02:40 AM
Son Mesaj: teknolajek
Shocked header düzenleme yardım djsroe 9 1,323 02-28-2015 07:54 PM
Son Mesaj: Kıroğlumarket
  Css Modifiyeli 2 levellii Menu Düzenlemesi Kıroğlumarket 10 3,344 08-27-2014 04:56 PM
Son Mesaj: evren236

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


Forum Atla: