Templateshop - Eine große Auswahl an neuen und modernen Templates für die modified eCommerce Shopsoftware
Neuigkeiten
  • Die modified eCommerce Shopsoftware ist kostenlos, aber nicht umsonst.
    Spenden
  • Damit wir die modified eCommerce Shopsoftware auch zukünftig kostenlos anbieten können:
    Spenden
  • Thema: Topmenü mit vertikal aufklappender Liste

    speedy

    • Viel Schreiber
    • Beiträge: 3.214
    Topmenü mit vertikal aufklappender Liste
    am: 02. September 2009, 00:34:51
    Hallo Freunde der Nacht :D

    bei der Überlegung, wo könne man nur sinnvoll alle Contentseiten unterbringen und etwas surfen, bin ich auf diese Seite gestoßen.
    http://www.muenz.de/shop/Shopping/tabid/398/L/DE/Shop/P/language/de-DE/Default.aspx

    So ein Menü, dass sich beim Überfahren eines Hauptpunktes vertikal ausklappt, wie dort "Service", wäre doch spitze.
    Ist sowas mit xt-commerce machbar oder gibt es dazu bereits schon einen Ansatz ?
    Ich konnte leider noch keinen xtc Shop finden, der sowas einsetzt.

    Würde mich über ein paar Ansätze freuen, wie ich die Idee lösen könnte. Evtl. hat von Euch schon einmal jemand das gemacht ?

    Vielen Dank



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

    fanty

    • Neu im Forum
    • Beiträge: 20
    Topmenü mit vertikal aufklappender Liste
    Antwort #1 am: 07. Februar 2011, 19:52:34
    Hallo liebe modified eCommerce Shopsoftware Gemeinde

    Hab gestern kurz mit Speedy PMs ausgetauscht und habe ihm mein Bauwerk zu diesem Thema gezeigt.
    Auf sein bitten hin werde ich es hier teilen.

    Es ist modifiziert für modified eCommerce Shopsoftware und kann live betrachtet werden unter www.fantys-basar.de.

    hier die Anleitung:

    Es basiert auf eine älteres Modul "Dropdown Menue" und ist dem vom Otto Versand bzw. einem anderen sehr ähnlich und kann von dem einen oder anderen sicher noch modifiziert werden.

    Ich wollte noch die category einbauen, aber das ist mir nicht gelungen. Bin halt noch Newbie in Sachen PHP und CSS.

    Anleitung Einbindung Dropdown Menu

    Angepasst für modified eCommerce Shopsoftware 1.05

    Schritt 1:

    Füge die Datei jquery.dropdown in \templates\DEIN TEMPLATES\javascript\ ein.

    Schritt 2:

    Füge den Ordner lwis.celebrity (teilweise geändert) in templates\DEIN TEMPLATES\css\ ein.

    Schritt 3:

    Füge die Dateien

    Code: PHP  [Auswählen]
    dropdown.css (teilweise geändert)
    dropdown.linear.css (teilweise geändert)
    dropdown.linear.columnar.css (teilweise geändert)
    in templates\DEIN TEMPLATES\css\ ein

    Schritt 4:

    Füge nachfolgend in templates\DEIN TEMPLATES\css\general.css.php ein:

    Code: PHP  [Auswählen]
    <link rel="stylesheet" href="<?php echo 'templates/'.CURRENT_TEMPLATE; ?>/css/lwis.celebrity/default.advanced.css"

    type="text/css" media="screen" />
    <link rel="stylesheet" href="<?php echo 'templates/'.CURRENT_TEMPLATE; ?>/css/dropdown.linear.columnar.css" type="text/css" media="screen" />
     
    Schritt 5:

    in der stylesheet.css des Templates folgenden Abschnitt entfernen oder auskommentieren:

    Code: CSS  [Auswählen]
    /* TOPMENU AS LIST */
    #topmenuwrap {
            background: #333 url(img/bg_topmenu.gif) repeat-x;
    }
    #topmenu {
            float:left;
            padding:0;
            margin:0;
            list-style-type:none;
            height:36px;
            font-size:13px;
            background: url(img/bg_topmenu.gif) repeat-x;
    }
    #topmenu li {
            height:36px;
            float:left;
            padding: 0px 25px;
            margin:0;
            background: url(img/bg_topmenu_breakline.gif) no-repeat;
            background-position:right;
    }
    #topmenu a, #topmenu a:link, #topmenu a:visited, #topmenu a:hover, #topmenu a:active {
            line-height:36px;
            vertical-align:middle;
            text-decoration:none;
            outline: none;
            font-weight:bold;
            cursor:pointer;
            color:#fff;
            margin:0;
            padding:0;
    }
    #topmenu a:hover {
            color:#ccc;
    }
     
    Schritt 6

    in der stylesheet.css des Templates ändern:

    Code: CSS  [Auswählen]
    /* BREADCRUMB PATH AS LIST */
    #breadcrumb {
            clear:both;
            color:#c64934;
            padding:1px 0px 10px 15px;
            list-style-type:none;
            outline: none;
            height:22px;
            background: #fff url(img/bg_breadcrumb.gif) repeat-x;
            font-size:11px;
            font-weight: bold;
            text-align: center;
    }
    #breadcrumb a {
            line-height:23px;
            text-decoration:none;
            outline: none;
            font-weight:bold;
            cursor:pointer;
            color:#333333;
            margin:0;
            padding:0 20px 0 10px;
    }
    #breadcrumb a:link { color:#000000; text-decoration: none; }
    #breadcrumb a:visited { color:#000000; }
    #breadcrumb a:hover { color:#FF0000; }
    #breadcrumb a:active { color:#FFCC66; }
     
    Schritt 7

    Tausche oder füge in der index.html ein:

    Code: PHP  [Auswählen]
    {config_load file="$language/lang_$language.conf" section="index"}
    <div id="wrap">
        <div id="header">
            <div id="logo"><img src="{$tpl_path}img/spacer.gif" width="400" alt="{$store_name}" /></div>
            <div id="search">{$box_SEARCH}</div>
        </div>
    <div id="breadcrumb">{*$navtrail*}      //// ab hier einfügen                 

                                    <!-- Beginning of compulsory code below -->
    <ul id="nav" class="dropdown dropdown-linear dropdown-columnar">
               <li><a href="{$index}">{#link_index#}</a></li>

                                                                    <li class="dir">Shop-Information
                          <ul>
                                     <li class="dir"><a href="{php}echo xtc_href_link(FILENAME_CONTENT, 'coID=1');{/php}">Liefer- und Versandkosten</a></li>
                                     <li class="dir"><a href="{php}echo xtc_href_link(FILENAME_CONTENT, 'coID=2');{/php}">Privatsph&auml;re und Datenschutz</a></li>
                                     <li class="dir"><a href="{php}echo xtc_href_link(FILENAME_CONTENT, 'coID=3');{/php}">Unsere AGB</a></li>
                                     <li class="dir"><a href="{php}echo xtc_href_link(FILENAME_CONTENT, 'coID=4');{/php}">Impressum</a></li>
                                     <li class="dir"><a href="{php}echo xtc_href_link(FILENAME_CONTENT, 'coID=9');{/php}">Widerrufsrecht</a></li>
                        </ul>
                 </li>

          <li class="dir">Kundenbereich
                        <ul>
                                                         {if $smarty.session.customers_status.customers_status_id == '1'}
               <li class="dir"><a href="{php}echo xtc_href_link(FILENAME_CREATE_ACCOUNT, '', 'SSL');{/php}">{#new_customer#}</a></li>

                {/if}
                                                          {if $smarty.session.customer_id}
               <li class="dir"><a href="{$logoff}">{#link_logoff#}</a></li>
               {else}
               <li class="dir"><a href="{$login}">{#link_login#}</a></li>
               {/if}
                                                  <li class="dir"><a href="{$cart}">{#link_cart#}</a></li>
                                                   {if $account}
                             <li class="dir"><a href="{$account}">{#link_account#}</a></li>
               {/if}

               <li class="dir"><a href="{$checkout}">{#link_checkout#}</a></li>

                       </ul>
         </li>

         <li class="dir"><a href="http://www.sianweb.de/testbasar/shop_content.php?coID=7">Kontakt</a></li>
         </ul>
         </li>
    </ul>
    </li>
    <!-- End of compulsory code below -->           /////bis hier
                                    </div>
        <div id="contentwrap"> {if !strstr ($smarty.server.PHP_SELF, 'checkout')}
            <div

    id="leftcol">{$box_CATEGORIES}{*$box_ADD_QUICKIE*}{*$box_CONTENT*}{*$box_INFORMATION*}{$box_LAST_VIEWED}{$box_REVIEWS}{$box_SPECI

    ALS}{$box_WHATSNEW}</div>
            {/if}
            <div
    {if !strstr ($smarty.server.PHP_SELF, 'checkout')}
    id="content"
    {else}
    id="contentfull"
    {/if}
    >
            {if strstr ($smarty.server.PHP_SELF, 'index')}
                {if $smarty.get.cPath==null and $smarty.get.manufacturers_id==''}
                     {if $BANNER}{$BANNER}{/if}
               {/if}
            {/if}
            {$main_content}</div>
                                                                    </div>
        {if !strstr ($smarty.server.PHP_SELF, 'checkout')}
        <div

    id="rightcol">{$box_CART}{$box_LOGIN}{$box_ADMIN}{$box_NEWSLETTER}{$box_BESTSELLERS}{$box_INFOBOX}{$box_CURRENCIES}{$box_MANUFACT

    URERS_INFO}{$box_MANUFACTURERS}{*$box_IMAGESLIDER*}</div>
        {/if}
    <p class="footer">{$smarty.const.TITLE} © {$smarty.now|date_format:"%Y"} | Template © 2009 by modified eCommerce Shopsoftware eCommerce

    Shopsoftware</p>
    </div>
     
    Achtet auf die auskommentierten $-Anweisungen in den left-/rightcol-Bereichen

    Fertig!

    [EDIT Tomcraft 08.02.2011: Anleitung formatiert und überarbeitet.]

    jannemann

    • modified Team
    • Beiträge: 6.275
    • Geschlecht:
    Topmenü mit vertikal aufklappender Liste
    Antwort #2 am: 07. Februar 2011, 20:12:09
    Vielen Dank für's Teilen!

    speedy

    • Viel Schreiber
    • Beiträge: 3.214
    Topmenü mit vertikal aufklappender Liste
    Antwort #3 am: 07. Februar 2011, 20:13:41
    Tolle Sache, kann man einiges daraus machen.
    Hab's mir aber "technisch" noch nicht angesehen.

     :thx: fanty

    Tomcraft

    • modified Team
    • Gravatar
    • Beiträge: 46.369
    • Geschlecht:
    Topmenü mit vertikal aufklappender Liste
    Antwort #4 am: 07. Februar 2011, 21:20:03
    Dankeschön, aber kleine Anmerkungen:

    - Schritt 5 benötigt dringend eine genauere Erklärung. So kann ich damit ehrlich gesagt nichts anfangen.
    - Die hardcodet Links zum Content sollten unbedingt vermieden werden! Wie man richtig verlinkt, siehe: Links? Links! Wie richtig im Content Manager anlegen?

    Trotzdem vielen Dank für deine Bemühungen! :thx:

    Grüße

    Torsten

    fanty

    • Neu im Forum
    • Beiträge: 20
    Topmenü mit vertikal aufklappender Liste
    Antwort #5 am: 08. Februar 2011, 08:14:50
    Hallo Tomcraft

    Danke für das stilvolle korrigieren.

    SCHRITT 5 : Man kann diesen Bereich komplett löschen oder auskommentieren. Es wird nicht mehr benötigt, ich hab es auskommentiert um bei einem Rückbau nicht so viel umbauen zu müssen, falls die Stylesheet zu sehr verändert wurde.

    Ich hab noch vergessen zu sagen, dass in der index.html die id=Topmenuwrap" und id=Topmenu nicht mehr braucht, da man den Inhalt aus diesem Bereich in das Dropmenu im id=breadcrumb einbaut. Aber das haben die Cracks hier bestimmt schon erkannt.

    mfg
    Andreas

    Tomcraft

    • modified Team
    • Gravatar
    • Beiträge: 46.369
    • Geschlecht:
    Topmenü mit vertikal aufklappender Liste
    Antwort #6 am: 08. Februar 2011, 10:34:35
    Okay, Schritt 5 habe ich überarbeitet, sowie die hardcodet Links, aber nun müsstest du bitte nochmal die Änderungen bezüglich id="topmenuwrap" und id="topmenu" für die index.html etwas genauer erklären.

    Grüße

    Torsten

    Matt

    • Experte
    • Beiträge: 4.241
    Topmenü mit vertikal aufklappender Liste
    Antwort #7 am: 08. Februar 2011, 10:54:51
    Hab mir den Download grad mal angesehen.

    Mir ist nicht klar, wieso man drei CSS-Dateien braucht, um ein bisschen Suckerfish-Dropdown zu implementieren. Mir ist auch nicht klar, warum man eine JS-Datei braucht, die nichts anderes macht als diese Dropdowns zu initialisieren, was, wenn man es richtig macht, nur für den IE6 notwendig ist. Außerdem liegt im Zip-File noch eine veraltete jquery.js und diverser anderer Kram, der wohl vom Originaldownload kommt und eigentlich gar nicht gebraucht wird.

    Ich will die Arbeit hier nicht schmälern, aber ich sehe durchaus Optimierungspotential.

    Tomcraft

    • modified Team
    • Gravatar
    • Beiträge: 46.369
    • Geschlecht:
    Topmenü mit vertikal aufklappender Liste
    Antwort #8 am: 08. Februar 2011, 11:17:53
    Sehr diplomatisch formuliert. :)

    Ich habe bisher auch nur das gröbste korrigiert... ein Anfang ist gemacht, aber hier ist wirklich noch viel Potential. :B

    Grüße

    Torsten

    fanty

    • Neu im Forum
    • Beiträge: 20
    Topmenü mit vertikal aufklappender Liste
    Antwort #9 am: 08. Februar 2011, 15:21:29
    Tja Danke für die netten Anmerkungen. *ggg*

    ich bin halt nicht der Kenner von PHP un CSS. Ich hab mir nur eine ältere Version gesucht die annähernd an meine Vorstellungen passt und ein wenig gespielt bis es passte. Welche Teile nun überflüssig sind oder nicht muß ich im einzelnen noch herausfinden. Für Kenner der Materie ist das wohl eher weniger das Problem. Ich lern ja noch.

    Auf jeden FALL kann ich sagen das durch dieses Grundgerüst und einigen Fähigkeiten der User mehr gebaut werden kann um flexiblere Navi´s im XTC zu bauen.

    Die beiden id= ´s werden nicht mehr gebraucht, da sie ja auch in der Stylesheet nicht mehr angesprochen werden. Die Inhalte sind jetzt in der Breadcrumb eingebaut.-

    Würde mich freun wenn einer weiterbastelt um die Kateroryen einzubauen mit einer kombinierten dropdown-vertikal Navi die sie selbstständig mit erweitert wenn man neue Katergorien einbaut. wie es die alte Links-kategorie macht.
    Ich weiß das es geht nur bei der Umsetzung bin ich an meine " noch " Grenze gestoßen.
    mfg
    Andreas

    Tomcraft

    • modified Team
    • Gravatar
    • Beiträge: 46.369
    • Geschlecht:
    Topmenü mit vertikal aufklappender Liste
    Antwort #10 am: 08. Februar 2011, 15:27:13
    War ja nicht böse gemeint, sollte eher als Ansporn dienen. Magst du die Umbauten für die "index.html" bitte nochmal genau erklären? Ich habe dir doch oben nun wirklich eine prima Vorlage geliefert, wie man das macht. ;-)

    Grüße

    Torsten

    fanty

    • Neu im Forum
    • Beiträge: 20
    Topmenü mit vertikal aufklappender Liste
    Antwort #11 am: 08. Februar 2011, 20:01:56
    Nun denn, ich versuch's mal.
    Ich hab die Indexvorlage aus dem Original der XTC und aus dem Modul verglichen und als Vorlage genommen.
    Im Bereich Shop-Informationen sind dann die Links (danke Tomcraft) aus der Content-Box "Information" rein gebaut. Wichtig ist in der ganzen index.html, dass die Abstimmung zwischen den <ul> und den <li> stimmt. sonst geht das nicht, und alles zusammen innerhalb eines div-Containers.

    Im Bereich Kundeninformation hab ich die Infos aus der id=topmenuwrap und id=topmenu 1:1 übernommen, daher werden diese nicht mehr gebraucht.

    Starseite und Kontakt wurden 1:1 übernommen und eingebunden.
    Etwas an der Stylesheet mit Farben und Hintergrund gespielt und dann passte es.

    Alles zusammen dann unter id=breadcrumb eingepflegt. Die überflüssigen $- auskommentiert.

    so ähnlich müßte auch die Kategorie-box einzubauen seien. Allerdings weiß ich (noch) nicht, wie ich die Steuerung horizontal-vertikal hin bekomme.

    mfg
    Andreas

    Tomcraft

    • modified Team
    • Gravatar
    • Beiträge: 46.369
    • Geschlecht:
    Topmenü mit vertikal aufklappender Liste
    Antwort #12 am: 08. Februar 2011, 20:34:44
    Kann mir das jemand dolmetschen? :D

    Schreibe es doch bitte als Anleitung... suche x, ersetze mit y, lösche z, etc.

    Das soll doch für Unwissende nachvollziehbar sein.

    Grüße

    Torsten

    0 Antworten
    4843 Aufrufe
    07. September 2009, 10:17:08 von sgei
    1 Antworten
    2218 Aufrufe
    25. November 2013, 10:45:15 von Alfred
    2 Antworten
    3262 Aufrufe
    10. September 2010, 14:31:47 von maken123
    12 Antworten
    15166 Aufrufe
    16. Januar 2014, 01:24:36 von Wave
               
    anything