Website Building » Weebly » How Do I Create a Drop Down Menu in Weebly?

How Do I Create a Drop Down Menu in Weebly?

Last updated on December 27, 2022 @ 7:38 pm

Weebly is a popular website builder that allows users to create and design their own sites without having to learn coding. One of the features that Weebly offers is the ability to add a drop-down menu to your site.

This can be useful if you want to create a multi-level menu or if you want to group together certain items under one menu. Creating a drop-down menu in Weebly is easy and only takes a few minutes.

To create a drop-down menu in Weebly, first log in to your account and go to the “Pages” section. Here you will see a list of all the pages on your site. To add a new page, click on the “Add Page” button.

On the next screen, you will be able to enter the name of your page and its URL. Under the “Page Type” section, select “Drop Down Menu”.

Once you have created your page, go to the “Theme” section and click on “Edit HTML/CSS”. In the code editor, find the “Header Code” box and paste the following code into it:

<pre><code><script>
$(document).ready(function(){
$("#dropdown-menu").on("click", function(e){
e.preventDefault();
$(this).toggleClass("open");
});
});
</script>

<style>
#dropdown-menu {
position: relative;
display: inline-block;
}</code></pre>
PRO TIP: Weebly is a website builder that allows users to create and edit their own websites. One feature of Weebly is the ability to create a drop-down menu, which can be used to create a navigation menu for your website.

However, before you create a drop-down menu in Weebly, there are a few things you should be aware of. First, drop-down menus can only be created in the Weebly Editor, not in the Weebly App. Second, when you create a drop-down menu, it will only appear on the page where you created it; it will not be automatically added to your website’s navigation bar. Finally, we do not recommend using more than two levels of nesting in your drop-down menus, as this can make them difficult to use.

#dropdown-menu:hover {
/* when hovering over the element with id="dropdown-menu", change its CSS */
/* so that the unordered list inside it becomes visible */
#dropdown-menu ul {
display: none;
}

#dropdown-menu:hover ul {
display: block;
}

#dropdown-menu ul {
background: #fff;
border: 1px solid #ccc;
border-radius: 5px;
box-shadow: 0 2px 5px rgba(0,0,0,0.3);
list-style: none;
margin: 0;
padding: 0;
position: absolute;
top: 100%;
width: 180px;
z-index: 1000;
}

#dropdown-menu ul li {
float: none;
font-weight: normal;
}

#dropdown-menu ul li a {
color:#333 !important ;
display: block;
line-height : 1em ;
padding : 10px 15px ;
text - decoration : none !important ;
}

#dropdown - menu ul li a : hover {
background : rgba ( 255 , 255 , 255 , 0 . 2 ) ;
}

Replace “#dropdown-menu” with the id or class of your menu element. Save your changes and you’re done! Your drop – down menu should now be working on your Weebly site.

Kathy McFarland

Kathy McFarland

Devops woman in trade, tech explorer and problem navigator.