Design a Vertical and Horizontal menu using Pure CSS
Menu is a very important component in any website. It is a user interface element within a webpage that contains links to other sections of the website. It can be displayed horizontally or vertically before the main content of the webpage or header.
For Creating Vertical Menu:
- Menus are vertical by default in Pure CSS. It is easy to customize because of minimal default styling and low-specificity selectors.
- All the components of menu should be enclosed within a division with class named “pure-menu”.
- Add class “pure-menu-heading” in the <span> element for the main heading or title.
- Then add all the items after heading inside <ul> element with class “pure-menu-list”. Each item should be enclosed within <li> element with class “pure-menu-item” .
- If you want to link an item with a section of your webpage you can further enclosed it within <a> element with class “pure-menu-link”.
Example:
HTML
<!DOCTYPE html><html><head><!--Import Pure Css files--><linkrel="stylesheet"href=integrity="sha384-nn4HPE8lTHyVtfCBi5yW9d20FjT8BJwUXyWZT9InLYax14RDjBj46LmSztkmNP9w"crossorigin="anonymous"><!-- Let browser know website isoptimized for mobile --><metaname="viewport"content="width=device-width, initial-scale=1.0"/></head><body><divclass="pure-menu"><!--Main heading of menu--><spanclass="pure-menu-heading">GEEKFORGEEKS</span><ulclass="pure-menu-list"><!--List items of menu--><liclass="pure-menu-item"><ahref="#"class="pure-menu-link">Home</a></li><liclass="pure-menu-item"><ahref="#"class="pure-menu-link">About Us</a></li><liclass="pure-menu-item"><ahref="#"class="pure-menu-link">Contact</a></li><liclass="pure-menu-item"><ahref="#"class="pure-menu-link">Privacy Policy</a></li></ul></div></body></html>Output:
For creating Horizontal Menu:
You can change the above vertical menu to horizontal menu by just adding the class name “pure-menu-horizontal” in the division at the beginning.
Example:
HTML
<!DOCTYPE html><html><head><!--Import Pure Css files--><linkrel="stylesheet"href=integrity="sha384-nn4HPE8lTHyVtfCBi5yW9d20FjT8BJwUXyWZT9InLYax14RDjBj46LmSztkmNP9w"crossorigin="anonymous"><!-- Let browser know website isoptimized for mobile --><metaname="viewport"content="width=device-width, initial-scale=1.0"/></head><body><divclass="pure-menu pure-menu-horizontal"><!--Main heading of menu--><spanclass="pure-menu-heading">GEEKFORGEEKS</span><ulclass="pure-menu-list"><!--List items of menu--><liclass="pure-menu-item"><ahref="#"class="pure-menu-link">Home</a></li><liclass="pure-menu-item"><ahref="#"class="pure-menu-link">About Us</a></li><liclass="pure-menu-item"><ahref="#"class="pure-menu-link">Contact</a></li><liclass="pure-menu-item"><ahref="#"class="pure-menu-link">Privacy Policy</a></li></ul></div></body></html>Output:
Please Login to comment...