Suche im Forum:
Suchen


« Vorheriges Thema anzeigen :: Nächstes Thema anzeigen »  
Autor Nachricht
Beitrag09.03.2012 um 14:25 (UTC)    
Titel: Coolmenü Unterpunkte zu Unterpunkten

Hi,

Danke für die schnelle Hilfe bis Dato und nun zu meinem neuen Wunsch. Smile

Hab mein Coolmenü soweit fertig und würde nun gerne wenn man auf z.B. auf Gallerie und dann 2008 klickt das dann noch ein Menü eingeblendet wird. Geht das??

Danke
Beitrag09.03.2012 um 16:34 (UTC)    
Titel:

Ja das geht du musst ein SubSubmenü machen.

MFG
______________
Marcweb1....ist einfach anders
Beitrag09.03.2012 um 19:55 (UTC)    
Titel:

Hallo,

marcweb1 hat Folgendes geschrieben:
Ja das geht du musst ein SubSubmenü machen.

Die Frage ist damit beantwortet, auch wenn ich glaube, dass der TO auch wissen will, wie es funktioniert. Wink

- verschoben, nach: HTML & JavaScript -
______________
mfg
o-4-n

"If you’re incompetent, you can’t know you’re incompetent." - [David Dunning]

*** Die Suchfunktion ist KEINE tödliche Krankheit! ***

Eventplanung, Equipment, Zeltverleih, Catering
Beitrag09.03.2012 um 20:58 (UTC)    
Titel:

Wohl wahr, Wink

nur ein kleiner Hinweis zum subsubmenü wäre schön, oder ein Link wo ich mich belesen kann, den Rest schaff ich dann denk ich.

Danke
Beitrag09.03.2012 um 21:15 (UTC)    
Titel:

Du hast dein Coolmenü ja aus folgendem Tutorial:
http://www.homepage-baukasten.de/forum/viewtopic.php?t=134830

Zitat:
<ul id="liste">
<li>
<a href="#">Kategorie 1</a>
<ul>
<li><a href="/Seite.htm">Unterseite 1.1</a></li>
<li><a href="/Seite.htm">Unterseite 1.2</a></li>
<li><a href="/Seite.htm">Unterseite 1.3</a></li>
</ul>

</li>

Das rote Listenelement beinhaltet den blauen Hauptpunkt, sowie die grüne Liste, welche sämtliche Unterpunkte enthält.

Willst du einem Unterpunkt jetzt einen weiteren Unterpunkt geben, kannst du ihm einfach eine weitere Liste einfügen:
Zitat:
<ul>
<li><a href="/Seite.htm">Unterseite 1.1</a>

<ul>
<li>Unterseite 1.1.1</li>
....
</ul>

</li>
...
</ul>

Per CSS musst du die neue liste, dann noch richtig positionieren, damit sie auch wie gewünscht ausklappt. Versuche es einfach mal.
______________
mfg
o-4-n

"If you’re incompetent, you can’t know you’re incompetent." - [David Dunning]

*** Die Suchfunktion ist KEINE tödliche Krankheit! ***

Eventplanung, Equipment, Zeltverleih, Catering


Zuletzt bearbeitet von o-4-n am 09.03.2012, 22:17, insgesamt 3-mal bearbeitet
Beitrag09.03.2012 um 23:00 (UTC)    
Titel:

Hi, hab das mit dem subsubmenü einfügen mal ausprobiert aber irgendwie zerschiesst er mir dann immer die ganze Navleiste. Sad

aber ich hab das richtig verstanden das hier:

<ul id="menu-bar">
<li class="current"><a href="http://www.hafengarde-tanzgruppe.de.tl">Start</a></li>
<li><a href="#">Galerie</a>
<ul>
<li><a href="http://www.hgo-galerie-2008.de.tl/Galerie/kat-1-1.htm">2008</a></li>

<ul>
<li>Unterseite 1.1.1</li>
....
</ul>


<li><a href="http://www.hgo-galerie-2009.de.tl/Galerie/index.htm">2009</a></li>
<li><a href="http://www.hgo-galerie-2010.de.tl/">2010</a></li>
<li><a href="http://www.hgo-galerie-2011.de.tl/">2011</a></li>

der code reinmuss damit in der Navigation bei Galerie=>2008 dann ein neues Klappelement erscheint, oder?

Und was meinst du mit positionieren? Das hab ich auch nicht verstanden, sorry. Sad

LG
Beitrag10.03.2012 um 00:29 (UTC)    
Titel:

