MODUL: jQuery Superfish - horizontale Navigation

[Sick]

Moin zusammen,

hat das Modul schon mal jemand in der 1.06 Beta4 eingebaut?
Ich versuche das gerade, es läuft aber nicht.

Vermute, dass es mit der Datei /source/boxes/categories_superfish.php zusammenhängt.

Gruß

[noRiddle (revilonetz)]

Würde empfehlen das mit CSS zu machen, das Superfish-Menu ist aufgebläht, benötig zu viel Code und ist auch nicht zeitgemäß.
Willst du ein wenig Animation im Menu haben, mach's einfach mit CSS3 transition und/oder transform.
Als Fallback für alte IEs, reichen dann 3-4 Zeilen jQuery-code.

Gruß,
noRiddle

[Sick]

Kann man über CSS die Kategorien automatisch auslesen?
Ich kenne das bisher nur so, dass man die Links der Kategorien manuell in der index.html einfügen muss.

Gruß

[noRiddle (revilonetz)]

??
Natürlich kann man Kategorien nicht automatisch mit CSS auslesen.
Wie kommst du darauf ?

Gruß,
noRiddle

[Sick]

Ok, war dämlich formuliert.

Hast du ein CSS-Dropdown mit autmatischen Links (ausgelesen per php) im Einsatz?
Oder schreibst du einfach die Links in die index.html und passt bei Bedarf wieder an?

Gruß

[noRiddle (revilonetz)]

Natürlich würde ich die Links nicht hard-codiert in die index.html schreiben.
GTB hat doch eine Anleitung zum Implementieren des Kategoriemenus im Top-Menu gemacht.
Wo ist jetzt das Problem ?

Gruß,
noRiddle

[Sick]

Das funktioniert aber eben nicht. Unabhängig von der jQuery-Funktion.
Ich schätze es liegt unter 1.06 Beta4 an der Datei /source/boxes/categories_superfish.php

[noRiddle (revilonetz)]

Nun, daß das in der 1.06 eventuell nicht ohne Anpassung funktioniert kann ja sein, habe ich mir nicht angeschaut.
Ich habe ja lediglich einen Tip gegeben, was die Nutzung des Superfish-Menus anbelangt.
Das hat ja jetzt nichts mit der Einbindung des Kategorie-Menus in das Top-Menu an sich zu tun.

Gruß,
noRiddle

[Sick]

Ich schiebe das noch mal nach oben.

Hat das Modul schon jemand unter 1.06. Beta4 laufen?
Die Darstellung der Kategorien ist zwar horizontal, allerdings sind alle Kategorien und Unterkategorien von Anfang an ausgeklappt.

Ich vermute es hängt an der Datei /source/boxes/categories_superfish.php.
Da ich aber kein PHP kann, komme ich nicht weiter.

Eventuell hat ja von euch einer eine Idee.

Danke und Gruß

[XDuckX]

Hallo Allerseits,
auch ich möchte mich natürlich erst einmal für dieses Modul bei Gerhard (GTB) recht herzlich bedanken...auch wenn die Veröffentlichung schon so einige Monate zurück liegt  ...
Meine Frage zu dem Modul bezieht sich auf die Sprachauswahl, da bei Auswahl "englisch" nur die Menü-Überschrift sowie der letzte Menüpunkt "Abmelden" in "Logout" geändert wird (siehe dazu die Anhänge)...ist ja auch Logisch, da in dem Code für die index.html die Menüpunkte "Adressbuch", "Bestellungen", "Newsletter", etc. ja manuell eingetragen sind:

