FixedNavigation für modified eCommerce Shopsoftware

[flan]

Hallo zusammen,

ich wollte auch mal meinen Beitrag leisten und folgende Anleitung veröffentlichen. Die Anleitung beruht auf dem FixedNavigationTutorial (http://tympanus.net/codrops/2009/11/30/beautiful-slide-out-navigation-a-css-and-jquery-tutorial/) und hier ist eine Demo zu sehen: http://tympanus.net/Tutorials/FixedNavigationTutorial/

So!
Als erstes in der Index.html eures Templates dies:

Code: PHP  [Auswählen]

<ul id="topmenu">
            <li><a href="{$index}">{#link_index#}</a></li>
           <li><a href="{$cart}">{#link_cart#}</a></li>
           {if $account}
            <li><a href="{$account}">{#link_account#}</a></li>
           {/if}
            {if $smarty.session.customers_status.customers_status_id == '1'}            
            <li><a href="{php}echo xtc_href_link(FILENAME_CREATE_ACCOUNT, '', 'SSL');{/php}">{#new_customer#}</a></li>            
           {/if}
            <li><a href="{$checkout}">{#link_checkout#}</a></li>
           {if $smarty.session.customer_id}
            <li><a href="{$logoff}">{#link_logoff#}</a></li>
           {else}
            <li><a href="{$login}">{#link_login#}</a></li>
           {/if}
        </ul>

mit dem ersetzen:

Code: PHP  [Auswählen]

<ul id="navigation">
            <li class="home"><a href="{$index}" title="{#link_index#}">{#link_index#}</a></li>
           <li class="cart"><a href="{$cart}" title="{#link_cart#}">{#link_cart#}</a></li>
           {if $account}
                        <li class="account"><a href="{$account}" title="{#link_account#}">{#link_account#}</a></li>
                        {/if}
            {if $smarty.session.customers_status.customers_status_id == '1'}
            <li class="newcustomer"><a href="{php}echo xtc_href_link(FILENAME_CREATE_ACCOUNT, '', 'SSL');{/php}" title="{#new_customer#}">{#new_customer#}</a></li>
           {/if}
                        <li class="checkout"><a href="{$checkout}" title="{#link_checkout#}">{#link_checkout#}</a></li>
           {if $smarty.session.customer_id}
                   <li class="logoff"><a href="{$logoff}" title="{#link_logoff#}">{#link_logoff#}</a></li>
           {else}
                        <li class="login"><a href="{$login}" title="{#link_login#}">{#link_login#}</a></li>
                        {/if}
           </ul>

In der Stylesheet.css einfügen:

Code: PHP  [Auswählen]

ul#navigation {
   position: fixed;
    margin: 0px;
    padding: 0px;
    top: 10px;
    left: 0px;
    list-style: none;
    z-index:9999;
}
ul#navigation li {
   width: 100px;
}
ul#navigation li a {
   display: block;
    margin-left: -2px;
    width: 100px;
    height: 70px;    
    background-color:#CFCFCF;
   background-repeat:no-repeat;
    background-position:center center;
    border:1px solid #AFAFAF;
   -moz-border-radius:0px 10px 10px 0px;
    -webkit-border-bottom-right-radius: 10px;
    -webkit-border-top-right-radius: 10px;
    -khtml-border-bottom-right-radius: 10px;
    -khtml-border-top-right-radius: 10px;
    /*-moz-box-shadow: 0px 4px 3px #000;
    -webkit-box-shadow: 0px 4px 3px #000;
    */
    opacity: 0.9;
    filter:progid:DXImageTransform.Microsoft.Alpha(opacity=90);
}
ul#navigation .home a{
 }
ul#navigation .cart a      {
  }
ul#navigation .account a      {
   }
ul#navigation .newcustomer a      {
 }
ul#navigation .checkout a   {
}
ul#navigation .logoff a     {
}
ul#navigation .login a    {
   }

Im Teplatesordner/ euer template / Javascript/  die general.js.php wie folgt abaändern:
ca. Zeile 19 einfügen:

Code: Javascript  [Auswählen]

<script src="<?php echo 'templates/'.CURRENT_TEMPLATE; ?>/javascript/jquery-1.3.2.js"type="text/javascript"></script>

am Ende der Datei einfügen:

Code: Javascript  [Auswählen]

<script type="text/javascript">
            $(function() {
                $('#navigation a').stop().animate({'marginLeft':'-85px'},1000);

                $('#navigation > li').hover(
                    function () {
                        $('a',$(this)).stop().animate({'marginLeft':'-2px'},200);
                    },
                    function () {
                        $('a',$(this)).stop().animate({'marginLeft':'-85px'},200);
                    }
                );
            });
        </script>

Jetzt müsst Ihr nurnoch die Jquery-1.3.2.js in den Ordner /Teplates/ euer template / Javascript/ einfügen und das ganze sollte funktionieren.

In der Stylesheet.css kann an dieser folgender Stelle nuch background Bilder eingefügt werden.

Code: PHP  [Auswählen]

ul#navigation .home a{
 }
ul#navigation .cart a      {
  }
ul#navigation .account a      {
   }
ul#navigation .newcustomer a      {
 }
ul#navigation .checkout a   {
}
ul#navigation .logoff a     {
}
ul#navigation .login a    {
   }

So nun viel Spaß damit!

Gruß
Flan

Linkback: https://www.modified-shop.org/forum/index.php?topic=20393.0

[Gradler]

Hast Du davon auch Bilder?

[flan]

Hier ein Bild.

[Gradler]

Danke. Sieht etwas verwaist aus und für die Hauptnavigation etwas sonderbar. Wäre vielleicht etwas ala Superfish für die Kategorien ....

[flan]

Danke. Sieht etwas verwaist aus

Ist ja auch noch nicht fertig. Da sollten schon noch einige Background-Bilder rein. Schau mal im 1. Beitrag nach der Demo.

Gruß

[Gradler]

Das verwaist bezog sich auf den Abstand - Navigation ganz links, weiße Fläche, eigentlicher Shop

Und auf den dann dicken leeren schwarzen Balken, wo vorher die Navigation war

Aber, Geschmacksache

[flan]

Achso! ;-D

Das ist doch nur mein Test Shop. Der eigentlich Shop sieht anders aus. Da habe ich in den Balken die Kategorien drin.

Gruß

[flan]

Anolog dazu hier ne andere Beschreibung:

In der general.js.php folgendes am Ende einfügen:

Code: Javascript  [Auswählen]

<script type="text/javascript" src="jquery-1.3.2.js"></script>
        <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>

Und in der stylesheet.css folgendes einfügen:

Code: PHP  [Auswählen]

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(../images/home.png);
}
ul#navigation .about a      {
   background-image: url(../images/id_card.png);
}
ul#navigation .search a      {
   background-image: url(../images/search.png);
}
ul#navigation .podcasts a      {
   background-image: url(../images/ipod.png);
}
ul#navigation .rssfeed a   {
   background-image: url(../images/rss.png);
}
ul#navigation .photos a     {
   background-image: url(../images/camera.png);
}
ul#navigation .contact a    {
   background-image: url(../images/mail.png);
}
 

Bild ist anbei!

Viel Spaß damit!