Drop Down Menü - Bitte um Hilfe

Begonnen von Webfan, 29 März 2014, 11:44:52

⏪ vorheriges - nächstes ⏩

0 Mitglieder und 2 Gäste betrachten dieses Thema.

Webfan

Hallo,
es wäre wirklich nett wenn mir jemand einen Tipp geben könnte.
Es geht um das Drop Down Menü http://schmeckts.at/ oben grau (Home, Artikel, Benutzerverwaltung, ...)

Das Problem ist, besonders deutlich beim Menüpunkt "Lokale", das das Drop Down Menü nach rechts verschoben wird, ich hätte gerne das Menü direkt unter dem Mouseover-Hauptmenü-Punkt möglichst direkt darunter mittig/bündig.

Code:
function theme_get_navbars()
{
    global $themesetting;
    foreach ($themesetting['headnav'] as $title => $menue) {
        if (empty($current) && in_array(1, $menue['case'])) {
          //  $current = ' class="current"';
          $current = ' ';
        } else {
            $current = '';
        }
        $p = '<li' . $current . '><a href="' . $menue['link'] . '">' . $title . '</a>';
         if(isset( $menue['subs']) && is_array($menue['subs']) )
          {
           $id = 'UL_'.mt_rand(10000, 9999999999999999);
           $p.= '<ul id="'.$id.'">';
            foreach($menue['subs'] as $title => $link)
             {
               $p .= '<li><a href="'.$link.'">'.$title.'</a></li><br />';
             }
            $p.= '</ul>';

          }

        $p .='</li>';
        $part[] = $p;
    }
    // mxDebugFuncVars($themesetting, $part);
    //return implode("\n", $part);
    $part = implode(" ", $part);

    //drop down
    $r = '
<style type="text/css">
    nav2 {
    width: 100%;
-khtml-border-radius:6px;
-webkit-border-radius: 6px;
-moz-border-radius:6px;
border-radius: 6px;
border-left-radius: 6px;
z-Index:1000;
text-align: left;
}
nav2 ul {

-khtml-border-radius:6px;
-webkit-border-radius: 6px;
-moz-border-radius:6px;
border-radius: 6px;
border-left-radius: 6px;
z-Index:1000;

text-align: left;
}
nav2 ul:after {
    display: block;
    font-size: 0;
    height: 0;
    visibility: hidden;
    z-Index:1000;
    text-align: left;
}
    nav2 ul,nav2 ul li{
    background-color: lightgray;
-khtml-border-radius:6px;
-webkit-border-radius: 6px;
-moz-border-radius:6px;
border-radius: 6px;
border-left-radius: 6px;
z-Index:1000;
text-align: left;
}
    nav2 ul li {
    list-style: none;
    text-align: left;
    display: block;

    background-color: lightgray;
    z-Index:1000;
}
nav2 ul li a {
    text-decoration: none;

    color: #333;
    padding: 1px 2px 1px 2px;
    z-Index:1000;
    text-align: left;
}
nav2 ul li:hover > ul {
    visibility: visible;
    z-Index:1000;
    text-align: left;
}
nav2 ul li:hover  {
    background-color:lightgreen;
    text-align: left;
}
nav2 ul li ul{

    visibility: hidden;
    position: absolute;
    padding:0px;
    z-Index:1000;
    text-align: left;
}
nav2 ul li ul li{
   display:block;
    z-Index:1000;
    text-align: left;
}
</style>

';
    $r.= '<nav2>
            <ul>';
            $r.= $part;
    $r.='   </ul>
        </nav2>
        ';

    return $r;
}

Wie man sieht wurde das Menü aus themesettings.php bei einigen Punkten um das subs Array ergänzt.

Hier der Code als HTML Ausgabe:
              <div id="nav">
                <div id="nav-main">
                  <a id="page-navigation" class="noscreen noprint" name="page-navigation"></a>
                <div class="languages">
                 
                </div>
                 
