Drop down menu on hover of klikken?

Overzicht Reageren

Sponsored by: Vacatures door Monsterboard

Danny T

Danny T

23/12/2013 15:10:14
Quote Anchor link
Hallo,

Weet iemand hoe ik een drop down menu kan maken met een gratis template van chocolatemonster die ik heb gevonden?


De css code

Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
5
6
7
8
#navigation { height: 52px; padding-top: 4px; font-family: 'Ubuntu', sans-serif; font-weight: 700; background: url(images/navigation.png) repeat-x 0 0; box-shadow: 0px -1px 2px rgba(0,0,0,0.1); -moz-box-shadow: 0px -1px 2px rgba(0,0,0,0.1); -webkit-box-shadow: 0px -1px 2px rgba(0,0,0,0.1); -o-box-shadow: 0px -1px 2px rgba(0,0,0,0.1);  }
#navigation ul { list-style: none; list-style-position: outside; }
#navigation ul li { float: left; padding-right: 2px; line-height: 52px; background: url(images/nav-border.png) no-repeat right 0;  font-size: 13px; text-transform: uppercase; }
#navigation ul li a { display: block; padding: 0 32px 0 28px; color: #878787;  }
#navigation ul li a:hover,
#navigation ul li.active a  { text-decoration: none; color: #2b9208; }
#navigation ul li.first a { padding-left: 38px; }
#navigation a.nav-btn { display: none; }


Het menu

Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<nav id="navigation">
                    <a href="#" class="nav-btn">HOME<span class="arr"></span></a>
                    <ul>
                        <li class="active"><a href="#">HOME</a></li>
                        <li><a href="#">Service</a></li>
                        <ul>
                        <li><a href="#">Binnen </a></li>
                        <li><a href="#">Buiten</a></li>
                        </ul>
                        <li><a href="#">contact</a></li>
                        <li><a href="#">locatie</a></li>
                        <li><a href="#">about</a></li>
                        <li><a href="#">Test</a></li>
                    
                    </ul>
                </nav>


Wat ik wil krijgen is dat wanneer ik de menu aanklik of eroverheen "hover" dat er dan een submenu onder verschijnt. Ik hoop dat dit duidelijk is!
Gewijzigd op 23/12/2013 16:16:30 door Danny T
 
PHP hulp

PHP hulp

28/11/2021 00:40:00
 
- Ariën -
Beheerder

- Ariën -

23/12/2013 15:37:05
 
Albert de Wit

Albert de Wit

23/12/2013 16:08:58
Quote Anchor link
Ik wil je best helpen met een css dropdown menu maar gooi dan niet je hele code hier neer, dat komt een beetje over als 'Hier is mijn code, ik kom over 5 minuten terug voor het antwoord, succes!'. Post even de relevante code, welke code je gebruikt voor je menu/navigatie.
 
Danny T

Danny T

23/12/2013 16:14:19
Quote Anchor link


Ik heb deze geprobeerd te volgen maar wat ik kreeg waren 3 lijnen en de menu op de tweede en derde lijn kon ik niet meer aanklikken toen ik meerdere links wou toevoegen. Alsnog bedankt.

Albert de Wit op 23/12/2013 16:08:58:
Ik wil je best helpen met een css dropdown menu maar gooi dan niet je hele code hier neer, dat komt een beetje over als 'Hier is mijn code, ik kom over 5 minuten terug voor het antwoord, succes!'. Post even de relevante code, welke code je gebruikt voor je menu/navigatie.


Sorry ik heb het verbeterd. Bedankt voor de hulp.
 
- Ariën -
Beheerder

- Ariën -

23/12/2013 16:25:23
Quote Anchor link
Danny T op 23/12/2013 16:14:19:

Ik heb deze geprobeerd te volgen maar wat ik kreeg waren 3 lijnen en de menu op de tweede en derde lijn kon ik niet meer aanklikken toen ik meerdere links wou toevoegen. Alsnog bedankt.

Laat die code eens zien, dan weten we wat er fout aan is. Een praktisch voorbeeld kan ook interessant zijn.
Gewijzigd op 23/12/2013 16:25:40 door - Ariën -
 
Danny T

Danny T

23/12/2013 16:33:20
Quote Anchor link
- Aar - op 23/12/2013 16:25:23:
Danny T op 23/12/2013 16:14:19:

Ik heb deze geprobeerd te volgen maar wat ik kreeg waren 3 lijnen en de menu op de tweede en derde lijn kon ik niet meer aanklikken toen ik meerdere links wou toevoegen. Alsnog bedankt.

