Animasyonlu Üst Menü

debreli

OpenCart-TR
Katılım
31 Ağu 2010
Mesajlar
196
Tepkime puanı
0
Puanları
0
Web sitesi
vakifshop.com
ustmenu.png


temanızın common/header.tpl dosyasını açın </head> tagından önce aşağıdakini ekleyin
Kod:
<script type="text/javascript">
            $(function() {
                var d=300;
                $('#navigation a').each(function(){
                    $(this).stop().animate({
                        'marginTop':'-80px'
                    },d+=150);
                });
 
                $('#navigation > li').hover(
                function () {
                    $('a',$(this)).stop().animate({
                        'marginTop':'-2px'
                    },200);
                },
                function () {
                    $('a',$(this)).stop().animate({
                        'marginTop':'-80px'
                    },200);
                }
            );
            });
        </script>
aynı dosyada <body> tagından sonra aşağıdakini ekleyin

Kod:
<ul id="navigation">
            <li class="home"><a href="index.php"><span>Anasayfa</span></a></li>
            <li class="about"><a href="index.php?route=account/logout"><span>Çıkış</span></a></li>
            <li class="search"><a href="index.php?route=product/search"><span>Arama</span></a></li>
            <li class="photos"><a href=""><span>Tüm Ürünler</span></a></li>
            <li class="rssfeed"><a href="index.php?route=feed/google_base"><span>Rss Feed</span></a></li>
            <li class="podcasts"><a href=""><span>Podcasts</span></a></li>
            <li class="contact"><a href="index.php?route=information/contact"><span>İletişim</span></a></li>
        </ul>

tamanısın stylesheet dosyasını açın enalta aşaıdaki kodu yerleştirin

Kod:
ul#navigation {
    position: fixed;
    margin: 0px;
    padding: 0px;
    top: 0px;
    right: 10px;
    list-style: none;
    z-index:999999;
    width:721px;
}
ul#navigation li {
    width: 103px;
    display:inline;
    float:left;    
}
ul#navigation li a {
    display: block;
    float:left;
    margin-top: -2px;
    width: 100px;
    height: 25px;
    background-color:#E7F2F9;
    background-repeat:no-repeat;
    background-position:50% 10px;
    border:1px solid #BDDCEF;
    -moz-border-radius:0px 0px 10px 10px;
    -webkit-border-bottom-right-radius: 10px;
    -webkit-border-bottom-left-radius: 10px;
    -khtml-border-bottom-right-radius: 10px;
    -khtml-border-bottom-left-radius: 10px;
    text-decoration:none;
    text-align:center;
    padding-top:80px;
    opacity: 0.7;
    filter:progid:DXImageTransform.Microsoft.Alpha(opacity=70);  
}
ul#navigation li a:hover{
     background-color:#CAE3F2;
}
ul#navigation li a span{
    letter-spacing:2px;
    font-size:11px;
    color:#60ACD8;
    text-shadow: 0 -1px 1px #fff;      
}
ul#navigation .home a{
    background-image: url('../image/home.png');
}
ul#navigation .about a      {
    background-image: url('../image/id_card.png');
}
ul#navigation .search a      {
    background-image: url('../image/search.png');
}
ul#navigation .podcasts a      {
    background-image: url('../image/ipod.png');
}
ul#navigation .rssfeed a   {
    background-image: url('../image/rss.png');
}
ul#navigation .photos a     {
    background-image: url('../image/camera.png');
}
ul#navigation .contact a    {
    background-image: url('../image/mail.png');
}

gifleri temanızın image klasörüne atın

linkleri common/header.tpl dosyasındaki kodlardan resimleride stylesheet dosyasına eklediğiniz kodan değiştirebilirsiniz.

üst menü yü vermişken alt menüyüde vereyim

ilk katagorileri üst tarafa taşıma modulunu kurun.
http://forum.opencart-tr.com/thread-2153.html

bu mudulu kuaraken su işlemi yapmayın
catalog\view\theme\default\stylesheet\
catalog\view\theme\default\template\common\header.tpl
yapılan değişiklikleri yapmayın

common/header.tpl aç.
yukarıdaki animasyonlu menüyü yapmamışsanız
<body> tagından sonra altakini ekleyin
yapmışsanız </ul> tagından sonra altakini ekleyin
Kod:
<div id="header2">
  <div class="div20"><img src="catalog/view/theme/default/image/logo.png" title="Anasayfa" onclick="location = 'index.php'" /></div>
    <div class="div21"> buraya herhangi bir yazı ekleyebilirsiniz</div>
  </div>