<style type="text/css">
    nav2 {
    width: 100%;
-khtml-border-radius:6px;
-webkit-border-radius: 6px;
-moz-border-radius:6px;
border-radius: 6px;
border-left-radius: 6px;
z-Index:1000;
text-align: left;
}
nav2 ul {

-khtml-border-radius:6px;
-webkit-border-radius: 6px;
-moz-border-radius:6px;
border-radius: 6px;
border-left-radius: 6px;
z-Index:1000;

text-align: left;
}
nav2 ul:after {
    display: block;
    font-size: 0;
    height: 0;
    visibility: hidden;
    z-Index:1000;
    text-align: left;
}
    nav2 ul,nav2 ul li{
    background-color: lightgray;
-khtml-border-radius:6px;
-webkit-border-radius: 6px;
-moz-border-radius:6px;
border-radius: 6px;
border-left-radius: 6px;
z-Index:1000;
text-align: left;
}
    nav2 ul li {
    list-style: none;
    text-align: left;
    display: block;

    background-color: lightgray;
    z-Index:1000;
}
nav2 ul li a {
    text-decoration: none;

    color: #333;
    padding: 1px 2px 1px 2px;
    z-Index:1000;
    text-align: left;
}
nav2 ul li:hover > ul {
    visibility: visible;
    z-Index:1000;
    text-align: left;
}
nav2 ul li:hover  {
    background-color:lightgreen;
    text-align: left;
}
nav2 ul li ul{

    visibility: hidden;
    position: absolute;
    padding:0px;
    z-Index:1000;
    text-align: left;
}
nav2 ul li ul li{
   display:block;
    z-Index:1000;
    text-align: left;
}
</style>

<nav2>
            <ul><li><a href="home.html">Home</a></li> <li><a href="Stories_Archive.html">Artikel</a>
            <ul id="UL_1128743113958766"><li><a href="/Stories_Archive.html">Artikel Archiv</a></li><br />
            <li><a href="/Submit_News.html">Artikel schreiben</a></li><br /></ul></li>
             <li><a href="/Your_Account.html">Benutzerverwaltung</a><ul id="UL_6852213530804384">
             <li><a href="/mydata.html">Einstellungen</a></li><br /><li><a href="/Newsletter.html">Email-Abbonements</a></li><br />
             <li><a href="/Lokale-op-myEntries.html">Ihre Lokaleintr&auml;ge</a></li><br />
             <li><a href="/Lokale-op-myRatings.html">Ihre Bewertungen</a></li><br />
             <li><a href="/Userinfo.html#auszeichnungen">Ihre Auszeichnungen</a></li><br />
             <li><a href="/Userinfo.html#merkliste">Ihre Merkliste</a></li><br />
             <li><a href="/Lokale-op-ratgeber-task-myRG.html">Ihre Ratgeber</a></li><br />
             <li><a href="http://schmeckts.at/24R51.l">Ihr Stammgastbuch</a></li><br />
             <li><a href="/Schedule-act-myevents.html">Meine Termine</a></li><br />
             <li><a href="/Private_Messages.html">Private Nachrichten</a></li><br />
             </ul></li> <li><a href="Downloads.html">Download</a></li>
              <li ><a href="eBoard.html">Forum</a></li>
              <li><a href="Lokale.html">Lokale</a>
              <ul id="UL_9183405702934486">
              <li><a href="/Lokale-op-addEntry.html">Lokal anlegen</a></li><br />
              <li><a href="/Lokale-op-ratgeber.html">Ratgeber</a></li><br />
              <li><a href="/Lokale-op-ratgeber-task-add.html">Ratgeber hinzuf&uuml;gen</a></li><br />
              <li><a href="/kategorien/">Kategorien</a></li><br /><li><a href="/Top50.html">Top 50 Lokale</a></li><br />
              <li><a href="/zertifikate/">Zertifikate</a></li><br /></ul></li>
               <li><a href="recipes.html">Rezepte</a></li>
               <li><a href="Reviews.html">Testberichte</a></li>   </ul>
        </nav2>
       
           
                </div>
              </div>


Vielen Dank!

mfg

------------------------------------------------------------------------------------------------------------------------------
Demnächst gibt es neue Module!
Vorab-Test (Installer): http://www.webfan.de/Downloads-lid-Webfan-PragmaMx-Module-63.html
------------------------------------------------------------------------------------------------------------------------------

cihan

Hallo,
die Verschiebung nach rechts kommt von das hier:


layout.css, Zeile 392
#nav-main ul {
   display: inline; /* (en|de) Bugfix: IE - Doubled Float Margin Bug */
   float: left;
   /* (de) Abstand des ersten Buttons vom linken Rand  */
   margin: 0 0 0 50px;
   padding: 0;
}


Da ist das margin von 50px nach links...

Ich würde so machen:

