css active im Topmenu

[olli0578]

Ich such mir jetzt schon den ganzen Abend nen Wolf.
Wie bekomme ich es hin, dem gerade aktiven Menüpunkt im Topmenu die css Klasse active zuzuweisen?
Also wenn ich zu Beispiel auf der Startseite bin, soll der Menüpunkt Startseite die Klasse active zugewiesen bekommen. Genauso beim Warenkorb und allen anderen Topmenüelementen.


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

[jannemann]

Hallo olli0578,

hier wird das sehr gut erklärt.

Schöne Grüße,
Jan

[olli0578]

Wie ich die stylesheet.css bearbeiten muß ist mir klar. Nur wird die active Klasse nicht übergeben wie es bei den Kategorien der Fall ist.

[olli0578]

Hier mal der Code aus meiner html Vorlage:

Code: PHP  [Auswählen]

<div id="topmenuwrap">
<div class="topmenu">
<ul>
<li class="active"><a href="index.html" title="Home">Startseite</a></li>
<li><a href="warenkorb.html" title="New">Warenkorb</a></li>
<li><a href="konto.html" title="Revised">Mein Konto</a></li>
<li><a href="kasse.html" title="Tools">Kasse</a></li>
<li><a href="anmelden.html" title="CSS">Anmelden</a></li>
</ul>
</div><!--eof topmenu-->
</div><!--eof topmenuwrap-->
 

Und das ist der Code der von modified im Browser ausgegeben wird:

Code: PHP  [Auswählen]

<div id="topmenuwrap">
<div class="topmenu">
<ul>
<li><a href="http://testshop.de/">Startseite</a></li>
<li><a href="http://testshop.de/shopping_cart.php">Warenkorb</a></li>
<li><a href="https://testshop.de/account.php">Mein Konto</a></li>
<li><a href="https://testshop.de/create_account.php">Neukunde?</a></li>
<li><a href="https://testshop.de/checkout_shipping.php">Kasse</a></li>
<li><a href="https://testshop.de/login.php">Anmelden</a></li>
</ul>
</div><!--eof topmenu-->
</div><!--eof topmenuwrap-->

Wie Ihr seht, wird das active in Zeile 4 von modified nicht übergeben. Und da liegt mein Problem.

Der Vollständigkeit halber hier noch das css:

Code: CSS  [Auswählen]

.topmenu ul{
margin:0px;
margin-left: 40px; /*margin between first menu item and left browser edge*/
padding: 0;
list-style: none;
}

.topmenu li{
display: inline;
margin: 0 2px 0 0;
padding: 0;
text-transform:uppercase;
}

.topmenu a{
float: left;
display: block;
font: bold 12px Arial;
color: black;
text-decoration: none;
margin: 0 1px 0 0; /*Margin between each menu item*/
padding: 5px 10px 9px 10px; /*Padding within each menu item*/
background-color: white; /*Default menu color*/

/*BELOW 4 LINES add rounded bottom corners to each menu item.
  ONLY WORKS IN FIREFOX AND FUTURE CSS3 CAPABLE BROWSERS
  REMOVE IF DESIRED*/
-moz-border-radius-bottomleft: 5px;
border-bottom-left-radius: 5px;
-moz-border-radius-bottomright: 5px;
border-bottom-right-radius: 5px;
}

.topmenu a:hover{
background-color: #FF0200; /*Red color theme*/
padding-top: 9px; /*Flip default padding-top value with padding-bottom */
padding-bottom: 5px; /*Flip default padding-bottom value with padding-top*/
color: white;
}

.topmenu .active a{ /** currently selected menu item **/
background-color: #FF0200; /*Red color theme*/
padding-top: 9px; /*Flip default padding-top value with padding-bottom */
padding-bottom: 5px; /*Flip default padding-bottom value with padding-top*/
color: white;
}

[noRiddle (revilonetz)]

So geht das ja auch nicht.
Du müsstest abfragen wo du gerade bist und dann die class="active" vergeben.
Also z.B. so:

Code: PHP  [Auswählen]

