Register for your free account! | Forgot your password?

Go Back   elitepvpers > Coders Den > Web Development
HTML/CSS Menu mit 2 unter menüs HTML/CSS Menu mit 2 unter menüs
You last visited: Today at 17:05

  • Please register to post and access all features, it's quick, easy and FREE!

Advertisement


Advertise with us!

HTML/CSS Menu mit 2 unter menüs

Discussion on HTML/CSS Menu mit 2 unter menüs within the Web Development forum part of the Coders Den category.

Reply
 
Old   #1
 
elite*gold: 0
The Black Market: 2/0/0
Join Date: Nov 2010
Posts: 255
Received Thanks: 176
HTML/CSS Menu mit 2 unter menüs

Hallo,

ich benutze DLE 10.0 auf meiner Website.
Dort ist ein Standart Template bei, dass ich benutze: "Pisces".

In der oberen Navigation ist ein sehr tolles on hover eingebaut,
ich habe versucht es um ein weiteres hover zu bearbeiten,
leider ist das so, dass wenn ich über mein ersten Menüpunkt hover
sich alles auf klappt anstatt die dritten Menüpunkte display: none bleiben,
sie sollen erst bei hover vom zweiten Menüpunkt hervor treten also display block.

Momentan muss ich nochmal auf den zweiten Menüpunkt hovern
dass die dritten Menüpunkte verschwinden, und danach klappt alles so wie ich will, dass beim erneuten hovern die da sind.

Hier mal ein beispiel wie ich das haben möchte ohne das design usw.. (das ist von ein Navigations generator):

