accordion menu

  • Onderwerp starter Onderwerp starter pasvg
  • Startdatum Startdatum
Status
Niet open voor verdere reacties.
P

pasvg

Gebruiker
Lid geworden
28 jan 2013
Berichten
23
Weet iemand hoe je de css moet aanpassen om van deze horizontale menubalk een verticale accordion menu kan maken?

Alvast bedankt!

Code HTML die ik momenteel heb:
HTML: 
<div id="menuhor"><nav>
  <ul>
    <li><a href="index.html">Home</a></li>
    <li><a href="Hotels.html">Hotels</a></li>
    <li ><a href="vliegtickets.html">Vliegtickets</a></li>
    <li ><a href="#">Accommodatie</a>
	  <ul >
   		  <li><a href="vakantiehuizen.html">Vakantiehuizen</a></li>
    		<li><a href="vakantieparken.html">Vakantieparken</a></li>
      		<li><a href="Hotels.html">Hotels</a></li>
      		<li><a href="campings.html">Campings</a></li>
     		<li><a href="appartementen.html">Appartementen</a></li>
      		<li><a href="bed-breakfast.html">Bed &amp; breakfast</a></li>
      		<li><a href="groepsverblijven.html">Groepsverblijven</a></li>
   	 </ul>
    </li>
    <li ><a href="#" >Reisformules</a>
	  <ul >
      		<li ><a href="#">Soort vakanties</a>
				<ul >
   				<li><a href="zonvakanties.html">Zonvakanties</a></li>
        			<li><a href="autovakanties.html">Autovakanties</a></li>
        			<li><a href="wintersport.html">Wintersportvakanties</a></li>
        			<li><a href="vliegvakanties.html">Vliegvakanties</a></li>
        			</ul>
		</li>
		<li ><a href="#">Populaire thema's </a>
				<ul>
       				<li><a href="singlereizen.html">Single reizen</a></li>
        			<li><a href="familievakanties.html">Familievakanties</a></li>
       	 			<li><a href="rondreizen.html">Rondreizen</a></li>
        			</ul>
        	</li>
      		<li ><a href="#">Actieve vakanties</a>
      				<ul>
        			<li><a href="familievakanties.html">Fietsvakanties</a></li>
        			<li><a href="wandelvakanties.html">Wandelvakanties</a></li>
        			<li><a href="duikvakanties.html">Duikvakanties</a></li>
        			</ul>
        	</li  >
      		<li><a href="#">Speciale vakanties</a>
      				<ul>
        			<li><a href="individuelereizen.html">Individuele vakanties</a></li>
        			<li><a href="vakantie-met-huisdieren.html">Huisdieren toegelaten</a></li>
        			<li><a href="familievakanties.html">Familie vakanties</a></li>
        			</ul>
   		 </li>
	  </ul>
    </li>
    <li><a href="reismateriaal.html">Reismateriaal</a></li>
    <li><a href="aanbiedingen.html">Aanbiedingen</a></li>
    <li><a href="reisinformatie.html">Reisinformatie &amp; tips</a></li>
  </ul>
</nav></div>
Opmaak CSS die ik momenteel heb:
Code: 
nav ul ul {
	display: none;
}
	nav ul li:hover> ul{
	display: block;
	}