Fast.
Die Liste muss Kindelement des Listenelementes sein:
Zitat:
<li><a href="http://www.hgo-galerie-2008.de.tl/Galerie/kat-1-1.htm">2008</a><ul>
<li>Unterseite 1.1.1</li>
</ul></li>

Ich habe die Pünktchen auch mal entfernt.

hafengarde-tanzgruppe hat Folgendes geschrieben:
aber irgendwie zerschiesst er mir dann immer die ganze Navleiste. Sad

Das ist die Folge von dem:
hafengarde-tanzgruppe hat Folgendes geschrieben:
Und was meinst du mit positionieren? Das hab ich auch nicht verstanden

Wink

Machen wir es mal Schritt für Schritt. Ich gehe davon aus, dass das neue Untermenü nach rechts ausklappen soll.
Die neue Unterliste muss aus dem Elementfluss genommen werden. Deshalb musst du das rot markierte löschen:

Zitat:
/* Feld um das Klappmenu */
#klappmenu {
position: absolute;
margin-top: 140px; /* Abstand von oben anpassen */
margin-left: 30px; /* Abstand zur linken Seite anpassbar */
width: 800px; /* die Breite anpassbar */
overflow: hidden;}


Bei folgendem stimmt der Selektor nicht mehr:
Zitat:
#liste li:hover ul { display:block; } /* ausgeklappt */

Hier werden alle Nachfahren vom Typ ul angesprochen. Das war bei einer Tiefe von 1 auch nicht relevant (Alle ul Elemente, die Nachfahre sind, sind auch direkter Nachfahre).
Jetzt ist es aber nicht mehr so, damit dürfen wir nur noch die direkten Nachfahren selektieren:
Zitat:
#liste li:hover > ul { display:block; } /* ausgeklappt */

Das rote habe ich hinzugefügt.

Das neue Untermenü nehmen wir wie bereits gesagt aus dem Elementfluss und richten es an dem Element aus, bei welchem es ausklappen soll. Dazu muss die position Eigenschaft des entsprechenden Elementes auf relative gesetzt werden:
Zitat:
#liste li {
width: 135px;
float: left;
text-align: center;
border: 1px solid #c9c9c9;
margin-right: 5px;
margin-left: 5px;
position:relative;
}

Das rote habe ich wieder eingefügt.

Das war es mit den Änderungen. Jetzt muss noch das neue Untermenü ausgerichtet werden.
Dazu selektieren wir die Liste, welche Nachfahre einer Liste, welche Nachfahre des Elementes mit der id liste ist:
Zitat:
#liste ul ul


Die position Eigenschaft auf absolute setzen:
Zitat:
#liste ul ul{
position:absolute;
}

Nach oben soll das Untermenü einen Abstand von 0 haben und nach Links als Abstand die Breite des Menüpunktes:
Zitat:
#liste ul ul{
position:absolute;
top:0;
left:XXpx;
}

Die XX musst du mit der Breite deiner Einträge ersetzen.
______________
mfg
o-4-n

"If you’re incompetent, you can’t know you’re incompetent." - [David Dunning]

*** Die Suchfunktion ist KEINE tödliche Krankheit! ***

Eventplanung, Equipment, Zeltverleih, Catering
Beitrag10.03.2012 um 08:56 (UTC)    
Titel:

Hi,
erstmal danke das du dir so viel Zeit nimmst zu helfen, find ich klasse. Smile

hab das mal so versucht, aber der Text "Untermenü 1.1.1" klappt nicht aus sondern steht im Moment dauerhaft im Hintergrund zwischen den Untermenüpunkten 2008 + 2009.

Meine nächste Fragen wäre wie ich dann den Untermenüpunkt 1.1.1 verlinken kann??

Daaannnnkkkkeeeee

Text über Design:

<div style="width:1000px; margin: 0px auto; overflow:visible; position:relative;">

<ul id="menu-bar">
<li class="current"><a href="http://www.hafengarde-tanzgruppe.de.tl">Start</a></li>
<li><a href="#">Galerie</a>
<ul>
<li><a href="http://www.hgo-galerie-2008.de.tl/Galerie/kat-1-1.htm">2008</a></li>
<li>Unterseite 1.1.1</li>