CSS:
PHP Code:
@charset 'UTF-8';
#cssmenu ul,
#cssmenu li,
#cssmenu span,
#cssmenu a {
  border: 0;
  margin: 0;
  padding: 0;
  position: relative;
}
#cssmenu {
  border-radius: 5px;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  background: #f2edea url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAA0CAIAAADEwMXAAAAAA3NCSVQICAjb4U/gAAAAMklEQVQImWP49PYV0////6GYAcFm+I9d/P9/JgZkcRR12NVDzMMihlMtRJyBkHpMNwIA6ZmLp7k56KwAAAAASUVORK5CYII=) 100% 100%;
  box-shadow: 0 0 2px 1px rgba(0, 0, 0, 0.15);
  -moz-box-shadow: 0 0 2px 1px rgba(0, 0, 0, 0.15);
  -webkit-box-shadow: 0 0 2px 1px rgba(0, 0, 0, 0.15);
  background: -moz-linear-gradient(top, #f2edea 0%, #c0bebf 100%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #f2edea), color-stop(100%, #c0bebf));
  background: -webkit-linear-gradient(top, #f2edea 0%, #c0bebf 100%);
  background: -o-linear-gradient(top, #f2edea 0%, #c0bebf 100%);
  background: -ms-linear-gradient(top, #f2edea 0%, #c0bebf 100%);
  background: linear-gradient(to bottom, #f2edea 0%, #c0bebf 100%);
  font-weight: 600;
  height: 52px;
  width: auto;
}
#cssmenu:after,
#cssmenu ul:after {
  content: '';
  display: block;
  clear: both;
}
#cssmenu a {
  box-shadow: inset 0 1px 0 whitesmoke;
  -moz-box-shadow: inset 0 1px 0 whitesmoke;
  -webkit-box-shadow: inset 0 1px 0 whitesmoke;
  background: #f2edea url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAA0CAIAAADEwMXAAAAAA3NCSVQICAjb4U/gAAAAMklEQVQImWP49PYV0////6GYAcFm+I9d/P9/JgZkcRR12NVDzMMihlMtRJyBkHpMNwIA6ZmLp7k56KwAAAAASUVORK5CYII=) 100% 100%;
  background: -moz-linear-gradient(top, #f2edea 0%, #c0bebf 100%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #f2edea), color-stop(100%, #c0bebf));
  background: -webkit-linear-gradient(top, #f2edea 0%, #c0bebf 100%);
  background: -o-linear-gradient(top, #f2edea 0%, #c0bebf 100%);
  background: -ms-linear-gradient(top, #f2edea 0%, #c0bebf 100%);
  background: linear-gradient(to bottom, #f2edea 0%, #c0bebf 100%);
  color: #666666;
  display: inline-block;
  font-family: Arial, Verdana, sans-serif;
  font-size: 12px;
  line-height: 52px;
  padding: 0 28px;
  text-decoration: none;
}
#cssmenu ul {
  list-style: none;
  box-shadow: inset 0 1px 0 whitesmoke;
  -moz-box-shadow: inset 0 1px 0 whitesmoke;
  -webkit-box-shadow: inset 0 1px 0 whitesmoke;
}
#cssmenu > ul {
  float: left;
}
#cssmenu > ul > li {
  float: left;
}
#cssmenu > ul > li:first-child a {
  border-radius: 5px 0 0 5px;
  -moz-border-radius: 5px 0 0 5px;
  -webkit-border-radius: 5px 0 0 5px;
}
#cssmenu > ul > li.active a,
#cssmenu > ul > li:hover > a {
  box-shadow: inset 0 -2px 3px rgba(0, 0, 0, 0.15);
  -moz-box-shadow: inset 0 -2px 3px rgba(0, 0, 0, 0.15);
  -webkit-box-shadow: inset 0 -2px 3px rgba(0, 0, 0, 0.15);
  color: white;
  background: #4a5662 url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAA0CAIAAADEwMXAAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyBpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMC1jMDYwIDYxLjEzNDc3NywgMjAxMC8wMi8xMi0xNzozMjowMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNSBXaW5kb3dzIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOkNDNkM2QzM1NDk0QjExRTI5NjFDQzlFM0NGQzY5RDNBIiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOkNDNkM2QzM2NDk0QjExRTI5NjFDQzlFM0NGQzY5RDNBIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6Q0M2QzZDMzM0OTRCMTFFMjk2MUNDOUUzQ0ZDNjlEM0EiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6Q0M2QzZDMzQ0OTRCMTFFMjk2MUNDOUUzQ0ZDNjlEM0EiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz6bEPV5AAAAUUlEQVR42mSO0RWAMAgDc4znAA7g/jvUFKj66gevCT0COs4rJLkIoSC1X+j+7GFfupj+a4bFu+isydcMr88dY/PkLL8bPnrLXTvHk2NdzC3AAIj5BKfn0x2aAAAAAElFTkSuQmCC);
  background: -moz-linear-gradient(top, #4a5662 0%, #606f7f 100%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #4a5662), color-stop(100%, #606f7f));
  background: -webkit-linear-gradient(top, #4a5662 0%, #606f7f 100%);
  background: -o-linear-gradient(top, #4a5662 0%, #606f7f 100%);
  background: -ms-linear-gradient(top, #4a5662 0%, #606f7f 100%);
  background: linear-gradient(to bottom, #4a5662 0%, #606f7f 100%);
}
#cssmenu .has-sub {
  z-index: 1;
}
#cssmenu .has-sub:hover > ul {
  display: block;
}
#cssmenu .has-sub ul {
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
  -moz-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
  -webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
  display: none;
  position: absolute;
  width: 200px;
  top: 100%;
  left: 0;
}
#cssmenu .has-sub ul li a {
  background: #606f7f;
  border-bottom: 1px solid #59636f;
  border-bottom: 1px solid #556371;
  box-shadow: inset 0 1px 0 #606f7f;
  -moz-box-shadow: inset 0 1px 0 #606f7f;
  -webkit-box-shadow: inset 0 1px 0 #606f7f;
  color: white;
  display: block;
  line-height: 160%;
  padding: 15px 10px;
  font-size: 12px;
}
#cssmenu .has-sub ul li:hover a {
  background: #4a5662;
  box-shadow: inset 0 0 3px 1px rgba(0, 0, 0, 0.15);
  -moz-box-shadow: inset 0 0 3px 1px rgba(0, 0, 0, 0.15);
  -webkit-box-shadow: inset 0 0 3px 1px rgba(0, 0, 0, 0.15);
}
#cssmenu .has-sub .has-sub:hover > ul {
  display: block;
}
#cssmenu .has-sub .has-sub ul {
  display: none;
  position: absolute;
  left: 100%;
  top: 0;
}
#cssmenu .has-sub .has-sub ul li a {
  background: #606f7f;
  box-shadow: none;
  -moz-box-shadow: none;
  -webkit-box-shadow: none;
}
#cssmenu .has-sub .has-sub ul li a:hover {
  background: #4a5662;
  box-shadow: inset 0 0 3px 1px rgba(0, 0, 0, 0.15);
  -moz-box-shadow: inset 0 0 3px 1px rgba(0, 0, 0, 0.15);
  -webkit-box-shadow: inset 0 0 3px 1px rgba(0, 0, 0, 0.15);
} 
HTML:
HTML Code:
<div id='cssmenu'>
<ul>
   <li><a href='/index.html'><span>Startseite</span></a></li>
   <li class='has-sub'><a href='#'><span>Expand me :)</span></a>
      <ul>
         <li class='has-sub'><a href='#'><span>More Submenus 1</span></a>
            <ul>
               <li><a href='#'><span>Sub Item 1.1</span></a></li>
               <li class='last'><a href='#'><span>Sub Item 1.2</span></a></li>
            </ul>
         </li>
         <li class='has-sub'><a href='#'><span>More Submenus 2</span></a>
            <ul>
               <li><a href='#'><span>Sub Item 2.1</span></a></li>
               <li class='last'><a href='#'><span>Sub Item 2.2</span></a></li>
            </ul>
         </li>
      </ul>
   </li>
   <li class='last'><a href='#'><span>Normal</span></a></li>