nav ul {
	background: #7cb3f6;
	/* IE10 Consumer Preview */ 
	background-image: -ms-linear-gradient(top, #7CB3F6 0%, #6CC3F6 100%);
	/* Mozilla Firefox */ 
	background-image: -moz-linear-gradient(top, #7CB3F6 0%, #6CC3F6 100%);
	/* Opera */ 
	background-image: -o-linear-gradient(top, #7CB3F6 0%, #6CC3F6 100%);
	/* Webkit (Safari/Chrome 10) */ 
	background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #7CB3F6), color-stop(1, #6CC3F6));
	/* Webkit (Chrome 11+) */ 
	background-image: -webkit-linear-gradient(top, #7CB3F6 0%, #6CC3F6 100%);
	/* W3C Markup, IE10 Release Preview */ 
	background-image: linear-gradient(to bottom, #7CB3F6 0%, #6CC3F6 100%);
	border-radius: 10px;
	display: inline-table;
	list-style-type: none;
	position: relative;
	padding-right: 200px;
	color: #FFFFFF;
}
#menuhor a {
	color: #FFFFFF;
}

	nav ul:after {
	content: "";
	clear: both;
	display: block;
	width: 180px;
	color: #FFFFFF;
}

nav ul li {
	float: left;
	text-align: center;
	color: #FFFFFF;
	
}

nav ul li:hover {
	background: #9fb72f;
	/* IE10 Consumer Preview */ 
	background-image: -ms-linear-gradient(top, #9FB72F 0%, #CDD923 100%);
	/* Mozilla Firefox */ 
	background-image: -moz-linear-gradient(top, #9FB72F 0%, #CDD923 100%);
	/* Opera */ 
	background-image: -o-linear-gradient(top, #9FB72F 0%, #CDD923 100%);
	/* Webkit (Safari/Chrome 10) */ 
	background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #9FB72F), color-stop(1, #CDD923));
	/* Webkit (Chrome 11+) */ 
	background-image: -webkit-linear-gradient(top, #9FB72F 0%, #CDD923 100%);
	/* W3C Markup, IE10 Release Preview */ 
	background-image: linear-gradient(to bottom, #9FB72F 0%, #CDD923 100%);
	border-radius: 10px;
}
nav ul li:hover a {
	color: #fff;
}
	
nav ul li a {
	display: block;
	color: #FFFFFF;
	text-decoration: none;
	padding-top: 15px;
	padding-right: 15px;
	padding-bottom: 15px;
	padding-left: 15px;

}
nav ul ul {
		background: #2d71b2;
		/* IE10 Consumer Preview */ 
background-image: -ms-linear-gradient(top, #2D71B2 0%, #388DDE 100%);

/* Mozilla Firefox */ 
background-image: -moz-linear-gradient(top, #2D71B2 0%, #388DDE 100%);

/* Opera */ 
background-image: -o-linear-gradient(top, #2D71B2 0%, #388DDE 100%);

/* Webkit (Safari/Chrome 10) */ 
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #2D71B2), color-stop(1, #388DDE));

/* Webkit (Chrome 11+) */ 
background-image: -webkit-linear-gradient(top, #2D71B2 0%, #388DDE 100%);

/* W3C Markup, IE10 Release Preview */ 
background-image: linear-gradient(to bottom, #2D71B2 0%, #388DDE 100%);
	
	border-radius: 0px; padding: 0;
	position: absolute; top: 100%;
	
}
nav ul ul:last-child {
	border-radius: 0px 0px 10px 10px;
	border-bottom-style: none;
	}
	
nav ul ul:first-child {
	border-radius: 10px 10px 0px 0px;
	}
nav ul ul li {
	float: none;
	position: relative;
	border-bottom-width: 2px;
	border-bottom-style: inset;
	border-bottom-color: #7CB3F6;
	color: #FFFFFF;
}
nav ul ul li:last-child {
	border-bottom-style: none;	
}
nav ul ul li a {
	color: #9fb72f;
	padding-top: 5px;
	padding-right: 10px;
	padding-bottom: 5px;
	padding-left: 10px;	
}	
nav ul ul li a:hover {
	background: #9fb72f;
	/* IE10 Consumer Preview */ 
	background-image: -ms-linear-gradient(top, #9FB72F 0%, #CDD923 100%);
	/* Mozilla Firefox */ 
	background-image: -moz-linear-gradient(top, #9FB72F 0%, #CDD923 100%);
	/* Opera */ 
	background-image: -o-linear-gradient(top, #9FB72F 0%, #CDD923 100%);
	/* Webkit (Safari/Chrome 10) */ 
	background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #9FB72F), color-stop(1, #CDD923));
	/* Webkit (Chrome 11+) */ 
	background-image: -webkit-linear-gradient(top, #9FB72F 0%, #CDD923 100%);
	/* W3C Markup, IE10 Release Preview */ 
	background-image: linear-gradient(to bottom, #9FB72F 0%, #CDD923 100%);
	border-radius: 0px 0px 10px 10px;
}

nav ul ul ul {
	position: absolute; left: 100%; top:0;
}

#menuhor {
	background-color: #2D71B2;
	text-align: center;
	height: 65px;
	border-radius: 10px;
}
 
Laatst bewerkt door een moderator:
Ik ben toch nog eens aan het proberen geweest en naar mijn mening is het gelukt. Maar kan iemand eens naar de CCS opmaak kijken als deze wel klopt en niet volstaat met overbodige of dubbele stijlen.
Kleuren pas ik later nog aan, zodat duidelijker wordt in welk item men bezig is.
Alvast bedankt.

Pasvg

opmaak css voor accordion menu
Code: 
nav ul li a {
	border-bottom: 1px solid #efeff0;
	display: block;
	position: relative;

}
nav ul, ul ul {
	margin: 0;
	padding: 0;
	background: #7cb3f6;
	/* IE10 Consumer Preview */ 
	background-image: -ms-linear-gradient(top, #7CB3F6 0%, #6CC3F6 100%);
	/* Mozilla Firefox */ 
	background-image: -moz-linear-gradient(top, #7CB3F6 0%, #6CC3F6 100%);
	/* Opera */ 
	background-image: -o-linear-gradient(top, #7CB3F6 0%, #6CC3F6 100%);
	/* Webkit (Safari/Chrome 10) */ 
	background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #7CB3F6), color-stop(1, #6CC3F6));
	/* Webkit (Chrome 11+) */ 
	background-image: -webkit-linear-gradient(top, #7CB3F6 0%, #6CC3F6 100%);
	/* W3C Markup, IE10 Release Preview */ 
	background-image: linear-gradient(to bottom, #7CB3F6 0%, #6CC3F6 100%);
	list-style-type: none;
	position: relative;
	color: #FFFFFF;
	width: 100%;

}
nav ul ul {
	display: none;
}
nav ul li:hover> ul{
	display: block;
}

#menuhor a {
	color: #FFFFFF;
}

nav ul:after {
	content: "";
	clear: both;
	display: block;
	width: 180px;
	color: #FFFFFF;
}

nav ul li {
	
	text-align: center;
	color: #FFFFFF;
	
}

nav ul li:hover {
	background: #9fb72f;
	/* IE10 Consumer Preview */ 
	background-image: -ms-linear-gradient(top, #9FB72F 0%, #CDD923 100%);
	/* Mozilla Firefox */ 
	background-image: -moz-linear-gradient(top, #9FB72F 0%, #CDD923 100%);
	/* Opera */ 
	background-image: -o-linear-gradient(top, #9FB72F 0%, #CDD923 100%);
	/* Webkit (Safari/Chrome 10) */ 
	background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #9FB72F), color-stop(1, #CDD923));
	/* Webkit (Chrome 11+) */ 
	background-image: -webkit-linear-gradient(top, #9FB72F 0%, #CDD923 100%);
	/* W3C Markup, IE10 Release Preview */ 
	background-image: linear-gradient(to bottom, #9FB72F 0%, #CDD923 100%);
	
}
nav ul li:hover a {
	color: #fff;
}
	
nav ul li a {
	display: block;
	color: #FFFFFF;
	text-decoration: none;
	padding-top: 5px;
	padding-right: 5px;
	padding-bottom: 5px;
	padding-left: 5px;

}
nav ul ul {
		background: #2d71b2;
		/* IE10 Consumer Preview */ 
background-image: -ms-linear-gradient(top, #2D71B2 0%, #388DDE 100%);

/* Mozilla Firefox */ 
background-image: -moz-linear-gradient(top, #2D71B2 0%, #388DDE 100%);

/* Opera */ 
background-image: -o-linear-gradient(top, #2D71B2 0%, #388DDE 100%);

/* Webkit (Safari/Chrome 10) */ 
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #2D71B2), color-stop(1, #388DDE));

/* Webkit (Chrome 11+) */ 
background-image: -webkit-linear-gradient(top, #2D71B2 0%, #388DDE 100%);

/* W3C Markup, IE10 Release Preview */ 
background-image: linear-gradient(to bottom, #2D71B2 0%, #388DDE 100%);
	
	border-radius: 0px; padding: 0;
	
	position: relative; left: 0%; top:0%;
}
nav ul ul:last-child {
	
	border-bottom-style: none;
	}
	
nav ul ul:first-child {

	}
nav ul ul li {
	float: none;
	position: relative;
	border-bottom-width: 2px;
	border-bottom-style: inset;
	border-bottom-color: #7CB3F6;
	color: #FFFFFF;
}
nav ul ul li:last-child {
	border-bottom-style: none;	
}
nav ul ul li a {
	color: #9fb72f;
	padding-top: 5px;
	padding-right: 5px;
	padding-bottom: 5px;
	padding-left: 5px;	
}	
nav ul ul li a:hover {
	background: #9fb72f;
	/* IE10 Consumer Preview */ 
	background-image: -ms-linear-gradient(top, #9FB72F 0%, #CDD923 100%);
	/* Mozilla Firefox */ 
	background-image: -moz-linear-gradient(top, #9FB72F 0%, #CDD923 100%);
	/* Opera */ 
	background-image: -o-linear-gradient(top, #9FB72F 0%, #CDD923 100%);
	/* Webkit (Safari/Chrome 10) */ 
	background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #9FB72F), color-stop(1, #CDD923));
	/* Webkit (Chrome 11+) */ 
	background-image: -webkit-linear-gradient(top, #9FB72F 0%, #CDD923 100%);
	 W3C Markup, IE10 Release Preview  
	background-image: linear-gradient(to bottom, #9FB72F 0%, #CDD923 100%);
	
}

nav ul ul ul {
	position: relative; left: 0%; top:0%;
}
 
Laatst bewerkt door een moderator:
Hoi @pasvg ik heb gekeken maar met jouw vraag kan ik je niet helpen. Wel opmerking, als ik hem in Dreamweaver of Fiddle zet (zie hier) vind ik het wel een onrustig menu. Wel mooi gemaakt hoor. Misschien niet zo maken dat het openklapt als je met de muis erover gaat maar als je erop klikt?
 
Hey damnsharp,
Bedankt voor de reactie.
Je hebt volkomen gelijk. Ik vind het ook nogal zenuwachtig en je hebt een handigheid nodig om op het juiste item te klikken.

Ik zou het ook liever zien dat je er op moet klikken,
alleen weet ik niet hoe ik dit moet klaar spelen.

Heb jij hier misschien een idee over?
 
dropdown menu

ik heb momenteel een dropdown menu (3 levels) in css. De submenu's openen zich nu als men met de muis over het menu item beweegt.
Ik wil dat de submenu's zich pas openen na een klik op het menu item. Hoe doe je dit?
Kan iemand mij hier alstublieft bij helpen. Weet echt niet hoe hier aan te beginnen.
 
Dit ga je niet redden met alleen CSS. Je hebt iets van een stukje javaScript of jQuery nodig.

Voorbeeld:
[js]
jQuery(document).ready(function($) {
$('#menu ul li.first-row').click(function () {
$(this).find('ul').css('display','block');
});
});
[/js]

Met het voorbeeld hierboven moet je wel de ul's uit de tweede rij op display none zetten
 
Laatst bewerkt door een moderator:
Hallo Milenko,

Bedankt voor uw antwoord.
Ik dacht het wel dat het niet te verwezenlijken was met alleen CSS.
Ik ga het zeker uit testen of dit het gewenste resultaat geeft.
Heb wel nog enkele vraagjes,
Hoe plaats je de code in de html pagina of hoe roep je ze op?
En nog een voor mij heel belangrijke vraag, werkt dit ook voor mobiel, i-pad enz.?

Alvast bedankt,
Pascal
 
Hey Pasvg,

Als je me toevoegd op Skype (zie m'n profiel..), zou ik je er een keer mee kunnen helpen.

Anders zou je op http://jquery.com/ alles kunnen vinden. :)

jQuery werkt vaak (bij mij in eigenlijk alle gevallen) ook op mobiel/ipad/android tablet etc etc, maar mochten er bepaalde functies niet helemaal werken, dan bestaat er ook nog jQuery Mobile. Gezien jouw issue, heb je geen jQuery Mobile nodig, maar volstaat alleen jQuery
 
Hey Milenko,

Bedankt voor het aanbod, maar wij gebruiken Skype niet.
Heb de twee volgende manieren geprobeerd maar geen van beide werkt.
HTML: 
<script src=”//ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js”></script>
<script type="text/javascript">
jQuery(document).ready(function($) {
  $('#menu ul li.first-row').click(function () {
    $(this).find('ul').css('display','block');
  });
});
</script>

HTML: 
<script src="http://jqueryjs.googlecode.com/files/jquery-1.2.6.pack.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
jQuery(document).ready(function($) {
  $('#menu ul li.first-row').click(function () {
    $(this).find('ul').css('display','block');
  });
});
</script>

De ul ul staat al op display: none

Had ook even #menu verandert in #menuhor, maar het wil niet lukken. Ligt dit misschien aan de volledige opmaak van de CSS?


Waarvoor staan de .first row en .find want deze staan bij mij nergens in de CSS of heeft dat er niets mee te maken?
 
Laatst bewerkt door een moderator:
Hey pasvg,

De .first-row staat voor de eerste li van je ul. Je moet dus de class "first-row" toevoegen als je het wilt laten werken. Dit heb ik even gedaan, zodat je de menu-items ook per stuk kunt aanroepen. In jouw geval dus <li class="first-row"><a href="#">Accomodatie</a></li> (dat is de eerste li met een ul eronder). Natuurlijk kun je de classes ook aanpassen.
 
Hey Milenko,

Bedankt voor de moeite maar ik krijg het niet voor mekaar. Heb het anders opgelost en gevraagd of enkele mensen het wilden testen in hun mobiel. Naar hun mening is het goed te doen.
Hier kan je hier het resultaat bekijken (door het scherm te verkleinen, zie je de verschillende menu's) : vakantie-kriebel.be.

Toch bedankt!
Pascal
 
Status
Niet open voor verdere reacties.
                    Steun ons                    

Nieuwste berichten

Terug
Bovenaan Onderaan