Laat die code eens zien, dan weten we wat er fout aan is. Een praktisch voorbeeld kan ook interessant zijn.


De code deed het niet en gooide ik dus weg, maar ik heb het wel kunnen reproduceren.
Binnen en buiten horen submenus te zijn maar zijn nu verdwenen. Ik heb het weer geupload naar de site.

Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<nav id="navigation">
                    <a href="#" class="nav-btn">HOME<span class="arr"></span></a>
                    <ul>
                        <li class="active"><a href="#">HOME</a></li>
                        <li><a href="#">Service</a></li>
                        <ul>
                        <li><a href="#">Buiten </a></li>
                        <li><a href="#">Buiten</a></li>
                        </ul>
                        <li><a href="#">contact</a></li>
                        <ul>
                        <li><a href="#">binnen</a></li>
                        <li><a href="#">binnen</a></li>
                        <li><a href="#">binnen</a></li>
                        </ul>
                        <li><a href="#">locatie</a></li>
                        <li><a href="#">about</a></li>
                        <li><a href="#">Test</a></li>
                        <li><a href="#">Test</a></li>
                        <li><a href="#">Test</a></li>
                        <li><a href="#">Test</a></li>
                        <li><a href="#">Test</a></li>
                    
                    </ul>
                </nav>


ik heb deze code van de website toegevoegd.

Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
5
6
7
8
9
10
#navigation ul ul {
    display: none;
}

#navigation ul li:hover > ul {
        display: block;
    }
#navigation ul:after {
        content: ""; clear: both; display: block;
    }
Gewijzigd op 23/12/2013 16:36:21 door Danny T
 
- Ariën -
Beheerder

- Ariën -

23/12/2013 16:41:07
Quote Anchor link
Waar kunnen we het zien?
 
Danny T

Danny T

23/12/2013 16:47:11
Quote Anchor link
Website

Hierboven! Vergeten toe te voegen haha!
Gewijzigd op 23/12/2013 16:47:37 door Danny T
 
Kris Peeters

Kris Peeters

23/12/2013 16:52:43
Quote Anchor link
Mag ik even opmerken:
Je hebt vanaf lijn 6 een <ul> in een <ul>. Dat mag niet.
De children van een <ul> moeten <li>'s zijn. Niets anders.

Zeker wanneer je met javascript werkt, moet je zien dat de DOM correct is.
Gewijzigd op 23/12/2013 16:57:46 door Kris Peeters
 
Danny T

Danny T

23/12/2013 16:55:39
Quote Anchor link
Kris Peeters op 23/12/2013 16:52:43:
Mag ik even opmerken:
Je hebt vanaf lijn 6 een <ul> in een <ul>. Dat mag niet.
De children van een <ul> moeten <li>'s zijn. Niets anders.

Zeker wanneer je met javascript werkt, moet je zien dat de DOM correct is.


Waarom is dat zo?? Ik heb alleen gekeken bij de voorbeeld site die ik kreeg waarin ze dat wel hadden.

2e stuk

hierin gebruiken ze ook een ul in een ul. O.o
 
Kris Peeters

Kris Peeters

23/12/2013 16:57:20
Quote Anchor link
Nee, daar zetten ze een ul in een li
Niet een ul in een ul

Wat wel mag, is iets zoals dit

Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
5
6
7
8
9
10
<ul>
  <li>
  </li>
  <li>
    <ul>
      <li>
      </li>
    </ul>
  </li>
</ul>
Gewijzigd op 23/12/2013 16:59:21 door Kris Peeters
 
Danny T

Danny T

23/12/2013 17:11:55
Quote Anchor link
Kris Peeters op 23/12/2013 16:57:20:
Nee, daar zetten ze een ul in een li
Niet een ul in een ul

Wat wel mag, is iets zoals dit

Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
5
6
7
8
9
10
<ul>
  <li>
  </li>
  <li>
    <ul>
      <li>
      </li>
    </ul>
  </li>
</ul>


Aha ik begrijp het!
Maar nu springt alles heen en weer, hoe kan ik dat stoppen?

Toevoeging op 23/12/2013 18:13:33:

Ik heb verder gewerkt en kheb nu denk ik nog maar 1 probleem en dat is dat de submenus niet tevoorschijn komen!! voor de rest is het goed denk ik. Wat moet ik nu doen?
 



Overzicht Reageren

 
 

Om de gebruiksvriendelijkheid van onze website en diensten te optimaliseren maken wij gebruik van cookies. Deze cookies gebruiken wij voor functionaliteiten, analytische gegevens en marketing doeleinden. U vindt meer informatie in onze privacy statement.