Dropdown Menue erstellen

Begonnen von Mainzer, 19 Oktober 2008, 21:59:56

⏪ vorheriges - nächstes ⏩

0 Mitglieder und 1 Gast betrachten dieses Thema.

Drucken
Nach unten Seiten1
Benutzer-Aktionen

Mainzer

19 Oktober 2008, 21:59:56
Hi habe heute ja eine menge fragen :BD:
ich brauche aber eine headnavi!

Ich würde gerne in der oberen Navigationsleiste die Menues als Dropdown erstellen, komme aber nicht so wirklich weiter!
Also als beispiel:
Kategorie                  Fotos
Untermenue            - Länder
Untermenue            - Tiere
usw.........

also wenn ich mit der Maus über Fotos fahre sollen sich mir die weiteren Untermenues öffnen!
Ich weiß aber nicht ganz wie das geht und einige meiner Versuche sind gescheitert!
Wer kann helfen?

Und jetzt sage mir noch einer das findest du auch hier im Forum und ich brech zusammen!
Ja ich habe paar sachen gefunden und nein komme damit auch nicht weiter!
Hat jemand so nen codeschnippsel for moi?
THX

cihan

#1
19 Oktober 2008, 23:25:51
Hallo  :)
hier findest du bestimmt was: http://www.cssplay.co.uk/menus/drop_examples.html ... Du musst den Seitenquelltext anzeigen und kopieren.
lg

Mainzer

#2
19 Oktober 2008, 23:48:50
Hi,
auf der Seite bin ich schon seit paar stunden komme aber nicht klar!
OK, schritt für schritt!

PKT1: in die theme.html kommt also folgender code (ist evtl etwas zuviel dabei)
Code Auswählen
div id="showcase">

<div id="info">

<h2>CSS only drop-down menu - further examples</h2>
<h3>24th May 2006</h3>


<p>Menu #1 - 24th May 2006</p>

<div class="menu1">

<ul>
<li><a class="menu1one" href="#nogo">Home</a></li>
</ul>

<ul>
<li><a class="menu1two" href="#nogo">Products
<!--[if IE 7]><!--></a><!--<![endif]-->
<table><tr><td>
<ul>
<li><a href="#nogo">Mobiles</a></li>
<li><a href="#nogo">Photoframes</a></li>
<li><a href="#nogo">Tripods</a></li>
<li><a href="#nogo">Memory cards</a></li>

<li><a class="drop" href="#nogo">Cameras
<!--[if IE 7]><!--></a><!--<![endif]-->
<table><tr><td>
<ul>
<li><a href="#nogo">SLRs</a></li>
<li><a href="#nogo">Compact</a></li>
<li><a href="#nogo">Digital</a></li>
<li><a href="#nogo">Video</a></li>

</ul>
</td></tr></table>
<!--[if lte IE 6]></a><![endif]-->
</li>
<li><a href="#nogo">Camcorders</a></li>
<li><a href="#nogo">Accessories</a></li>
</ul>
</td></tr></table>

<!--[if lte IE 6]></a><![endif]-->
</li>
<li><a class="menu1three" href="#nogo">Services
<!--[if IE 7]><!--></a><!--<![endif]-->
<table><tr><td>
<ul>
<li><a href="#nogo">Photography</a></li>
<li><a href="#nogo">Video editing</a></li>
<li><a href="#nogo">Web site Design and Hosting</a></li>

<li><a href="#nogo">Reference guides</a></li>
<li><a href="#nogo">Tutorials</a></li>
</ul>
</td></tr></table>
<!--[if lte IE 6]></a><![endif]-->
</li>
<li><a class="menu1four" href="#nogo">Contact us</a></li>
<li><a class="menu1five" href="#nogo">Site map</a></li>
<li><a class="menu1six" href="#nogo">News

<!--[if IE 7]><!--></a><!--<![endif]-->
<table><tr><td>
<ul class="endstop">
<li><a href="#nogo">Breaking</a></li>
<li><a href="#nogo">Latest</a></li>
<li><a href="#nogo">May 2006</a></li>
<li><a class="drop" href="#nogo">News archives and articles
<!--[if IE 7]><!--></a><!--<![endif]-->