<li><a href="http://www.hgo-galerie-2009.de.tl/Galerie/index.htm">2009</a></li>
<li><a href="http://www.hgo-galerie-2010.de.tl/">2010</a></li>
<li><a href="http://www.hgo-galerie-2011.de.tl/">2011</a></li>
<li><a href="http://www.hgo-gallerie-2012.de.tl/">2012</a></li>
</ul>
</li>
<li><a href="http://hafengarde-tanzgruppe.de.tl/Das-sind-wir.htm">Das sind wir</a>
</li>
<li><a href="http://hafengarde-tanzgruppe.de.tl/Turniere-%2B--Titel.htm">Turniere+Titel</a></li>
<li><a href="http://www.fileden.com/files/2008/11/11/2182378//Mitgliedsantrag%20HGO.pdf">Mitglied werden</a></li>
</li>
<li><a href="impressum.htm">Impressum</a>
</li>
</ul>

Quellcode HP:


Code:
/* Nullformatierung für alle Browser */
*{padding: 0px; margin: 0px; }


/* Hintergrund hinter Design */
body
{text-align: center; background-image: url(http://img.webme.com/pic/h/hafengarde-tanzgruppe/back344.jpg);
background-color: transparent;
font-family: verdana;
color: #FFFFFF;
font-size: 15px; }

/* Design-Container */
#container
{width: 1000px;
margin: 0px auto ;
overflow: visible; }

#content #title
{display:none;}

/* Headerfeld 960 x 120 */
#header_container
{width: 1100px; height: 120px;
background-image: url(http://img.webme.com/pic/h/hafengarde-tanzgruppe/headertanzgruppe.png);
background-repeat: no-repeat;
background-color: transparent;}

/* Titel im Headerfeld entfernt */
h1#header {display: none; }

/* Feld der Navigation */
#nav_container
{width: 960px; height: 40px; margin-top: 40px;
background-color: transparent; }

/* Titel über Navigation entfernt */
#nav_heading {display: none; }

/* Aufzählungspunkte in Navi entfernt */
ul#nav {list-style-type: none; }

/* Navi-Buttons */
li.nav_element {display:none }

/* Seiteninhalt */
#content
{float: left;
width: 600px;
min-height: 200px;
padding: 20px 20px 20px 20px;
background-color: transparent;
overflow: visible; }

/* Titel Seiteninhalt + Titel über Box */
#nav_heading {display:none; }

/* Rechte Box */
#sidebar_container
{float: right;
text-align: left;
width: 205px;
min-height: 300px;
padding: 20px 20px 20px 20px ;
background-color: transparent;
overflow: visible; }

/* Liste in rechter Box */
#sidebar_content ul
{list-style-type: square;
margin: 15px 0px 15px 25px; }

/* Linktexte in Box */
#sidebar_content ul li a
{color: #000000;
font-size: 14px;
text-decoration: none; }

/* Hover Linktexte Box */
#sidebar_content ul li a:hover
{ color: black; }

/* Feld unter dem Design */
#footer
{width: 920px;
padding: 20px 20px 20px 20px;
margin: auto;
background-color: #FFFFFF; }

/* unnötige Felder im Design entfernt */
#pre_header {display:none;}
#post_header {display:none;}
#post_content {display:none;}
#below_content {display:none;}
#counter{display:none;}


/* Feld um das Klappmenu */
#klappmenu
{position: absolute;
margin-top: 180px; /* Abstand von oben anpassen */
width: 960px; /* die Breite anpassbar */
height: 250px;}

#klappmenu ul
{list-style-type: none;
margin:0px;
padding: 0px; }
 
#liste ul li
{margin: 0; border: none; }

/* Button Breite + Rahmen + Abstand */
#liste li
{width: 160px;
height: 40px;
float: left;
text-align: center;
position:relative;
background-color: transparent;
background-image: url(); }

#liste ul ul{
position:absolute;
top:0;
left:160px;
}

/* Button Linkfarbe + Hintergrundfarbe */
#liste a
{display: block;
font-size: 12px;
line-height: 35px;
color: #000000;
text-decoration: none;
background-color: #b3b3b3;
border: 2px solid #FFFFFF;
opacity: 0.95;
-moz-opacity: 0.95;
filter: alpha(opacity=95);
-moz-border-radius: 8px;
-webkit-border-radius: 8px;
border-radius: 8px;
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
transition: all 1s ease; }

/* Button Hover-Farbe */
#liste a:hover
{color: #FFFFFF;
opacity: 0.80;
-moz-opacity: 0.80;
filter: alpha(opacity=80);
background-color: #500000; }

#liste li ul { display:none; } /* eingeklappt */

#liste li:hover > ul { display:block; } /* ausgeklappt */

#menu-bar
{position: absolute;
margin-top: 300px; /* Abstand von oben anpassen */
margin-left: 30px; /* Abstand zur linken Seite anpassbar */
width: 800px; /* die Breite anpassbar */
overflow: visible;}

#menu-bar
{margin: 175px 0px 0px 100px;
padding: 6px 6px 6px 6px;
height: 34px;
overflow:visible;
line-height: 100%; 
border-radius: 24px; 
-webkit-border-radius: 24px;
-moz-border-radius: 24px; 
box-shadow: 2px 2px 3px #666666;
-webkit-box-shadow: 2px 2px 3px #666666;
-moz-box-shadow: 2px 2px 3px #666666;
background: #CC0000; 
border: solid 1px #6D6D6D;
opacity: 0.85;
-moz-opacity: 0.85;
filter: alpha(opacity=85);}

#menu-bar li
{margin: 0px 6px 0px 6px; 
padding: 0px 0px 6px 0px; 
float: left; 
position: relative;
list-style: none;}

#menu-bar a
{font-weight: bold;
font-family: verdana;
font-style: normal; 
font-size: 12px; 
color: #FFFFFF;
text-decoration: none;
display: block;
padding: 8px 20px 8px 20px; 
margin: 0;  border-radius: 10px;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
text-shadow: 2px 2px 3px #000000;}

#menu-bar .current a, #menu-bar li:hover > a
{background: #EBEBEB; 
color: #444444;
-webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, .2);  -moz-box-shadow: 0 1px 1px rgba(0, 0, 0, .2);  box-shadow: 0 1px 1px rgba(0, 0, 0, .2);
text-shadow: 2px 2px 3px #FFFFFF;}

#menu-bar ul li:hover a, #menu-bar li:hover li a
{background: none;
border: none; 
color: #666; 
-box-shadow: none;
-webkit-box-shadow: none;
-moz-box-shadow: none;}

#menu-bar ul a:hover
{background: #CC0000 !important;
color: #FFFFFF !important;
border-radius: 0;
-webkit-border-radius: 0;
-moz-border-radius: 0;
text-shadow: 2px 2px 3px #FFFFFF;}

#menu-bar ul
{background: #DDDDDD; filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#FFFFFF, endColorstr=#CFCFCF);
background: -webkit-gradient(linear, left top, left bottom, from(#FFFFFF), to(#CFCFCF));
background: -moz-linear-gradient(top,  #FFFFFF,  #CFCFCF); 
display: none;
margin: 0;
padding: 0;
width: 185px; 
position: absolute; 
top: 30px;
left: 0; 
border: solid 1px #B4B4B4;
border-radius: 10px;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
-webkit-box-shadow: 2px 2px 3px #222222; 
-moz-box-shadow: 2px 2px 3px #222222;
box-shadow: 2px 2px 3px #222222;}

#menu-bar li:hover > ul
{display: block;}

#menu-bar ul li
{float: none;  margin: 0;  padding: 0;}

#menu-bar ul a
{padding:10px 0px 10px 15px; 
color:#424242 !important;
font-size:12px;
font-style:normal; 
font-family:arial; 
font-weight: normal; 
text-shadow: 2px 2px 3px #FFFFFF;}

#menu-bar ul li:first-child > a
{border-top-left-radius: 10px; 
-webkit-border-top-left-radius: 10px;
-moz-border-radius-topleft: 10px;
border-top-right-radius: 10px;
-webkit-border-top-right-radius: 10px;
-moz-border-radius-topright: 10px;}

#menu-bar ul li:last-child > a
{border-bottom-left-radius: 10px; 
-webkit-border-bottom-left-radius: 10px;
-moz-border-radius-bottomleft: 10px; 
border-bottom-right-radius: 10px; 
-webkit-border-bottom-right-radius: 10px;
-moz-border-radius-bottomright: 10px;}

#menu-bar:after
{content: "."; 
display: block;
clear: both;
visibility: hidden;
line-height: 0;  height: 0;}

#menu-bar {  display: inline-block;}  html[xmlns]

#menu-bar {  display: block;}* html #menu-bar {  height: 1%;}



Zuletzt bearbeitet von hafengarde-tanzgruppe am 10.03.2012, 10:21, insgesamt einmal bearbeitet
Beitrag10.03.2012 um 14:24 (UTC)    
Titel:

Das Html ist immernoch falsch.

Zitat:
<div style="width:1000px; margin: 0px auto; overflow:visible; position:relative;">

<ul id="menu-bar">
<li class="current"><a href="http://www.hafengarde-tanzgruppe.de.tl">Start</a></li>
<li><a href="#">Galerie</a>
<ul>
<li><a href="http://www.hgo-galerie-2008.de.tl/Galerie/kat-1-1.htm">2008</a>
<ul>
<li><a href="Ziel URL">Unterseite 1.1.1</a></li>
</ul>
</li>
<li><a href="http://www.hgo-galerie-2009.de.tl/Galerie/index.htm">2009</a></li>
<li><a href="http://www.hgo-galerie-2010.de.tl/">2010</a></li>
<li><a href="http://www.hgo-galerie-2011.de.tl/">2011</a></li>
<li><a href="http://www.hgo-gallerie-2012.de.tl/">2012</a></li>
</ul>
</li>
<li><a href="http://hafengarde-tanzgruppe.de.tl/Das-sind-wir.htm">Das sind wir</a>
</li>
<li><a href="http://hafengarde-tanzgruppe.de.tl/Turniere-%2B--Titel.htm">Turniere+Titel</a></li>
<li><a href="http://www.fileden.com/files/2008/11/11/2182378//Mitgliedsantrag%20HGO.pdf">Mitglied werden</a></li>
</li>
<li><a href="impressum.htm">Impressum</a>
</li>
</ul>


Meine Erklärung bezog sich auf die Ids aus dem Tutorial. Ist das das Coolmenü aus dem Tutorial? Du hast nämlich andere Ids. Die musst du auch ändern. Entweder im Html Teil oder im CSS Teil.

Das ist alles etwas seltsam. Hast du den CSS Code für 2 verschiedene Coolmenüs eingefügt?
______________
mfg
o-4-n

"If you’re incompetent, you can’t know you’re incompetent." - [David Dunning]

*** Die Suchfunktion ist KEINE tödliche Krankheit! ***

Eventplanung, Equipment, Zeltverleih, Catering


Zuletzt bearbeitet von o-4-n am 10.03.2012, 16:23, insgesamt 2-mal bearbeitet
Beitrag10.03.2012 um 14:47 (UTC)    
Titel:

Oje, stimmt da stehen noch die reste vom Coolmenü drin. (Klappmenü)

Benutze aber das Menü ganz am Ende des CSS Quellcodes. Werde die Klappreste mal rauswerfen, Sorry

Und so wie du jetzt das Untermenü im HTML reingeschrieben hast sollte das gehen? Wo schreib ich dann die Links dabei?

Lg

Thilo
Beitrag10.03.2012 um 15:29 (UTC)    
Titel:

Wie gesagt, meine Erklärungen bezogen sich auf das andere Coolmenü.

Sollte aber klappen, wenn du diesen Punkt noch bedenkst:
o-4-n hat Folgendes geschrieben:
Jetzt muss noch das neue Untermenü ausgerichtet werden.
Dazu selektieren wir die Liste, welche Nachfahre einer Liste, welche Nachfahre des Elementes mit der id liste ist:
Zitat:
#liste ul ul


Die position Eigenschaft auf absolute setzen:
Zitat:
#liste ul ul{
position:absolute;
}

Nach oben soll das Untermenü einen Abstand von 0 haben und nach Links als Abstand die Breite des Menüpunktes:
Zitat:
#liste ul ul{
position:absolute;
top:0;
left:XXpx;
}

Die XX musst du mit der Breite deiner Einträge ersetzen.

Du musst noch die richtige Id für dein Coolmenü einfügen. Einfach liste mit menu-bar ersetzen.

Zum verlinken habe ich in meinem letzten Beitrag etwas rot markiert.
______________
mfg
o-4-n

"If you’re incompetent, you can’t know you’re incompetent." - [David Dunning]

*** Die Suchfunktion ist KEINE tödliche Krankheit! ***

Eventplanung, Equipment, Zeltverleih, Catering
Beitrag10.03.2012 um 16:33 (UTC)    
Titel:

Superklasse, DANKE !!!!

So wollte ich das haben, hab in der Galerie ab 2010 mit den Untermenüs angefangen. Smile

Melde hiermit Problem gelöst !!!

Mein Dank wird dich ewig verfolgen.

PS.: Hab meinen Quellcode jetzt auch mal aufgeräumt. (nach bestem wissen und Gewissen)

LG Thilo
Beitrag10.03.2012 um 17:30 (UTC)    
Titel:

Danke für die Rückmeldung.

- CLOSED -
______________
mfg
o-4-n

"If you’re incompetent, you can’t know you’re incompetent." - [David Dunning]

*** Die Suchfunktion ist KEINE tödliche Krankheit! ***

Eventplanung, Equipment, Zeltverleih, Catering
Beiträge der letzten Zeit anzeigen:   


Powered by phpBB © 2001, 2005 phpBB Group
Deutsche Übersetzung von phpBB.de