</ul>
</div>
-------------------------------------------
Naja und meins sieht halt so aus da soll auch wirklich die farben usw so bleiben wie sie sind da es sonst nicht zu meine Website passt.
CSS:
PHP Code:
#toolbar {
    position: relative;
    z-index: 111;
    height: 66px;
    padding: 0 15px 0 5px;
}

#topmenu {
    line-height: 27px;
    margin-top: 19px;
    text-shadow: 0 1px 0 #73a519;
}

#topmenu li, #topmenu a, #topmenu a b {
    height: 28px;
    float: left;
}

#topmenu a {
    text-decoration: none;
    margin-right: 1px;
    color: #fff;
    background: url("../images/topmenu.png") no-repeat 0 -999px;
}

#topmenu a b {
    cursor: pointer;
    padding: 0 10px;
    background: url("../images/topmenu.png") no-repeat 0 -999px;
}

#topmenu a:hover {
    text-shadow: 0 1px 0 #55820d;
    background-color: #649711;
    background-position: 0 0;
}

#topmenu a:hover b {
    background-position: 100% -28px;
}

#topmenu .sublnk a {
    background-position: 0 -112px;
}

#topmenu .sublnk a b {
    padding-right: 25px;
    background-position: 100% -140px;
}

#topmenu .sublnk a:hover, #topmenu .sublnk.selected a {
    padding-bottom: 2px;
    background-color: #649711;
    background-position: 0 -56px;
}

#topmenu .sublnk a:hover b, #topmenu .sublnk.selected a b {
    padding-right: 25px;
    background-position: 100% -84px;
}

/*---SubMenu---*/
#topmenu .sublnk {
    position: relative;
}

#topmenu li.sublnk ul {
    background-color: #649711;
    width: 220px;
    margin: 0;
    top: 30px;
    left: 0;
    position: absolute;
    z-index: 1999;
    display: none;
    opacity:0.9;
    -moz-opacity:0.9;
    filter:alpha(opacity=90);
}


#topmenu li.sublnk ul li a, #topmenu li.sublnk ul li, #topmenu li.sublnk ul li a b {
    background: none;
    float: none;
    height: auto;
    display: block;
    line-height: normal;
    text-transform: none;
}

#topmenu li.sublnk ul li {
    padding: 0;
}

#topmenu li.sublnk ul li a {
    text-shadow: none;
    color: #fff;
    padding: 6px 0 !important;
    width: 100%;
    border-bottom: 1px solid #71aa15;
}

