Suche im Forum:
Suchen


« Vorheriges Thema anzeigen :: Nächstes Thema anzeigen »  
Autor Nachricht
Beitrag05.09.2012 um 15:39 (UTC)    
Titel: Cooldownmenü

Hallo,
kann mir jemand dabei helfen hier ein Cooldownmenü einzubauen?
Ich würde gerne, dass das so aussieht wie hier: http://floorball-neuwittenbek.de/
Also, dass die Kopfzeile im Prinzip beibehalten wird und die Unterpunkte auf einem farbigem Hintergrund einfach nach unten klappen.

Code:

.templatemo_menu {
margin:auto;
width:1000px;
height:49px;
background:url(http://img.webme.com/pic/f/floorballtestseite/514725.jpg) no-repeat;
color:#FFFFFF;
font-weight:bold;
}

.templatemo_menu ul {
margin:0;
list-style:none;
padding-left:50px;
}

.templatemo_menu li {
display: inline;
}

.templatemo_menu li a {
float:left;
padding:10px 0;
width:98px;
color:#FFFFFF;
text-decoration:none;
text-align:center;
}

.templatemo_menu li a:hover,.templatemo_menu li .current {
color:#000;
background:url(http://www.loaditup.de/files/514726.jpg) no-repeat;
}

Vielen Dank für eure Mithilfe!
Gruß
Beitrag05.09.2012 um 16:09 (UTC)    
Titel:

Hallo,

schaust einfach mal hier rein, vielleicht hilft dir das weiter Smile


http://www.homepage-baukasten.de/forum/viewtopic.php?t=134830
Beitrag05.09.2012 um 16:11 (UTC)    
Titel:

Hey ja danke, das hatte ich auch schon gefunden. Aber dabei sieht das ausgeklappte Menü ganauso aus, wie die Buttons oben... Da wollte ich halt mal fragen, ob es auch noch eine andere Lösung gibt.
Gruß
Beitrag05.09.2012 um 16:16 (UTC)    
Titel: Re: Cooldownmenü

floorballtestseite hat Folgendes geschrieben:
Also, dass die Kopfzeile im Prinzip beibehalten wird und die Unterpunkte auf einem farbigem Hintergrund einfach nach unten klappen.


Wenn du es so willst, dann musst du doch theoretisch nur die Hintergrundfarbe ändern Wink
Beitrag06.09.2012 um 11:40 (UTC)    
Titel:

Hey, ja das versuche ich ja. Immerhin geht das dropdown jetzt, das Problem ist nur, dass er immer das Hintergrundbild auch für den unteren Teil nimmt... Ich hätte das gerne so, dass das einfach nur ein bisschen dunkler markiert wird dann. Hier mein Code:

Code:

#templatemo_menu {
position: absolute;
margin: 0px;
width:1000px;
background:url(http://img.webme.com/pic/f/floorballtestseite/514725.jpg) no-repeat;
color:#FFFFFF;
font-weight:bold;
overflow: hidden;
}

#templatemo_menu ul {
list-style-type: none; margin-left:50px; padding: 0px;
}

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

#liste ul li { margin: 0px;}

#liste li { margin: 0px;
width: 98px;
float: left; }

#liste a {float:left;
padding-top: 16px;
width:98px;
color:#FFFFFF;
text-decoration:none;
text-align:center; }

#liste1 a {float:left;
padding-top: 16px;
width:98px;
color:#000;
background-color: #caf0f1;
text-decoration:none;
text-align:center; }

#liste1 a:hover {float:left;
padding-top: 16px;
width:98px;
color:#000;
background-color: #008f97;
text-decoration:none;
text-align:center; }

#liste a:hover {color: #000; background-image: url(http://img.webme.com/pic/f/floorballtestseite/514726test.jpg); background-repeat: no-repeat; background-color: #transparent; }

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

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


Code:

<div id="templatemo_menu">
<ul id="liste">
        <li><a href="home.htm">Home<br /><br /></a></li>
        <li><a href="news.htm">News<br /><br /></a>
        <li><a href="#">Infos<br /><br /></a>
              <ul id="liste1"><li><a href="termine.htm">Termine<br /><br /></a></li>
              <li><a href="trainingszeiten.htm">Training<br /><br /></a></li>
              <li><a href="kontakt.htm">Kontakt<br /><br /></a></li>
              <li><a href="support.htm">Support<br /><br /></a></li>
        </ul></li>
        <li><a href="#">Teams<br /><br /></a>
              <ul id="liste1">
              <li><a href="/u11.htm">u11<br /><br /></a></li>
              <li><a href="/u13.htm">u13<br /><br /></a></li>
              <li><a href="/u15.htm">u15<br /><br /></a></li>
              <li><a href="/Jugend-GF.htm">Jugend GF<br /><br /></a></li>
              <li><a href="/Erwachsene.htm">Erwachsene<br /><br /></a></li>
              <li><a href="/statistik.htm">Statistik<br /><br /></a></li>
             </ul></li>
         <li><a href="sponsoren.htm">Sponsoren<br /><br /></a></li>
         <li><a href="links.htm">Links<br /><br /></a>
               <ul id="liste1">
               <li><a href="/floorball-in-nordfriesland.htm">Wo spielen?<br /><br /></a></li>
               </ul></li>
<li>
<a href="downloads.htm">Downloads<br /><br /></a></li>
</ul>
</div>



Danke, Gruß


Zuletzt bearbeitet von floorballtestseite am 06.09.2012, 12:43, insgesamt einmal bearbeitet
Beitrag07.09.2012 um 06:36 (UTC)    
Titel:

okay, das Problem habe ich lösen können, jetzt nur noch eine andere Frage:
Wenn ich auf einen Link gehe, wo dann was runterklappt und die Maus runterbewege, dann wird der Link oben nicht mehr markiert, klar weil der hover Effekt dann wegfällt. Ich hätte es allerdings gerne so, dass das Feld oben markiert wird, sodass die Spalte mit den Unterpunkte nicht so im "Nichts" schwebt.
Kann mir da jemand weiterhelfen?

Danke lieben Gruß

Mein Code:
Code:

#templatemo_menu {
position: absolute;
margin: 0px;
width:1000px;
background:url(http://img.webme.com/pic/f/floorballtestseite/514725.jpg) no-repeat;
color:#FFFFFF;
font-weight:bold;
overflow: hidden;
}

#templatemo_menu ul {
list-style-type: none; margin-left:50px; padding: 0px;
}

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

#liste ul li { margin: 0px;}

#liste li { margin: 0px;
width: 98px;
float: left; }

#liste a {float:left;
padding:17px 0px;
width:98px;
color:#FFFFFF;
text-decoration:none;
text-align:center; }

#liste li a:hover {color: #000; background-image: url(http://img.webme.com/pic/f/floorballtestseite/514726.png); background-repeat: no-repeat; background-color: #transparent; }

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

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

#liste li ul li {margin: 0px;
width: 98px;
float: left;
}

#liste li ul li a {color: #000; background-color: #caf0f1;}

#liste li ul li a:hover { background-color: #008f97; background-image: url();
}




EDIT: Kann geschlossen werden, Problem konnte gelöst werden! Danke


Zuletzt bearbeitet von floorballtestseite am 07.09.2012, 10:26, insgesamt einmal bearbeitet
Beitrag07.09.2012 um 10:12 (UTC)    
Titel:

Vielen Dank für die Rückmeldung und vielen Dank an den Helfer!

-CLOSED-, da erledigt

mfg philipp
______________
Forenregeln, FAQ, Suchfunktion
Beiträge der letzten Zeit anzeigen:   


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