In this blog, I will demonstrate how to create Menu and Items in Expand and Collapse style using jQuery, CSS and HTML.
Create menu and list of items for each menu
Here is the basic HTML part.
- <body>
- <div class="container">
- <ul>
- <li class="dropdown cssState">
- Tamilnadu
- <ul>
- <li>Chennai</li>
- <li>Madurai</li>
- <li>Trichy</li>
- <li>Coimbatore </li>
- </ul>
- </li>
-
- <li class="dropdown cssState">
- Andhra
- <ul>
- <li>Chennai</li>
- <li>Madurai</li>
- <li>Trichy</li>
- <li>Coimbatore </li>
- </ul>
- </li>
- <li class="dropdown cssState">
- Kerala
- <ul>
- <li>Chennai</li>
- <li>Madurai</li>
- <li>Trichy</li>
- <li>Coimbatore </li>
- </ul>
- </li>
-
- <li class="dropdown cssState">
- Tamilnadu
- <ul>
- <li>Chennai</li>
- <li>Madurai</li>
- <li>Trichy</li>
- <li>Coimbatore </li>
- </ul>
- </li>
-
- <li class="dropdown cssState">
- Andhra
- <ul>
- <li>Chennai</li>
- <li>Madurai</li>
- <li>Trichy</li>
- <li>Coimbatore </li>
- </ul>
- </li>
- <li class="dropdown cssState">
- Kerala
- <ul>
- <li>Chennai</li>
- <li>Madurai</li>
- <li>Trichy</li>
- <li>Coimbatore </li>
- </ul>
- </li>
- </ul>
- </div>
- </body>
CSS style; which we need to use is for getting the menu and list output.
- <style>
- li.dropdown ul {
- display : none;
- }
-
- .container {
- width:70%;
- float: left;
- }
-
-
- .container .cssState {
- float: left;
- display:block;
- border-top-style: solid;
- border-top-width:1px;
- border-top-color:black;
- border-bottom-width:1px;
- border-bottom-color:grey;
- border-bottom-style:solid;
- width: 200px;
- border-right-style:solid;
- border-right-color:white;
- border-right-width:10px;
- padding: 2px;
- cursor: pointer;
- font-weight: bold;
- }
-
- </style>
-
- Here is the jQuery which does the gimmicks of toggling items.
-
-
-
-
- <script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
-
- <script type="text/javascript">
- $(document).ready(function(){
- $('li.dropdown').click(function () {
- $('li.dropdown').not(this).find('ul').hide();
- $(this).find('ul').toggle();
- });
- });
- </script>
The output looks, as shown below.![]()
Figure 1
Hope, it will be useful for those, who are looking to create menu, sub menu and items list view, using simple CSS, HTML and jQuery.