<table><tr><td>
<ul class="left">
<li><a href="#nogo">April 2006</a></li>
<li><a href="#nogo">March 2006</a></li>
<li><a href="#nogo">February 2006</a></li>
<li><a href="#nogo">January 2006</a></li>
</ul>

</td></tr></table>
<!--[if lte IE 6]></a><![endif]-->
</li>
</ul>
</td></tr></table>
<!--[if lte IE 6]></a><![endif]-->
</li>
</ul>

</div>
<div class="col3">
<p>This first example is a flexible width top level list that expands to fit the text.<br />It has a fixed height and uses a background image that stretches the full width of the outer div, in this case 750px, and a background div in each top level link to mark the right hand edge of the link.</p>

</div>
<div class="col3">
<p>The top level hover varies the text color and the bottom border color.<br />The sub level hover varies the background color and adds a background square bullet against the top line of each list item. Sub level drop down lists can be positioned anywhere (left/right) beneath the top level list.</p>
</div>
<div class="col3">
<p>The sub levels are a fixed size, but can easily be changed to suit your requirements, and have a single pixel border.<br />
Sub level flyouts are indicated by a sub level link with a grey background and a square bullet. These flyouts can be made to appear to the right or the left of the sub level list.</p>
</div>

<hr />


folgendes kommt dann in die layout.css (denke mal so)
Code Auswählen
<style type="text/css">
/* ================================================================
This copyright notice must be untouched at all times.

The original version of this stylesheet and the associated (x)html
is available at http://www.cssplay.co.uk/menus/drop_examples.html
Copyright (c) 2005-2007 Stu Nicholls. All rights reserved.
This stylesheet and the associated (x)html may be modified in any
way to fit your requirements.
=================================================================== */
/* common styling */
.menu1 {
float:left; width:100%; font-family: verdana, arial, sans-serif; font-size:11px;
background:url(images/menu1.gif) repeat-x top left;
border-top:3px solid #4c597f;  border-bottom:3px solid #4c597f;
margin:0 0 20px 0; /* for this demo only */
}
.menu1 ul {
padding:0;margin:0;list-style-type:none;
}
.menu1 ul li {
float:left; position:relative; background:url(images/divider1.gif) no-repeat top right;
}
.menu1 ul li a, .menu1 ul li a:visited {
float:left; display:block; text-decoration:none;color:#ddf; padding:0px 16px; line-height:25px; height:30px; border-bottom:3px solid #fff;
}

.menu1 ul li:hover {width:auto;}

