Springen naar inhoud


- - - - -

Vertical Nested Jquery Accordeon Menu With Sublinks


  • Log in a.u.b. om te beantwoorden
Er zijn 1 reacties in dit onderwerp

#1 antoon100

antoon100

    Starting Developer

  • Leden
  • 25 berichten
    Laatst bezocht 03 sep 2014 19:29

Geplaatst op 03 september 2014 - 16:51

Ca anyone help me with this ? http://stackoverflow...u-with-sublinks

thanks in advance!!!!

#2 guest_BESLO_*

guest_BESLO_*
  • Gasten
    Laatst bezocht

Geplaatst op 30 september 2014 - 10:01

Probeer het eens met dl/dt/dd elementen.

Onderstaande code werkt bij mij perfect. De informatie in de dt en dt elementen kan je perfect via php bevolken (doe ik zelf op enkele sites).

De truk zit hem in het gebruiken van de nieuwe CSS selectors ::nth-child().

Code:
<script src="jquery-1.11.1.js"></script>
<style>
body{
background-color: #FFFFFF;
}

#container{
width: 95%;
margin-left: auto;
margin-right: auto;
background-color: #090;
border-radius: 40px;
}

#Header {
height: 65px;
font-size: 36px;
font-weight: bold;
padding-top: 15px;
text-align: center;
border-radius: 40px;
background-color: #00CC00;
margin-bottom: 10px;
}

#Content {
min-height:650px;
padding-top:10px;
padding-left:20px;
padding-right:20px;
}
#Footer {
clear:both;
height:65px;
padding-top:15px;
font-weight:bold;
text-align:center;
border-radius:40px;
background-color:#00CC00;
}

		 dt{
		 cursor:pointer;
		 font-weight:bold;
		 font-size:1.5em;
		 line-height:1.6em;
		 background-color:#33CC00;
color:#172984;
padding:5px;
		 border-bottom:1px solid #c5c5c5;
		 border-top:1px solid white;
box-shadow:#999 2px 2px 5px;
width:40%;
margin-left:auto;
margin-right:auto;
		 }
		 dd{
width: 38%;
margin: 0;
margin-left: auto;
margin-right: auto;
padding: 1em 0;
border: 1px solid #AAA;
border-bottom-left-radius: 15px;
border-bottom-right-radius: 15px;
box-shadow: #999 2px 2px 5px;
margin-bottom: 0.2em;
background-color: #339900;
		 }
dd a:link, a:visited {
text-decoration:none;
display:block;
color:#96BF0D;
text-align:center;
}
dd a:hover {
color:#172984;
background-color:#96BF0D;
}
		 dt:first-child{
		 border-top:none;
border-top-left-radius:15px;
border-top-right-radius:15px;
		 }
	 .RoundedBorder{
border-top-left-radius:15px;
border-top-right-radius:15px;
background-color:#172984;
color:#FFF;
	 }
		 dt-nth-last-child(2){
		 border-bottom:none;
		 }
.hide{
display:none;
}

	 </style>
	
	 <script>
		 $(function(){
		 var dd = $('dd');
		 dd.filter(':nth-child(n+4)').addClass('hide');
$('dt:nth-child(3)').addClass('RoundedBorder');

// Gebruik hier "onclick" maar je kan ook overstappen naar een "hover" actie.
$('dt').on('click', function(){
	 $(this)
	 .next()
	 .slideDown(200)
	 .siblings('dd')
	 .slideUp(200);
var idx = $(this).index('dt');
$('dt').removeClass('RoundedBorder');
$('dt').eq(idx+1).addClass('RoundedBorder');
});

		 })();
		
	 </script>

<dl>
   <dt>Belangrijke Sites</dt>
	  <dd>
		 <a href="[url="http://www.google.com"]http://www.google.com"[/url] target="_blank">Google</a>
	  </dd>
   <dt>Locale versies van sites</dt>
	  <dd>
		 <a href="PhpMyAdmin" target="_blank">phpMyAdmin</a>
	  </dd>
   <dt>Web Development etc.</dt>
	  <dd>
		 <a href="[url="http://www.w3schools.com"]http://www.w3schools.com"[/url] target="_blank">W3Schools</a>
		 <a href="[url="http://www.vbib.be"]http://www.vbib.be"[/url] target="_blank">VBIB</a>
	 </dd>
</dl>







0 gebruiker(s) lezen dit onderwerp

0 lid(leden), 0 bezoeker(s), 0 anonieme gebruikers

Inloggen


Untitled 1

Met dank aan J├╝rgen voor de jarenlange inzet van visualbasic.be (anno dec 2000)
Met dank aan Mike en Ronneke voor de jarenlange inzet van vbib.be (anno dec 2010)
Met dank aan PascalBianca voor de jarenlange inzet van vbib.be (anno dec 2016)