Hvordan bruke onclick i menu?

[kvarbarg]

Hei, jeg prøver å lage en meny med onclick funksjonen.

Hittil har jeg kun fått til å bruke hover som gjør at submenu kommer opp av seg selv og lager ''kaos'' om man kan kalle det det.

 

Her er css kodene jeg bruker for menuen:

 

/* show submenus on hover */

#menu li:hover > ul {

display: block;

margin-left: -2em;

}

 

Hvis noen kan vise meg hvordan jeg skal bruke onclick så hadde det vært supert

hvis dere vil kan dere gå på http://www.kvarburg.com for å se menyen på høyre side.

 

Vil helst ikke bruke javascript... men en gang må bli den første.

(kvarburg.com er kun en testside så ikke klag hvis den er dårlig )

Endret 4. mars 2011 av kvarbarg

[Thomas.]

Er nok best å bruke javascript her

 

<script type="text/javascript">
function VisMeny(id) {
var i = document.getElementById(id);
if(i.style.display == 'none') {
	i.style.display = 'block';
} else {
	i.style.display = 'none';
}
}
</script>

<a href="javascript:void(0);" onClick="VisMeny('meny');">Onclick meny</a>
<ul id="meny" style="display:none;">
<li><a href="#">Link1</a></li>
<li><a href="#">Link2..</a></li>
</ul>

 

Her har du en enkel fungerende onclick meny.

Med litt styling:

 

<script type="text/javascript">
function VisMeny(id) {
var i = document.getElementById(id);
if(i.style.display == 'none') {
	i.style.display = 'block';
} else {
	i.style.display = 'none';
}
}
</script>

<style type="text/css">
ul#meny li {
list-style:none;
}
ul#meny li a {
display:block;
padding:5px 2px;
border:1px solid #666;
width:100px;
margin-bottom:-1px;
font-family:Tahoma, Geneva, sans-serif;
font-size:12px;
text-decoration:none;
color:#666;
}
ul#meny li a:hover {
color:#000;
background-color:#CCC;
}
</style>

<a href="javascript:void(0);" onClick="VisMeny('meny');">Onclick meny</a>
<ul id="meny" style="display:none;">
<li><a href="#">Link1</a></li>
<li><a href="#">Link2..</a></li>
</ul>

 

[MikkelRev]

Det kan fint løses med ren css uten at jeg er helt kompetent til å forklare akkurat hvordan. Pleier bare å google css dropdown menu e.l.

[SlettetBruker5125]

Er nok best å bruke javascript her

 

 

<script type="text/javascript">
function VisMeny(id) {
var i = document.getElementById(id);
if(i.style.display == 'none') {
	i.style.display = 'block';
} else {
	i.style.display = 'none';
}
}
</script>

<a href="javascript:void(0);" onClick="VisMeny('meny');">Onclick meny</a>
<ul id="meny" style="display:none;">
<li><a href="#">Link1</a></li>
<li><a href="#">Link2..</a></li>
</ul>

 

Her har du en enkel fungerende onclick meny.

Med litt styling:

<script type="text/javascript">
function VisMeny(id) {
var i = document.getElementById(id);
if(i.style.display == 'none') {
	i.style.display = 'block';
} else {
	i.style.display = 'none';
}
}
</script>

<style type="text/css">
ul#meny li {
list-style:none;
}
ul#meny li a {
display:block;
padding:5px 2px;
border:1px solid #666;
width:100px;
margin-bottom:-1px;
font-family:Tahoma, Geneva, sans-serif;
font-size:12px;
text-decoration:none;
color:#666;
}
ul#meny li a:hover {
color:#000;
background-color:#CCC;
}
</style>

<a href="javascript:void(0);" onClick="VisMeny('meny');">Onclick meny</a>
<ul id="meny" style="display:none;">
<li><a href="#">Link1</a></li>
<li><a href="#">Link2..</a></li>
</ul>

 

 

JavaScript er ikke best til noe. Unngå JavaScript så mye du kan.

 

CSS3 er mye mer kompetent til å lage dropdowns, kanskje i sammenheng med JavaScript jQuery, men ikke gammeldags JS.

[agrimsrud]

JavaScript er ikke best til noe. Unngå JavaScript så mye du kan.

 

CSS3 er mye mer kompetent til å lage dropdowns, kanskje i sammenheng med JavaScript jQuery, men ikke gammeldags JS.

En vanlig dropdown ved mouseOver er ikke noe problem i CSS, men utfordringen kommer siden Kvarbarg trenger en onClick-funksjon. Det er til en viss grad mulig å bruke f.eks. :active som pseudoselektor, men dette blir veldig buggy. Derfor er jeg enig at JS er best.

 

Lagt til:

Problemet med Thomas' forslag, er at det bryter totalt når JS ikke er aktivert/tilgjengelig. Her er et forslag som bruker vanlig CSS dropdown ved MouseOver, og legger til en OnClick-funksjon med jQuery om JS er aktivert:

 

 

 

<!DOCTYPE html>
<html lang="no">
<head>
<meta charset="utf-8">

<title>Testmeny 1</title>
<style type="text/css">
#meny,#meny li,#meny li a{
	display:block;
	display:inline;
	width:300px;
}
#meny li{
	float:left;
	width:100px;
}
#meny li a{width:100%;}
#meny .JStest a:hover+ul,
#meny li.JStest:hover ul{
	display:block;
}
#meny li ul{
	display:none;
	margin:0;
	padding:0;
}
</style>

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js">
</script>
<script type="text/javascript">
jQuery(function($){
	$("#meny li").removeClass("JStest");
	$("#meny li a").click(function(){
		$(this).next("ul").css({'display':'block'});
		$(this).parent().hover(function(){
			$(this).find("ul").css({'display':'none'});
		});
	});
});
</script>
</head>

<body>

<ul id="meny">
<li class="JStest"><a href="#">Link 1</a>
	<ul>
		<li><a href="#">Link 1 a</a></li>
		<li><a href="#">Link 1 b</a></li>
		<li><a href="#">Link 1 c</a></li>
	</ul>
</li>
<li class="JStest"><a href="#">Link 2</a>
	<ul>
		<li><a href="#">Link 2 a</a></li>
		<li><a href="#">Link 2 b</a></li>
		<li><a href="#">Link 2 c</a></li>
	</ul>
</li>
<li class="JStest"><a href="#">Link 3</a>
	<ul>
		<li><a href="#">Link 3 a</a></li>
		<li><a href="#">Link 3 b</a></li>
		<li><a href="#">Link 3 c</a></li>
	</ul>
</li>
</ul>

</body>
</html>

 

 

Endret 7. mars 2011 av agrimsrud