.menu1 ul li a.menu1one:hover {border-color:#c00; color:#f88;}
.menu1 ul li a.menu1two:hover {border-color:#c60; color:#fc0;}
.menu1 ul li a.menu1three:hover {border-color:#cc0; color:#cc0;}
.menu1 ul li a.menu1four:hover {border-color:#080; color:#0e0;}
.menu1 ul li a.menu1five:hover {border-color:#00c; color:#aaf;}
.menu1 ul li a.menu1six:hover {border-color:#c0c; color:#f8f;}

.menu1 ul li:hover a.menu1one {border-color:#c00; color:#f88;}
.menu1 ul li:hover a.menu1two {border-color:#c60; color:#fc0;}
.menu1 ul li:hover a.menu1three {border-color:#cc0; color:#cc0;}
.menu1 ul li:hover a.menu1four {border-color:#080; color:#0e0;}
.menu1 ul li:hover a.menu1five {border-color:#00c; color:#aaf;}
.menu1 ul li:hover a.menu1six {border-color:#c0c; color:#f8f;}

.menu1 ul li ul {
display: none;
}
.menu1 table {
margin:0; border-collapse:collapse; font-size:11px; position:absolute; top:0; left:0;
}

/* specific to non IE browsers */
.menu1 ul li:hover ul {
display:block;position:absolute;top:32px;margin-top:1px; left:0;width:154px;border-bottom:1px solid #000;
}
.menu1 ul li:hover ul.endstop {
left:-92px;
}
.menu1 ul li:hover ul li ul {
display: none;
}
.menu1 ul li:hover ul li a {
display:block;background:#fff;color:#000;height:auto;line-height:15px;padding:4px 16px; width:120px; border:1px solid #000; border-bottom:0;
}
.menu1 ul li:hover ul li a.drop {
background:#ccd url(images/bullet1.gif) no-repeat 3px 8px;
}
.menu1 ul li:hover ul li a:hover {
color:#000; background: #ccd url(images/bullet1.gif) no-repeat 3px 8px;
}
.menu1 ul li:hover ul li a:hover.drop {
background: #ccd url(images/bullet1.gif) no-repeat 3px 8px;
}
.menu1 ul li:hover ul li:hover ul {
display:block; position:absolute; left:153px; top:-1px;
}
.menu1 ul li:hover ul li:hover ul.left {
left:-153px;
}



/* specific to IE5.5 and IE6 browsers */
.menu1 ul li a:hover ul {
display:block;position:absolute;top:30px; t\op:33px; background:#fff;left:0; border-bottom:1px solid #000;
}

.menu1 ul li a:hover ul.endstop {
left: -92px;
}
.menu1 ul li a:hover ul li a {
display:block;background:#fff;color:#000; height:1px; line-height:15px; padding:4px 16px; width:154px; w\idth:120px; border:1px solid #000; border-bottom:0;
}
.menu1 ul li a:hover ul li a.drop {
background:#ccd url(images/bullet1.gif) no-repeat 3px 8px; padding-bottom:4px;
}
.menu1 ul li a:hover ul li a ul {
visibility:hidden; position:absolute; height:0; width:0;
}
.menu1 ul li a:hover ul li a:hover {
color:#000; background: #ccd url(images/bullet1.gif) no-repeat 3px 8px;
}
.menu1 ul li a:hover ul li a:hover.drop {
background: #ccd url(images/bullet1.gif) no-repeat 3px 8px;
}
.menu1 ul li a:hover ul li a:hover ul {
visibility:visible; position:absolute; top:0;color:#000; left:153px;
}
.menu1 ul li a:hover ul li a:hover ul.left {
left:-153px;
}
</style>
<!--[if lte IE 5.5]>
<style type="text/css">
.menu1 ul li a, .menu1 ul li a:visited {height:33px;}
</style>
<![endif]-->


So die ganzen gifs/jpgs wie auch immer benutzeich dann die eigenen!
Nun aber das Problem:
Was oder wie füge ich das in die settings.php ein?
Banhof :puzzled:

Aber so in der Art sollte es doch gehen?
Bin ich da auf dem richtigen weg?
so denn......

cihan

#3
20 Oktober 2008, 00:22:42
Hi,
in theme.html kommt das hier:

Code Auswählen
<div class="menu1">

<ul>
<li><a class="menu1one" href="#nogo">Home</a></li>
</ul>

<ul>
<li><a class="menu1two" href="#nogo">Products
<!--[if IE 7]><!--></a><!--<![endif]-->
    <table><tr><td>
<ul>
        <li><a href="#nogo">Mobiles</a></li>
    <li><a href="#nogo">Photoframes</a></li>
        <li><a href="#nogo">Tripods</a></li>
    <li><a href="#nogo">Memory cards</a></li>

<li><a class="drop" href="#nogo">Cameras
  <!--[if IE 7]><!--></a><!--<![endif]-->
                <table><tr><td>
         <ul>
                <li><a href="#nogo">SLRs</a></li>
               <li><a href="#nogo">Compact</a></li>
            <li><a href="#nogo">Digital</a></li>
            <li><a href="#nogo">Video</a></li>

                </ul>
               </td></tr></table>
      <!--[if lte IE 6]></a><![endif]-->
      </li>
       <li><a href="#nogo">Camcorders</a></li>
<li><a href="#nogo">Accessories</a></li>
        </ul>
       </td></tr></table>

<!--[if lte IE 6]></a><![endif]-->
</li>
<li><a class="menu1three" href="#nogo">Services
<!--[if IE 7]><!--></a><!--<![endif]-->
        <table><tr><td>
<ul>
        <li><a href="#nogo">Photography</a></li>
        <li><a href="#nogo">Video editing</a></li>
      <li><a href="#nogo">Web site Design and Hosting</a></li>

  <li><a href="#nogo">Reference guides</a></li>
   <li><a href="#nogo">Tutorials</a></li>
  </ul>
       </td></tr></table>
<!--[if lte IE 6]></a><![endif]-->
</li>
<li><a class="menu1four" href="#nogo">Contact us</a></li>
<li><a class="menu1five" href="#nogo">Site map</a></li>
<li><a class="menu1six" href="#nogo">News

<!--[if IE 7]><!--></a><!--<![endif]-->
  <table><tr><td>
<ul class="endstop">
      <li><a href="#nogo">Breaking</a></li>
   <li><a href="#nogo">Latest</a></li>
     <li><a href="#nogo">May 2006</a></li>
   <li><a class="drop" href="#nogo">News archives and articles
       <!--[if IE 7]><!--></a><!--<![endif]-->

          <table><tr><td>
         <ul class="left">
         <li><a href="#nogo">April 2006</a></li>
         <li><a href="#nogo">March 2006</a></li>
         <li><a href="#nogo">February 2006</a></li>
              <li><a href="#nogo">January 2006</a></li>
               </ul>

         </td></tr></table>
      <!--[if lte IE 6]></a><![endif]-->
      </li>
       </ul>
       </td></tr></table>
<!--[if lte IE 6]></a><![endif]-->
</li>
</ul>

</div>

und ins style.css
Code Auswählen



/* ================================================================
This copyright notice must be untouched at all times.

The original version of this stylesheet and the associated (x)html
is available at http://www.cssplay.co.uk/menus/drop_examples.html
Copyright (c) 2005-2007 Stu Nicholls. All rights reserved.
This stylesheet and the associated (x)html may be modified in any
way to fit your requirements.
=================================================================== */
/* common styling */
.menu1 {
float:left; width:100%; font-family: verdana, arial, sans-serif; font-size:11px;
background:url(images/menu1.gif) repeat-x top left;
border-top:3px solid #4c597f;  border-bottom:3px solid #4c597f;
margin:0 0 20px 0; /* for this demo only */
}
.menu1 ul {
padding:0;margin:0;list-style-type:none;
}
.menu1 ul li {
float:left; position:relative; background:url(images/divider1.gif) no-repeat top right;
}
.menu1 ul li a, .menu1 ul li a:visited {
float:left; display:block; text-decoration:none;color:#ddf; padding:0px 16px; line-height:25px; height:30px; border-bottom:3px solid #fff;
}

.menu1 ul li:hover {width:auto;}

.menu1 ul li a.menu1one:hover {border-color:#c00; color:#f88;}
.menu1 ul li a.menu1two:hover {border-color:#c60; color:#fc0;}
.menu1 ul li a.menu1three:hover {border-color:#cc0; color:#cc0;}
.menu1 ul li a.menu1four:hover {border-color:#080; color:#0e0;}
.menu1 ul li a.menu1five:hover {border-color:#00c; color:#aaf;}
.menu1 ul li a.menu1six:hover {border-color:#c0c; color:#f8f;}

.menu1 ul li:hover a.menu1one {border-color:#c00; color:#f88;}
.menu1 ul li:hover a.menu1two {border-color:#c60; color:#fc0;}
.menu1 ul li:hover a.menu1three {border-color:#cc0; color:#cc0;}
.menu1 ul li:hover a.menu1four {border-color:#080; color:#0e0;}
.menu1 ul li:hover a.menu1five {border-color:#00c; color:#aaf;}
.menu1 ul li:hover a.menu1six {border-color:#c0c; color:#f8f;}

.menu1 ul li ul {
display: none;
}
.menu1 table {
margin:0; border-collapse:collapse; font-size:11px; position:absolute; top:0; left:0;
}

/* specific to non IE browsers */
.menu1 ul li:hover ul {
display:block;position:absolute;top:32px;margin-top:1px; left:0;width:154px;border-bottom:1px solid #000;
}
.menu1 ul li:hover ul.endstop {
left:-92px;
}
.menu1 ul li:hover ul li ul {
display: none;
}
.menu1 ul li:hover ul li a {
display:block;background:#fff;color:#000;height:auto;line-height:15px;padding:4px 16px; width:120px; border:1px solid #000; border-bottom:0;
}
.menu1 ul li:hover ul li a.drop {
background:#ccd url(images/bullet1.gif) no-repeat 3px 8px;
}
.menu1 ul li:hover ul li a:hover {
color:#000; background: #ccd url(images/bullet1.gif) no-repeat 3px 8px;
}
.menu1 ul li:hover ul li a:hover.drop {
background: #ccd url(images/bullet1.gif) no-repeat 3px 8px;
}
.menu1 ul li:hover ul li:hover ul {
display:block; position:absolute; left:153px; top:-1px;
}
.menu1 ul li:hover ul li:hover ul.left {
left:-153px;
}



/* specific to IE5.5 and IE6 browsers */
.menu1 ul li a:hover ul {
display:block;position:absolute;top:30px; t\op:33px; background:#fff;left:0; border-bottom:1px solid #000;
}

.menu1 ul li a:hover ul.endstop {
left: -92px;
}
.menu1 ul li a:hover ul li a {
display:block;background:#fff;color:#000; height:1px; line-height:15px; padding:4px 16px; width:154px; w\idth:120px; border:1px solid #000; border-bottom:0;
}
.menu1 ul li a:hover ul li a.drop {
background:#ccd url(images/bullet1.gif) no-repeat 3px 8px; padding-bottom:4px;
}
.menu1 ul li a:hover ul li a ul {
visibility:hidden; position:absolute; height:0; width:0;
}
.menu1 ul li a:hover ul li a:hover {
color:#000; background: #ccd url(images/bullet1.gif) no-repeat 3px 8px;
}
.menu1 ul li a:hover ul li a:hover.drop {
background: #ccd url(images/bullet1.gif) no-repeat 3px 8px;
}
.menu1 ul li a:hover ul li a:hover ul {
visibility:visible; position:absolute; top:0;color:#000; left:153px;
}
.menu1 ul li a:hover ul li a:hover ul.left {
left:-153px;
}

<!--[if lte IE 5.5]>

.menu1 ul li a, .menu1 ul li a:visited {height:33px;}

<![endif]-->


Dann sollte dein Menu schonmal funktionieren... Den Pfad zu Hintergrundbilder usw. musst du im CSS-Teil anpassen... Damit das so wie auf der obengenannten Seite funktioniert, brauchst du nichts ins settings.php einzutragen.

NDeezign

#4
20 Oktober 2008, 01:59:30
die bilder für das menü tust du einfach in den "image" order deines themes, die pfade in deiner momentanen css datei sind wie folgt:
Code Auswählen
(images/bullet1.gif)

die änderst du alle um in:
(../images/bullet1.gif)

also vor jedes images noch einen slash und doppelpunkt, welches bedeutet, dass die bilder eine ebene drüber im images ordner sind, da du dich ja in der layout.css im style ordner befindest ...
Liebe Grüsse & Gü Güş


Kein Support via Mail, PN & Messenger!
Nutze vorher bitte auch die Optionen: Suche | DokuWiki

Mainzer

#5
20 Oktober 2008, 12:04:22
Hi,
@cihan, danke für Deine hilfe! :thumbup:
Habe es gestern mal auf die schnelle probiert und es funktioniert so!
Werde es aber erst heute Abend richtig einbauen, die Arbeit ruft!
@NDeezign
yeep, css begreife ich langsam , php ist und bleibt mir aber ein Rätsel!
Es geht aber langsam voran....
Danke, danke
bis denn..........
Drucken
Nach oben Seiten1
Benutzer-Aktionen