<div id="topmenuwrap">
    <div class="topmenu">
        <ul>
            <li><a{if strpos($smarty.server.PHP_SELF, 'index') && $smarty.get.cPath == null && $smarty.get.manufacturers_id == ''} class="active"{/if} href="index.html" title="Home">Startseite</a></li>
            <li><a{if strpos($smarty.server.PHP_SELF, 'shopping_cart')} class="active"{/if} href="warenkorb.html" title="New">Warenkorb</a></li>
            <li><a{if strpos($smarty.server.PHP_SELF, account')} class="active"{/if} href="konto.html" title="Revised">Mein Konto</a></li>
             ...
        </ul>
    </div>
</div>

Dabei sind die href nicht korrekt weil sie Session-Verlust bedeuten können.
Da du nicht sagst welche Shopversion du hast, hier mal für 1.06 rev4642:
Das muß also so aussehen:

Code: PHP  [Auswählen]

<div id="topmenuwrap">
    <div class="topmenu">
        <ul>
            <li><a{if strpos($smarty.server.PHP_SELF, 'index') && $smarty.get.cPath == null && $smarty.get.manufacturers_id == ''} class="active"{/if} href="{$index}" title="Home">Startseite</a></li>
            <li><a{if strpos($smarty.server.PHP_SELF, 'shopping_cart')} class="active"{/if} href="{$cart}" title="New">Warenkorb</a></li>
            <li><a{if strpos($smarty.server.PHP_SELF, account')} class="active"{/if} href="{$account}" title="Revised">Mein Konto</a></li>
             ...
        </ul>
    </div>
</div>

Oder mit (als Beispiel):

Code: PHP  [Auswählen]

<li><a href="{php}echo xtc_href_link(FILENAME_SHOPPING_CART, '', 'SSL');{/php}">{#link_shopping_cart#}</a></li>

wobei der Text des Links in der /lang/SPRACHE/lang_SPRACHE.conf definiert sein sollte weil ansonsten Mehrsprachigkeit nicht gegeben ist.

Gruß,
noRiddle

[olli0578]

So. Ich habe die index.html vom Template mal wie folgt angepasst:

Code: PHP  [Auswählen]

<div class="topmenu">
<ul>
<li><a{if strpos($smarty.server.PHP_SELF, 'index') && $smarty.get.cPath == null && $smarty.get.manufacturers_id == ''} class="active"{/if} href="{$index}" title="{#link_index#}">{#link_index#}</a></li>
<li><a{if strpos($smarty.server.PHP_SELF, 'cart') && $smarty.get.cPath == null && $smarty.get.manufacturers_id == ''} class="active"{/if} href="{$cart}" title="{#link_cart#}">{#link_cart#}</a></li>
     {if $account}
        <li><a{if strpos($smarty.server.PHP_SELF, 'account') && $smarty.get.cPath == null && $smarty.get.manufacturers_id == ''} class="active"{/if} href="{$account}" title="{#link_account#}">{#link_account#}</a></li>
     {/if}
      {if $smarty.session.customers_status.customers_status_id == '1'}
        <li><a{if strpos($smarty.server.PHP_SELF, 'account') && $smarty.get.cPath == null && $smarty.get.manufacturers_id == ''} class="active"{/if} href="{php}echo xtc_href_link(FILENAME_CREATE_ACCOUNT, '', 'SSL');{/php}" title="{#new_customer#}">{#new_customer#}</a></li>
     {/if}
      <li><a{if strpos($smarty.server.PHP_SELF, 'checkout') && $smarty.get.cPath == null && $smarty.get.manufacturers_id == ''} class="active"{/if} href="{$checkout}" title="{#link_checkout#}">{#link_checkout#}</a></li>
     {if $smarty.session.customer_id}
        <li><a{if strpos($smarty.server.PHP_SELF, 'logoff') && $smarty.get.cPath == null && $smarty.get.manufacturers_id == ''} class="active"{/if} href="{$logoff}" title="{#link_logoff#}">{#link_logoff#}</a></li>
     {else}
        <li><a{if strpos($smarty.server.PHP_SELF, 'login') && $smarty.get.cPath == null && $smarty.get.manufacturers_id == ''} class="active"{/if} href="{$login}" title="{#link_login#}">{#link_login#}</a></li>
     {/if}
</ul>
</div><!--eof topmenu-->
 

Das funktioniert soweit auch ganz gut.
ABER: Wenn ich den Menüpunkt "Neukunde?" anklicke wenn ich nicht im Shop angemeldet bin, sind sowohl der Menüpunkt "Neukunde?" als auch der Menüpunkt "Mein Konto aktiv.
Hat jemand ne Idee, wie man das ändern kann?

[noRiddle (revilonetz)]

• && $smarty.get.cPath == null && $smarty.get.manufacturers_id == ''
  wird nur für die index-Seite (= Startseite) benötigt, du hast das überall eingefügt, wofür ?
• Schau dir einfach die URLs an und folgere.
  'account' reicht als string im strpos() offensichtlich nicht aus wenn du zwischen
  'create_*_account' und 'account' unterscheiden möchtest da offensichtlich das Wort 'account' in beiden vorkommt.

Im übrigen könntest du ja auch mal nachschauen was strpos() genau mcht...

Gruß,
noRiddle

[olli0578]

Sorry, aber in Sachen PHP bin ich nicht so der Held.
Ich möchte ja auch nur ein nettes Template für ein hoffentlich ausgereiftes Shopsystem erstellen und nicht den ganzen Shop umschreiben.
strpos() findet also die Nadel im Heuhaufen.
Ich habe den Code jetzt mal bereinigt, weiß aber nicht, wie ich die Abfrage zwischen account und create_account unterscheiden lassen kann. Hier mein bisheriges Egebnis:

Code: PHP  [Auswählen]

<div class="topmenu">
<ul>
<li><a{if strpos($smarty.server.PHP_SELF, 'index') && $smarty.get.cPath == null && $smarty.get.manufacturers_id == ''} class="active"{/if} href="{$index}" title="{#link_index#}">{#link_index#}</a></li>
<li><a{if strpos($smarty.server.PHP_SELF, 'cart') } class="active"{/if} href="{$cart}" title="{#link_cart#}">{#link_cart#}</a></li>
     {if $account}
        <li><a{if strpos($smarty.server.PHP_SELF, 'account') } class="active"{/if} href="{$account}" title="{#link_account#}">{#link_account#}</a></li>
     {/if}
      {if $smarty.session.customers_status.customers_status_id == '1'}
        <li><a{if strpos($smarty.server.PHP_SELF, 'create_account') } class="active"{/if} href="{php}echo xtc_href_link(FILENAME_CREATE_ACCOUNT, '', 'SSL');{/php}" title="{#new_customer#}">{#new_customer#}</a></li>
     {/if}
      <li><a{if strpos($smarty.server.PHP_SELF, 'checkout') } class="active"{/if} href="{$checkout}" title="{#link_checkout#}">{#link_checkout#}</a></li>
     {if $smarty.session.customer_id}
        <li><a{if strpos($smarty.server.PHP_SELF, 'logoff') } class="active"{/if} href="{$logoff}" title="{#link_logoff#}">{#link_logoff#}</a></li>
     {else}
        <li><a{if strpos($smarty.server.PHP_SELF, 'login') } class="active"{/if} href="{$login}" title="{#link_login#}">{#link_login#}</a></li>
     {/if}
</ul>
</div><!--eof topmenu-->

Vielleicht kann ja mal jemand die Abfrage richtig formulieren.

[noRiddle (revilonetz)]

Für die Konto-Seite:

Code: PHP  [Auswählen]

{if strpos($smarty.server.PHP_SELF, 'account') && !strpos($smarty.server.PHP_SELF, 'create')}class="active"{/if}

(da 'account' auch in 'create_account' vorkommt )

Gruß,
noRiddle

[Matt]

Völlig am Thema vorbei, aber vergleicht das smarty strpos auf boolsches false?

[noRiddle (revilonetz)]

Verhält sich nach meiner Erfahrung wie PHP strpos().
Also wenn needle nicht gefunden wird => boolean false.

Gruß,
noRiddle

[Matt]

Das ist je genau der Punkt. account.php würde 0 zurückgeben bei einer Überprüfung auf account. Was auch ein Wert ist, der als false interpretiert wird.
Wenn Smarty da nicht auf boolsches false prüft:

Code: [Auswählen]

{if strpos($smarty.server.PHP_SELF, 'account') }wird das nie true.

[noRiddle (revilonetz)]

Die Position des Strings 'account' im String PHP_SELF ist 0, ja.
Aber:
PHP gibt nur dann false aus wenn needle nicht gefunden wurde.
Das heißt, die Position 0 ist nicht mit dem boolean false gleichzusetzen.

Würde ich prüfen (mal in PHP)

Code: PHP  [Auswählen]

if(strpos($PHP_SELF, 'account') == false) {
    DO_SOMETHING
}

hätte ich ein Problem, da müsste ich prüfen

Code: PHP  [Auswählen]

if(strpos($PHP_SELF, 'account') === false) {
    DO_SOMETHING
}

da es auch, wie du zurecht sagst, Werte gibt die als false ausgewertet werden, so auch den Integer 0.
Das Auswerten eines Integer 0 ist aber nicht gleich dem type boolean false,
deshalb das type-spezifische === bei Prüfung auf den boolean.

Hatte hier darüber schonmal was geschrieben.

Verstehe ich was nicht ?

Gruß,
noRiddle

*NACHTRAG*
Zur Sicherheit nochmal:
Mit

Code: PHP  [Auswählen]

if(strpos()

teste ich aber auf den type boolean false.

[olli0578]

Guten Morgen,
ich habe gerade mal den Schnipsel von noRiddle eingebaut. Wenn ich nicht angemeldet bin, sieht das Ergebnis jetzt gut aus. Wenn ich angemeldet bin, wirft er "Mein Konto auf der account.php ohne Verlinkung und  Formatierung aus. Ich hab mal nen Screenshot angehängt.
So hab ich's eingebunden in die index.html:

Code: PHP  [Auswählen]

<div class="topmenu">
<ul>
<li><a{if strpos($smarty.server.PHP_SELF, 'index') && $smarty.get.cPath == null && $smarty.get.manufacturers_id == ''} class="active"{/if} href="{$index}" title="{#link_index#}">{#link_index#}</a></li>
<li><a{if strpos($smarty.server.PHP_SELF, 'cart') } class="active"{/if} href="{$cart}" title="{#link_cart#}">{#link_cart#}</a></li>
     {if $account}
        <li><a{if strpos($smarty.server.PHP_SELF, 'account') && !strpos($smarty.server.PHP_SELF, 'create')}class="active"{/if} href="{$account}" title="{#link_account#}">{#link_account#}</a></li>
     {/if}
      {if $smarty.session.customers_status.customers_status_id == '1'}
        <li><a{if strpos($smarty.server.PHP_SELF, 'create_account') } class="active"{/if} href="{php}echo xtc_href_link(FILENAME_CREATE_ACCOUNT, '', 'SSL');{/php}" title="{#new_customer#}">{#new_customer#}</a></li>
     {/if}
      <li><a{if strpos($smarty.server.PHP_SELF, 'checkout') } class="active"{/if} href="{$checkout}" title="{#link_checkout#}">{#link_checkout#}</a></li>
     {if $smarty.session.customer_id}
        <li><a{if strpos($smarty.server.PHP_SELF, 'logoff') } class="active"{/if} href="{$logoff}" title="{#link_logoff#}">{#link_logoff#}</a></li>
     {else}
        <li><a{if strpos($smarty.server.PHP_SELF, 'login') } class="active"{/if} href="{$login}" title="{#link_login#}">{#link_login#}</a></li>
     {/if}
</ul>
</div><!--eof topmenu-->

[noRiddle (revilonetz)]

Da fehlt ein Leerzeichen

Code: PHP  [Auswählen]

<li><a{if strpos($smarty.server.PHP_SELF, 'account') && !strpos($smarty.server.PHP_SELF, 'create')}class="active"{/if}

vor class="active",
was du mit Firebug oder ähnlichen Tools sowie einfach mit "Auswahl-Quelltext anschauen" leicht herausbekommen hättest.

Deine Codezeile ergibt nämlich das in der HTML-Ausgabe:

Code: XML  [Auswählen]

<li><aclass="active" href="....

Gruß,
noRiddle