#topmenu li.sublnk ul li a:hover {
    background-color: #6fa614;
}

.reset, .reset li {
    list-style: none;
    padding: 0;
    margin: 0;
}

.lcol {
    float: left;
}

.lcol, .rcol, form {
    display: inline;
} 
JS:
PHP Code:
$(document).ready(function(){
        $('#topmenu li.sublnk').hover(
        function() {
            $(this).addClass("selected");
            $(this).find('ul').stop(true, true);
            $(this).find('ul').show('fast');
        },
        function() {
            $(this).find('ul').hide('fast');
            $(this).removeClass("selected");
        }
    );
}); 
HTML:
HTML Code:
<ul id="topmenu" class="lcol reset">
    <li><a href="/index.php"><b>Startseite</b></a></li>
    <li class="sublnk"><a href="#"><b>Expand me :)</b></a>
        <ul>
            <li class="sublnk"><a href="#"><b>Expand 1</b></a>
                <ul>
                    <li><a href="#"><b>Sub 1.1</b></a></li>
                    <li><a href="#"><b>Sub 1.2</b></a></li>
                </ul>
            </li>
        </ul>
    </li>
</ul>
Wie gesagt, sobald ich über "Expand me " hover ist sofort alles sichtbar, auch "Sub 1.1" was ich nicht möchte..

Danke dass Du mir deine Zeit geschenkt hast,
ich hoffe dass Du mir helfen kannst.

MfG
ˏ˖→»[ற4ЯCø]«←˖ˏ™ is offline  
Old 11/12/2013, 20:35   #2
 
Mikesch01's Avatar
 
elite*gold: 203
The Black Market: 0/0/0
Join Date: Sep 2007
Posts: 732
Received Thanks: 190
Hast du eine Live-Site da? Mit Firebug kann man das Verhalten besser beobachten.
Mikesch01 is offline  
Old 11/12/2013, 21:55   #3
 
elite*gold: 0
The Black Market: 2/0/0
Join Date: Nov 2010
Posts: 255
Received Thanks: 176
Ja aber das zählt doch als werbung wenn ich den link post.
Die Seite hat noch kein/kaum Inhalt also eigentlich noch privat.
Ich schick die dir mal per PM, du wirst sofort sehen was ich mein wenn du über "expand me " hoverst, alle sub-sub items sind ausgeklappt...

Wer mir noch helfen möchte, nur zu
ˏ˖→»[ற4ЯCø]«←˖ˏ™ is offline  
Old 11/12/2013, 22:40   #4
 
Der-Eddy's Avatar
 
elite*gold: 205
The Black Market: 29/0/0
Join Date: Nov 2008
Posts: 67,906
Received Thanks: 19,506
Quote:
Originally Posted by ˏ˖→»[ற4ЯCø]«←˖ˏ™ View Post
Ja aber das zählt doch als werbung wenn ich den link post.
Die Seite hat noch kein/kaum Inhalt also eigentlich noch privat.
Ich schick die dir mal per PM, du wirst sofort sehen was ich mein wenn du über "expand me " hoverst, alle sub-sub items sind ausgeklappt...

Wer mir noch helfen möchte, nur zu
Die Regel greift erst wenn du ganz geziehlt Werbung darauf machst
wenn es als Referenz zu deinem Problem ist sehe "ich" da kein Problem

mal davon abgesehen das ein winzig kleines "Elitepvpers.com" irgendwo in ner Ecke bereits als Backlink ausreicht wenn du wirklich geziehlt Werbung damit in deiner Signatur oder so machen würdest
Der-Eddy is offline  
Old 11/12/2013, 22:47   #5
 
elite*gold: 0
The Black Market: 2/0/0
Join Date: Nov 2010
Posts: 255
Received Thanks: 176
Alles klar,
danke aber ich möchte jetzt gerade auch nicht das ganz ePvP die URL hat :/
Dafür habe ich ja die css/html/js bei gelegt.
ˏ˖→»[ற4ЯCø]«←˖ˏ™ is offline  
Old 11/12/2013, 23:35   #6
 