#nav-main ul {
   display: inline; /* (en|de) Bugfix: IE - Doubled Float Margin Bug */
   float: left;
   /* (de) Abstand des ersten Buttons vom linken Rand  */
   margin: 0 0 0 0px;
   padding: 0;
}


und dann noch zusätzlich:

#nav-main {
   padding-left: 50px;
}

Das sollte es sein.

Viele Grüße

Webfan

Hallo cihan,
mh, das wars leider nicht ganz, verschiebt sich noch nach rechts.
Nichtsdestotrotz, vielen herzlichen Dank für Deine Hilfe!

Der Kunde hat sich nun für ein modifiziertes emplode Theme entschieden.

Viele Grüße
Till

bambussprosse

Hallo cihan!

Wie bereits Webfan geschrieben hatte, hat es leider nicht so funktioniert wie wir es uns vorgestellt haben. Auch ein modifiziertes emplode Theme hat nicht meinen Vorstellungen entsprochen und so bin ich nun wieder bei meinen alten Theme gelandet, mit der fast perfekten CSS-Menü-Navigationsleiste.

Würde mich sehr freuen wenn man uns hier weiter helfen könnte. Denn das Untermenü sollte selbstverständlich genau darunter sein und nicht rechts davon. Wir benutzen übrigens das mx-defaul theme.

Weiß jemand Rat?

mfg Bambussprosse

Andi

Der Lösungsweg von Cihan war schon richtig...

Aber mal ehrlich, dieses olle Theme passt doch überhaupt nicht zu der Seite
schön´s Grüssle, Andi

cihan

Hallo,
ihr habt noch das hier in der layout.css:

layout.css, Zeile 392

#nav-main ul {
   display: inline; /* (en|de) Bugfix: IE - Doubled Float Margin Bug */
   float: left;
   /* (de) Abstand des ersten Buttons vom linken Rand  */
   margin: 0 0 0 50px;
   padding: 0;
}


Das ganze einfach entfernen, dann sollte es ok sein... Und wolltet ihr das aufgeklappte Menü weiter nach links verschieben, dann müsstet ihr mit negativen margin machen.

lg

Webfan

Hallo, halllo,
vielen Dank Euch beiden!!!
Leider hat es nichts geholfen.
#nav-main ul habe ich auskommentiert.
#nav-main {
   padding-left: 50px;
}