<?php foreach ($modules as $module) { ?>
<?php echo ${$module['code']}; ?>
<?php } ?> <div class="arkaplan">

temanızın stylesheet.css dosyasını açın enalta altakini ekleyin
Kod:
#header2 {
	height: 56px;
	padding: 0px 30px;
	background: url('../image/header.png') repeat-x;
	min-width: 900px;
}
#header2 .div20 {
	color: #FFFFFF;
	padding: 15px 0px 0px 0px;
	float: left;
	padding-top: 5px;
}
#header2 .div21 {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	color: #FFF;
	text-align: right;
	padding: 14px 0px 0px 0px;
	float: right;
}
#header2 .div21 span {
	font-weight: bold;
}
 .menu {
 background: url('../image/menu.png') repeat-x;
	position: relative;
	z-index: 1;
	height: 34px;
	clear: both;
	padding: 0px 30px;
	min-width: 900px;}
 
.menu ul li a, .menu ul li a:visited {display:block; text-decoration:none; color:#fff; width:85px;height:34px; text-align:center;   line-height:34px; background: url('../image/split.png') center left no-repeat;font-size:12px; overflow:hidden;font-family: Arial, Helvetica, sans-serif;}
.menu ul {padding:0; margin:0; list-style: none;}
.menu ul li {float:left; position:relative;}
.menu ul li ul {display: none;}

/* specific to non IE browsers */
.menu ul li:hover a {color:#fff; background: url('../image/selected.png') repeat-x;}
.menu ul li:hover ul {display:block; position:absolute; top:34px; left:0; width:121px;}
.menu ul li:hover ul li a.hide { color:#fff;}
.menu ul li:hover ul li:hover a.hide { color:#000;}
.menu ul li:hover ul li ul {display: none;}
.menu ul li:hover ul li a {display:block; text-align:left;  background: url('../image/transparent.png'); color:#fff;width:144px;padding: 0px 5px;}
.menu ul li:hover ul li a:hover {background:#333;color:#fff;}
.menu ul li:hover ul li:hover ul {display:block; position:absolute; left:155px; top:0;}
.menu ul li:hover ul li:hover ul.left {left:-120px;} 

.arkaplan {
	background: #FFFFFF url('../image/background.png') 0px 1px repeat-x;
	padding: 10px 30px 0px 30px;
	min-width: 900px;
	
}

yukarda verdiğim stylesheet.css nin içindeki gifler admin/view/image klasöründe var. bu gifleri kopyalayıp temanızın image klasörüne atın. logonuzu kendinize göre ayarlarsınız.

enson common/footer.tpl dosyasını açın. <div id="footer"> bu koddan önce </div> ekleyin
 

Ekli dosyalar

  • images.zip
    30.9 KB · Görüntüleme: 249

emine

OpenCart-TR
Katılım
3 Mar 2011
Mesajlar
6
Tepkime puanı
0
Puanları
0
Yaş
34
Konum
ankara


Uploaded with ImageShack.us


Arkadaşlar menüyü attım ama arkasında kampanyalar iletişi siteye ekle site haritası bunlar nerden ve nasıl siliniyor

2. Attım menüler üst üste geldi bunun için ne yapmam gerekiyor Header.tpl dediği şekilde yerleştirdim kodları ama nedense bu şeilde oldu
 

admira

OpenCart-TR
Katılım
20 Ocak 2010
Mesajlar
248
Tepkime puanı
0
Puanları
16
Web sitesi
www.TrendCorap.com
Arama yapmadan konu açmayınız...
http://forum.opencart-tr.com/thread-1215.html
 

emine

OpenCart-TR
Katılım
3 Mar 2011
Mesajlar
6
Tepkime puanı
0
Puanları
0
Yaş
34
Konum
ankara
benım demek istediğim yeni yüklediğim menü arasında boşluk mesafe nasıl olur üzerine geldi menü
 

MasterBora

Moderator
Katılım
24 Nis 2010
Mesajlar
171
Tepkime puanı
0
Puanları
0
Yaş
42
Konum
Istanbul
Web sitesi
www.pikselplus.com
emine' Alıntı:
benım demek istediğim yeni yüklediğim menü arasında boşluk mesafe nasıl olur üzerine geldi menü


CSS (stylesheet.css) Dosyanıza Müdahale Ederek Varsayıan Temanızı Bir Kaç px Aşağıya Çekin. Sorununuz Düzelecektir...
 

emine

OpenCart-TR
Katılım
3 Mar 2011
Mesajlar
6
Tepkime puanı
0
Puanları
0
Yaş
34
Konum
ankara
Sorun Düzeldi Teşekkür Ederim
 
Üst