Mikesch01's Avatar
 
elite*gold: 203
The Black Market: 0/0/0
Join Date: Sep 2007
Posts: 732
Received Thanks: 190
Ich schaus mir morgen dann mal an
Mikesch01 is offline  
Old 11/13/2013, 15:58   #7
 
elite*gold: 0
The Black Market: 2/0/0
Join Date: Nov 2010
Posts: 255
Received Thanks: 176
Okay.

Noch jemand?
ˏ˖→»[ற4ЯCø]«←˖ˏ™ is offline  
Old 11/15/2013, 18:03   #8
 
elite*gold: 0
The Black Market: 2/0/0
Join Date: Nov 2010
Posts: 255
Received Thanks: 176
Vielen dank an , für seine Tipps.

#Closerequest
ˏ˖→»[ற4ЯCø]«←˖ˏ™ is offline  
Reply

« [S] Jemanden der sich mit WebSpell auskennt | [CSS] Problem mit Padding »

Similar Threads Similar Threads
[C++] Menüs erstellen...
02/02/2013 - General Coding - 5 Replies
Ich bin jetzt ein Anfänger in C++ und wollte mal fragen ob mir einige Links oder Source Codes geben können für ein Game hack ich würde gerne Lernen wie man Combat Arms Hacks erstellt aber leider weiß ich das nicht bitte Hilft mir! Danke für alle von euch die so nett sind und mir Helfen und hoffentlich bin ich hier Richtig! MfG Ich ♥
Mausbug in Menüs im Vollbildmodus
07/06/2012 - Minecraft - 1 Replies
Hallo, Ich habe einen seltsamen Bug, der allerdings nur im Vollbildmodus auftritt. Immer wenn ich in ein Menü gehe (Inventar, Workbench, Pause, etc.) ist meine Maus automatisch im unteren linken Bildbereich. Kennt jemand von euch den Bug, bzw. eine Lösung? MfG ExChill
[CSS / HTML] .menu unendlichlang, ohne scroll
04/22/2012 - Technical Support - 1 Replies
Hey Leute, Ich bräuchte eure hilfe. Unzwar ich arbeite gerade mit DreamWeaver 5.5. Ich muss die linke Navileiste/menu undendlich nach unten also es soll sich immer der bildschirm größe anpassen. WICHTIG! DIE SEITE SOLL NICHT SCROLLBAR SEIN HEIßT, WENN MAN MIT VERSCHIDENEN AUFLÖSUNGEN AUF DIE SEITE GEHT SOLL SIE NICHT SCROLLBAR SEIN. @charset "utf-8"; /* CSS Document */
[CSS / HTML] .menu unendlichlang, ohne scroll
04/20/2012 - Web Development - 0 Replies
Hey Leute, Ich bräuchte eure hilfe. Unzwar ich arbeite gerade mit DreamWeaver 5.5. Ich muss die linke Navileiste/menu undendlich nach unten also es soll sich immer der bildschirm größe anpassen. WICHTIG! DIE SEITE SOLL NICHT SCROLLBAR SEIN HEIßT, WENN MAN MIT VERSCHIDENEN AUFLÖSUNGEN AUF DIE SEITE GEHT SOLL SIE NICHT SCROLLBAR SEIN. @charset "utf-8"; /* CSS Document */
Html Tab menu
07/12/2011 - Web Development - 1 Replies
Ich brauche ein Html Tab menu für eine Website. In den Tab menu sollen 7 tabs sein Home | Videos | Musik | Bilder | Downloads | Top Games | Gästebuch könnte sowas einer für mich erstellen? Ich habe schon in google gesucht aber nicht so richtig gefunden was ich suchte..



All times are GMT +2. The time now is 17:06.

elitepvpers - play less, get more - Top

Powered by vBulletin®
Copyright ©2000 - 2026, Jelsoft Enterprises Ltd.
SEO by vBSEO ©2011, Crawlability, Inc.

Support | Contact Us | FAQ | Advertising | Privacy Policy | Terms of Service | Abuse
Copyright ©2026 elitepvpers All Rights Reserved.