wurde geänder nach:
#nav-main {
   padding-left: 0px;
}


         if(isset( $menue['subs']) && is_array($menue['subs'])  )
          {
           $id = 'UL_'.mt_rand(10000, 9999999999999999);
           $p.= '<ul id="'.$id.'">'."\n";

geändert nach:
         if(isset( $menue['subs']) && is_array($menue['subs']) && count($menue['subs']) > 0 )
          {
           $id = 'UL_'.mt_rand(10000, 9999999999999999);
           $p.= '<ul id="'.$id.'">'."\n";


Selbstsammerweise habe ich das meißte auf display:block gesetzt, trotzdem erscheinen die Untermenuepunkte neben- statt untereinander, wenn ich nach dem li den br Umbruch entferne!?

             <div id="nav">
                <div id="nav-main">
                  <a id="page-navigation" class="noscreen noprint" name="page-navigation"></a>
                <div class="languages">
                 
                </div>

         
                             
<style type="text/css">
    nav2 {
    width: 100%;

-webkit-border-radius: 6px;
-moz-border-radius:6px;
border-radius: 6px;
border-left-radius: 6px;
z-Index:1000;

}
nav2 ul {


-webkit-border-radius: 6px;
-moz-border-radius:6px;
border-radius: 6px;
border-left-radius: 6px;
z-Index:1000;

text-align: left;
}
nav2 ul:after {
    display: block;
    font-size: 0;
    height: 0;
    visibility: hidden;
    z-Index:1000;

}
    nav2 ul,nav2 ul li{
    background-color: lightgray;

-webkit-border-radius: 6px;
-moz-border-radius:6px;
border-radius: 6px;
border-left-radius: 6px;
z-Index:1000;
text-align: left;  display:block;
}
    nav2 ul li {
    list-style: none;
    text-align: left;
    display: block;

    background-color: lightgray;
    z-Index:1000;
}
nav2 ul li a {
    text-decoration: none;
  display:block;
    color: #333;

    z-Index:1000;
    text-align: left;
}
nav2 ul li:hover > ul {
    visibility: visible;
    z-Index:1000;
    text-align: left;
}
nav2 ul li:hover  {
    background-color:lightgreen;
    text-align: left;
}
nav2 ul li ul{

    visibility: hidden;
    position: absolute;
    padding:0px;
    z-Index:1000;
    text-align: left;
       display:block;
}
nav2 ul li ul li{
   display:block;
    z-Index:1000;
    text-align: left;
}
</style>

<nav2>

            <ul>
<li><a href="home.html">Home</a>
</li>
<li><a href="Stories_Archive.html">Artikel</a>
<ul id="UL_8419168768452199">
<li><a href="/Stories_Archive.html">Artikel Archiv</a></li><br />
<li><a href="/Submit_News.html">Artikel schreiben</a></li><br />
</ul>
</li>
<li><a href="/Your_Account.html">Benutzerverwaltung</a>
<ul id="UL_5890608197082218">
<li><a href="/mydata.html">Einstellungen</a></li><br />
<li><a href="/Newsletter.html">Email-Abbonements</a></li><br />
<li><a href="/Lokale-op-myEntries.html">Ihre Lokaleintr&auml;ge</a></li><br />
<li><a href="/Lokale-op-myRatings.html">Ihre Bewertungen</a></li><br />
<li><a href="/Userinfo.html#auszeichnungen">Ihre Auszeichnungen</a></li><br />
<li><a href="/Userinfo.html#merkliste">Ihre Merkliste</a></li><br />
<li><a href="/Lokale-op-ratgeber-task-myRG.html">Ihre Ratgeber</a></li><br />
<li><a href="http://schmeckts.at/24R51.l">Ihr Stammgastbuch</a></li><br />
<li><a href="/Schedule-act-myevents.html">Meine Termine</a></li><br />
<li><a href="/Private_Messages.html">Private Nachrichten</a></li><br />
</ul>
</li>
<li><a href="Downloads.html">Download</a>
</li>
<li><a href="eBoard.html">Forum</a>
</li>
<li ><a href="Lokale.html">Lokale</a>
<ul id="UL_8390471516178668">
<li><a href="/Lokale-op-addEntry.html">Lokal anlegen</a></li><br />
<li><a href="/Lokale-op-ratgeber.html">Ratgeber</a></li><br />
<li><a href="/Lokale-op-ratgeber-task-add.html">Ratgeber hinzuf&uuml;gen</a></li><br />
<li><a href="/kategorien/">Kategorien</a></li><br />
<li><a href="/Top50.html">Top 50 Lokale</a></li><br />
<li><a href="/zertifikate/">Zertifikate</a></li><br />
</ul>
</li>
<li><a href="recipes.html">Rezepte</a>
</li>
<li><a href="Reviews.html">Testberichte</a>
</li>

   </ul>

        </nav2>

         
                </div>
     </div>     


:gruebel:

Viele Grüße
Till

Webfan

...außerdem scheinen da html tags nicht wohlverschachtelt,...

cihan

Hallo,
wenn ich die Änderungen in meinem ersten Beitrag vornehme, dann passiert genau das, was ihr wollt... Andi hat das schön an Hand von Screenshots gezeigt... Wollt ihr das, was man auf den Screenshots sieht?

ihr habt noch immer das hier drin:

layout.css, Zeile 393
display: inline; /* (en|de) Bugfix: IE - Doubled Float Margin Bug */
float: left;
/* (de) Abstand des ersten Buttons vom linken Rand  */
margin: 0 0 0 50px;
padding: 0;


Macht mal folgendes:

Ändere layout.css, Zeile 393 so:

#nav-main ul {
display: inline; /* (en|de) Bugfix: IE - Doubled Float Margin Bug */
float: left;
/* (de) Abstand des ersten Buttons vom linken Rand  */
margin: 0 0 0 0px;
padding: 0;
}

und dann dahinter das hier:

#nav-main {
padding-left: 50px;
}

Dann bekommt ihr das, was ihr auf den Screenshots sieht.

lg

Webfan

Hallo cihan,
ja jetzt weiß ich auch wo das Problem liegt:
Hatte den Abschnitt zwar auskommentiert, nav-main ul war jedoch in der layout.css doppelt vorhanden, weiter unten in der Datei war der selbe Abschnitt nochmal aus irgendwelchen Gründen, das hatte ich übersehen.
Peinlich.

Super, vielen Dank!
Ich bin zu Dank verpflichtet, Du erhälst in Kürze eine PM...

Viele Grüße
Till