Code: PHP  [Auswählen]

 {else}
          <a href="{$account}">{#link_account#}</a>
           <ul>
              <li><a href="{php}echo xtc_href_link('address_book.php', '', 'NONSSL'){/php}">Adressbuch</a></li>
              <li><a href="{php}echo xtc_href_link('account_history.php', '', 'NONSSL'){/php}">Bestellungen</a></li>
              <li><a href="{php}echo xtc_href_link('newsletter.php', '', 'NONSSL'){/php}">Newsletter</a></li>
              <li><a href="{php}echo xtc_href_link('account_edit.php', '', 'NONSSL'){/php}">Kontodaten bearbeiten</a></li>      
              <li><a href="{php}echo xtc_href_link('account_password.php', '', 'NONSSL'){/php}">Passwort &auml;ndern</a></li>
              <li><a href="{$logoff}">{#link_logoff#}</a></li>
                        </ul>

...kann mir Jemand einen Tipp geben, wo, bzw. in welcher Datei oder welchen Dateien ich etwas ergänzen/ändern muß, damit die Übersetzung bei entsprechender Sprachauswahl automatisch erfolgt?
Bin für jede Hilfe dankbar, hab' irgendwie schon alles probiert und nichts hat funktioniert.... 

Wünsche hier Allen frohe und besinnliche Festtage...

Gruß
Thomas

[noRiddle (revilonetz)]

Das ist ganz einfach.
Du legst in /lang/SPRACHE/lang_german.conf je Sprache unter dem Punkt [index] Sprachvariablen nach dem dort bereits sichtbaren Muster an.
Diese Variablen benutzt du dann im Template in der index.html z.B. so

Code: PHP  [Auswählen]

{#address_book#}

Für die beispielhaft genannte Variable müsstest du in den genannten Sprachdateien sowas stehen haben

Code: PHP  [Auswählen]

[index]
address_book = 'Adressbuch'

usw.

Das [index] gibt's da schon wie gesagt. Darunter die Variablen anlegen.

Gruß,
noRiddle

[XDuckX]

Hallo noRiddle,
vielen, vielen Dank, Du hast mich gerettet..... 

....ich dachte mir schon, dass die Variable

Code: PHP  [Auswählen]

{#link_logoff#}

für die Übersetzung zuständig sein muß, hatte diese auch schon in der Datei gefunden, aber irgend wie war ich wohl schon so von der Rolle  , daß ich nicht geschnallt habe, für die anderen Übersetzungen einfach neue Variablen zu schreiben....  
....also recht herzlichen Dank und schöne Festtage...

Gruß
Thomas

[3rdlife]

Hallo,

ich versuche mich auch gerade am Einbau der horizontalen Navi. Soweit klappt es schon einmal, nur steige ich bei der CSS superfish.css nicht ganz durch. Leider bin ich auch nicht so der CSS-Profi

Kann mir bitte jemand einen Tipp geben, wo ich da ansetzen muss? Ich finds auch nach langem Suchen nicht.

Das Dropdown soll dieselbe Breite haben wie die Buttons der Kategorien (147px). Also bis zur (hingemalten) roten Linie. Irgendwo fehlen mir da 4 oder 5 px.

So sieht die css aus:

Code: CSS  [Auswählen]

/*** ESSENTIAL STYLES ***/
.sf-menu, .sf-menu * {
        margin:                 0;
        padding:                0;
        list-style:             none;

}
.sf-menu {
        line-height:    1.0;
}
.sf-menu ul {
        position:               absolute;
        height:                 25px;
        top:                    -999em;
        width:                  10em; /* left offset of submenus need to match (see below) */
}
.sf-menu ul li {
        width:                  100%;
}
.sf-menu li:hover {
        visibility:             inherit; /* fixes IE7 'sticky bug' */
}
.sf-menu li {
        float:                  left;
        position:               relative;
        width:                  147px;
        height:                 25px;
        margin:                 0;
        padding:                0;
}
.sf-menu a {
        display:                block;
        position:               relative;
}
.sf-menu li:hover ul,
.sf-menu li.sfHover ul {
        left:                   0;
        top:                    25px; /* match top ul list item height */
        z-index:                99;
}
ul.sf-menu li:hover li ul,
ul.sf-menu li.sfHover li ul {
        top:                    -999em;
}
ul.sf-menu li li:hover ul,
ul.sf-menu li li.sfHover ul {
        left:                   10em; /* match ul width */
        top:                    0;
}
ul.sf-menu li li:hover li ul,
ul.sf-menu li li.sfHover li ul {
        top:                    -999em;
}
ul.sf-menu li li li:hover ul,
ul.sf-menu li li li.sfHover ul {
        left:                   10em; /* match ul width */
        top:                    0;
}

/*** DEMO SKIN ***/
.sf-menu {
        float:                  left;
}
.sf-menu a {
        /*border-left:  1px solid #fff;
        border-top:             1px solid #CFDEFF;
        padding:                .75em 1em;*/
        text-decoration:none;
}
.sf-menu a, .sf-menu a:visited  { /* visited pseudo selector so IE6 applies text colour*/
        color:                  #13a;
}
.sf-menu li {
        background:             #BDD2FF;
}
.sf-menu li li {
        background:             #AABDE6;
}
.sf-menu li li li {
        background:             #9AAEDB;
}
.sf-menu li:hover, .sf-menu li.sfHover,
.sf-menu a:focus, .sf-menu a:hover, .sf-menu a:active {
        background:             #CFDEFF;
        outline:                0;
}

/*** arrows **/
.sf-menu a.sf-with-ul {
        min-width:              1px; /* trigger IE7 hasLayout so spans position accurately */
}
.sf-sub-indicator {
        position:               absolute;
        display:                block;
        right:                  .75em;
        top:                    1.05em; /* IE6 only */
        width:                  10px;
        height:                 10px;
        text-indent:    -999em;
        overflow:               hidden;
        background:             url('../images/arrows-ffffff.png') no-repeat -10px -100px; /* 8-bit indexed alpha png. IE6 gets solid image only */
}
a > .sf-sub-indicator {  /* give all except IE6 the correct values */
        top:                    .8em;
        background-position: 0 -100px; /* use translucent arrow for modern browsers*/
}
/* apply hovers to modern browsers */
a:focus > .sf-sub-indicator,
a:hover > .sf-sub-indicator,
a:active > .sf-sub-indicator,
li:hover > a > .sf-sub-indicator,
li.sfHover > a > .sf-sub-indicator {
        background-position: -10px -100px; /* arrow hovers for modern browsers*/
}

/* point right for anchors in subs */
.sf-menu ul .sf-sub-indicator { background-position:  -10px 0; }
.sf-menu ul a > .sf-sub-indicator { background-position:  0 0; }
/* apply hovers to modern browsers */
.sf-menu ul a:focus > .sf-sub-indicator,
.sf-menu ul a:hover > .sf-sub-indicator,
.sf-menu ul a:active > .sf-sub-indicator,
.sf-menu ul li:hover > a > .sf-sub-indicator,
.sf-menu ul li.sfHover > a > .sf-sub-indicator {
        background-position: -10px 0; /* arrow hovers for modern browsers*/
}

/*** shadows for all but IE6 ***/
.sf-shadow ul {
        background:     url('../images/shadow.png') no-repeat bottom right;
        padding: 0 8px 9px 0;
        -moz-border-radius-bottomleft: 17px;
        -moz-border-radius-topright: 17px;
        -webkit-border-top-right-radius: 17px;
        -webkit-border-bottom-left-radius: 17px;
}
.sf-shadow ul.sf-shadow-off {
        background: transparent;
}

 

Wär super, wenn ich hier Hilfe kriegen würde!

[Kwonga]

Nabend Zusammen,

ich habe beim Einbau wohl was falsch gemacht:
[ Für Gäste sind keine Dateianhänge sichtbar ]
Es funktuniert zwar:
[ Für Gäste sind keine Dateianhänge sichtbar ]
aber es sieht ja so nicht wirklich schön aus...

Ich bin mir zwar nicht sicher, aber glaube das an der index.html liegt. Weil der Shop noch offline ist hier mal der Code:

Code: PHP  [Auswählen]

{config_load file="$language/lang_$language.conf" section="index"}
    <div id="staticcart">
      <div id="staticcartinner">
        <div id="links"> {if $smarty.session.customers_status.customers_status_id == '1'} &raquo; <a href="{php}echo xtc_href_link(FILENAME_CREATE_ACCOUNT, '', 'SSL');{/php}"><strong>{#new_customer#}</strong></a>    
        {/if}
          {if $smarty.session.customer_id} &raquo; <a href="{$logoff}"><strong>{#link_logoff#}</strong></a>    
        {else} &raquo; <a href="{$login}"><strong>{#link_login#}</strong></a>    
        {/if} </div>
        <div id="cart">{if !strstr ($smarty.server.PHP_SELF, 'checkout')}{$box_CART}{/if}</div>
        <div id="suche">{$box_SEARCH}</div>
      </div>
    </div>
<div id="wrap">
    <div id="header">
        <a target="_self" title="Die Wärmflasche.de" href="http://www.diewaermflasche.de"><div id="logo"><img src="{$tpl_path}img/Logo2.gif" alt="{$store_name}" /></div>
        <div id="search">{$box_SEARCH}</div>
    </div>
    <div id="topmenuwrap">
      <ul id="menu" class="sf-menu">
<li><a href="#">Katalog</a>
{$box_CATEGORIES_SUPERFISH}
</li>
            <li><a href="{$index}">{#link_index#}</a></li>    
       <li>
        {if !$smarty.session.customer_id}
          <a href="{$account}">{#link_account#}</a>
           <ul>
              {if $smarty.session.customers_status.customers_status_id == '1'}
               {/if}

                           </ul>                       
        {else}
          <a href="{$account}">{#link_account#}</a>
           <ul>
              <li><a href="{php}echo xtc_href_link('address_book.php', '', 'NONSSL'){/php}">Adressbuch</a></li>
              <li><a href="{php}echo xtc_href_link('account_history.php', '', 'NONSSL'){/php}">Bestellungen</a></li>
              <li><a href="{php}echo xtc_href_link('newsletter.php', '', 'NONSSL'){/php}">Newsletter</a></li>
              <li><a href="{php}echo xtc_href_link('account_edit.php', '', 'NONSSL'){/php}">Kontodaten bearbeiten</a></li>      
              <li><a href="{php}echo xtc_href_link('account_password.php', '', 'NONSSL'){/php}">Passwort &auml;ndern</a></li>
              <li><a href="{$logoff}">{#link_logoff#}</a></li>
           </ul>
        {/if}
        </li>  
        <li><a href="{$cart}">{#link_cart#}</a>
         <ul>
            <li><a href="{$checkout}">{#link_checkout#}</a></li>
           <li><a href="{$cart}">{#link_cart#}</a></li>
         </ul>
        </li>
      </ul>    
      <div id="languages">{$box_LANGUAGES}</div>
    </div>
    <div id="breadcrumb">{$navtrail}</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_SPECIALS}{$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>
    {if !strstr ($smarty.server.PHP_SELF, 'checkout')} 
<div id="rightcol">{*$box_CART*}{$box_LOGIN}{$box_ADMIN}{$box_BESTSELLERS}{$box_INFOBOX}{$box_CURRENCIES}{$box_MANUFACTURERS_INFO}{$box_MANUFACTURERS}</div>
    {/if} </div>
<div id="abstand"></div>
<div id="bottom">
  <div id="bottom-divs">
    <!-- Bottom Left -->
    <div id="bottom-left">
      {$box_CONTENT}
    </div>
    <!-- Bottom Mid -->
    <div id="bottom-mid">
      {$box_INFORMATION}
    </div>
    <!-- Bottom Right -->
    <div id="bottom-right">
      {$box_NEWSLETTER}
    </div>
  </div>
</div>
<p class="footer">{$smarty.const.TITLE} &copy; {$smarty.now|date_format:"%Y"} | Template &copy; 2009 by modified eCommerce Shopsoftware eCommerce Shopsoftware</p>
</div>

Weiss vielleicht jemand Rat?

Grüße
Dirk

[thomas57]

Code: PHP  [Auswählen]

      <ul id="menu" class="sf-menu">
<li><a href="#">Katalog</a>
{$box_CATEGORIES_SUPERFISH}
</li>

Scheint ein </ul> zu fehlen
gruß thomas57