Adding vertical navigation menu in Weebly site is an easy way to provide quick and useful links to users. It can be a widget consistently placed on all pages as a sidebar or used on specific pages wherever you want or used on a blog sidebar. In this article we will explain the step by step process of adding vertical menu widget to your Weebly site with multi-level sub-menus. Remember, the text and hover color may vary based on your theme.
Features of the Widget
- Navigation menu widget contains simple CSS and HTML code.
- This is not a responsive widget, hence use multi-level only if required. If you are targeting for mobile users or blog sidebar then use only single level menu which can fit into the visible area.
- The color, width and height of the menu can be customized in the CSS.
- Additional menu or sub-menu items can be added as you need by modifying CSS/HTML.
- You can place the widget on as many places as you wish.
CSS for Vertical Navigation Menu
Copy and paste the below CSS code under “Pages > Select a Page > SEO Settings > Header Code” section. If you want to add the widget on many pages then add the code under “Theme > Edit HTML / CSS > Assets > main.less“.
ul#navmenu, ul#navmenu li, ul#navmenu ul { margin: 0; border: 0 none; padding: 0; width: 200px; /*For KHTML*/ list-style: none; } ul#navmenu:after /*From IE 7 lack of compliance*/{ clear: both; display: block; font: 1px/0px serif; content: "."; height: 0; visibility: hidden; } ul#navmenu li { float: left; /*For IE 7 lack of compliance*/ display: block !important; /*For GOOD browsers*/ display: inline; /*For IE*/ position: relative; } /* Root Menu */ ul#navmenu a { border: 1px solid #FFF; border-right-color: #CCC; border-bottom-color: #CCC; padding: 0 6px; display: block; background: #EEE; color: #666; font: 18px/40px Verdana, Arial, Helvetica, sans-serif; text-decoration: none; height: auto !important; height: 1%; /*For IE*/ } /* Root Menu Hover Persistence */ ul#navmenu a:hover, ul#navmenu li:hover a, ul#navmenu li.iehover a { background: #CCC; color: #FFF; } /* 2nd Menu */ ul#navmenu li:hover li a, ul#navmenu li.iehover li a { background: #EEE; color: #666; } /* 2nd Menu Hover Persistence */ ul#navmenu li:hover li a:hover, ul#navmenu li:hover li:hover a, ul#navmenu li.iehover li a:hover, ul#navmenu li.iehover li.iehover a { background: #CCC; color: #FFF; } /* 3rd Menu */ ul#navmenu li:hover li:hover li a, ul#navmenu li.iehover li.iehover li a { background: #EEE; color: #666; } /* 3rd Menu Hover Persistence */ ul#navmenu li:hover li:hover li a:hover, ul#navmenu li:hover li:hover li:hover a, ul#navmenu li.iehover li.iehover li a:hover, ul#navmenu li.iehover li.iehover li.iehover a { background: #CCC; color: #FFF; } ul#navmenu ul, ul#navmenu ul ul, ul#navmenu ul ul ul { display: none; position: absolute; top: 0; left: 200px; } /* Do Not Move - Must Come Before display:block for Gecko */ ul#navmenu li:hover ul ul, ul#navmenu li:hover ul ul ul, ul#navmenu li.iehover ul ul, ul#navmenu li.iehover ul ul ul { display: none; } ul#navmenu li:hover ul, ul#navmenu ul li:hover ul, ul#navmenu ul ul li:hover ul, ul#navmenu li.iehover ul, ul#navmenu ul li.iehover ul, ul#navmenu ul ul li.iehover ul { display: block; }
This is for three level of sub-menus and you can add as many as sub-menus by replication 3rd menu section in the code.
HTML for Navigation Menu
Add the below HTML code inside “Embed Code” element on a page where you want to add the menu:
<ul id="navmenu"> <li><a href="#">Web Design</a></li> <li><a href="#">Hosting Plans   ›</a> <ul> <li><a href="#">WordPress   ›</a> <ul> <li><a href="#">First Site</a></li> <li><a href="#">Second Site</a></li> <li><a href="#">Third Site</a></li> <li><a href="#">Fourth Site</a></li> </ul> </li> <li><a href="#">Weebly</a></li> <li><a href="#">Wix</a></li> </ul> </li> <li><a href="#">Site Builder   ›</a> <ul> <li><a href="#">WordPress   ›</a> <ul> <li><a href="#">Plan 1</a></li> <li><a href="#">Plan 2</a></li> <li><a href="#">Plan 3</a></li> <li><a href="#">Plan 4</a></li> <li><a href="#">Plan 5</a></li> </ul> </li> <li><a href="#">Weebly   ›</a> <ul> <li><a href="#">Plan 1</a></li> <li><a href="#">Plan 2</a></li> <li><a href="#">Plan 3</a></li> </ul> </li> </ul> </li> <li><a href="#">Email Plans</a></li> <li><a href="#">Site Security</a></li> </ul>
Replace the menu descriptions and remove # with your own links. Also add or delete menu and sub-menu items as you need.
Now publish your site to see an elegant vertical menu like below.
Note: There will be a horizontal scroll bar if there is another element placed beside menu occupying the width.
1 Comment
Leave your reply.