Javascript menu

Question

Martin C++ 0 Light Poster

12 Years Ago

Hello,

How can I make a menu for the following code

<div id="sidebar">

<ul>
	<li><a href="#">Master link</a>
		<ul>
			<li><a href="#">Link to be revealed</a></li>
		</ul>
	</li>
	
	<li><a href="">Master Link 2</a>
		<ul>
			<li><a href="#">Sublink</a></li>
		</ul>
	
</ul>

</div>

Wit this CSS, I m hiding the second level of the menu, that is ul > ul

#sidebar ul li {list-style:none;}
#sidebar ul li ul {position:relative;left:20px;display:none;}

When I click on "master link" then I want all the subitems to be revealed and when clicked again then hide. I m really noob at javascript, so I dont even know what to look from google.

Thanks in advance

javascript

Edited 12 Years Ago by Martin C++ because: n/a

2 Contributors
1 Reply
186 Views
17 Hours Discussion Span
Latest Post 12 Years Ago Latest Post by ckchaudhary

Reply to this topic

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.

ckchaudhary 5 Newbie Poster · Answer 1 · 2012-02-02T12:31:32+00:00

put these inside your <head> tag

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
    <script type="text/javascript">

        $(document).ready(function () {
            $("div#sidebar > ul > li > a").click(function () {
                $(this).parent().find(" > ul").slideToggle(500);
            });
        )};
</script>