I am trying to create a menu bar that has 2 levels of menus. The top menu is is the main one. Then the second level underneath it has some sub category items. Right now you need to click on the main menu first and load that page to get see the sub category menu items for that section because they are just hard coded into the page. I want to make it so that when you hover over the main menu items that it will load the sub menu.
Here is a jsFiddle of the navigation area and CSS
Here are a couple of screenshots of what it looks like
What would be my best method of accomplishing this. I'm not the most experienced but I got a pretty good grasp of HTML and CSS. Any help in the right direction would be great. Thanks.
I've made this type of menu in the past, I've created a copy of the code you can find here http://jsfiddle.net/PWFGd/24/
The property you want to use is:
selector{
display: none;
}
selector:hover{
display: block;
}
Hope it helps.
Aymeric.
You can use a general sibling combinator (~) with your current structure to accomplish something like this. Use the hover pseudo element to toggle the display state (or visiblity) of the submenu.
http://jsfiddle.net/PWFGd/25/
/* on hover of mainmenu, find subnav and show it */
.mainMenu:hover ~ ul.subNav {
display: block;
}
ul.subNav{
display: none; /* hide submenu */
font:normal 11px/12px Arial, Helvetica, sans-serif;
padding:4px 0 0 0;
}
There are plenty of examples on the net of css based navigation menus. I think you might want to rethink your html structure and use one of those. Google
# Aymeric answer is good one, its also called "2 level horizontal navigation in CSS" i often use them in my projects,
here is demo what u looking for
complete tutorial link
Related
This is my first question on here. Any feedback is welcome.
I'm creating a dropdown menu for the mobile version of our site and I'm running into an issue that seems quite straight forward.
In this image you see the menu how it should look like when the submenu is extended. When working in the Elementor editor everything looks how it should look. When I go to preview mode or to the live website the following happens when I extend the dropdown menu: lines appear around the extended item what I think are borders or an outline. Also when I close the submenu the menu item gets highlighted: highlighted menu item.
It seems like the menu item is set to active and the default border/overlay is added. I don't see how that is possible since this are my settings: settings. Separation is set to none and the background-color and color are both set to their correct values. Settings for normal and hover are the same as active, since I don't want any changes to happen.
I tried other color values and changed them to transparent. These changes work properly but the black border and overlay remain an issue.
I also tried adding the following CSS to the element but this didn't help:
selector .menu-item {
border: none;
outline: none;
}
I tried rebuilding the menu, some other code snippets, disabling caching plugins, setting separation to solid with 0px and more but nothing fixed it so far. When looking at the elements using inspect I see that when extending the submenu the class changes from elementor-item has-submenu to elementor-item has-submenu highlighted. If I could somehow disable this I think the issue would be solved.
My HTML and CSS knowledge is quite limited so I hope there is an easy fix that I'm not familiar with.
Many thanks in advance!
Edit: Thanks to #Alivia Pramanik for the quick and easy solution!
Welcome to SO. If I am not mistaken, you can change this with Elementor's own design. To do with this custom CSS, add this,
.elementor-nav-menu--dropdown .elementor-item:focus {
background: #0000!important;
outline: 0!important;
}
See the image for your reference
I have been working on this for quite a while, and cannot seem to find why my dropdown menu is not working. After searching many online forums and asking friends, I have no answer. I just want the dropdown to work. I cannot seem to make the .dropdown_trigger class make the .dropdown class hide, or reappear. Any help would be very much appreciated. Linked below are the pages.
Thanks,
Alex
Index Page CSS File
By inspecting the html page provided in the "Index Page" link, there is only one element with the "dropdown" class, and it's empty. It's not clear what your code is trying to show or hide.
<div class="dropdown"></div>
The "dropdown_trigger" class is located in a table header element:
<th>
PROJECTS
</th>
By inspection, there does not appear to be any javascript to trigger any behavior. It does not show up in Source in the Chrome Inspector. Normally, this would be done with JS to use .show() or .hide(), for example if you had jQuery (there are other ways). Or are you trying to create this without JS at all? Are you trying to create dropdown menus with only CSS?
If so, please check this tutorial out:
https://css-tricks.com/solved-with-css-dropdown-menus/
The key part is here:
ul li:hover > ul,
ul li ul:hover {
visibility: visible;
opacity: 1;
display: block;
}
By creating a CSS rule to change the visibility, the dropdown menu can be shown. However, there does not appear to be any HTML content to show in the current linked page you provided. That div is empty.
I have a problem with a personal project, http://mail.fixca.com.gt/. on Drupal 8 with the profile Brainstorm
The menu doesn't display the submenus created. I have already:
Set Show Expanded mode on the menu item.
Set the max menu level display on the block it self.
Tried to create a new menu and CSS it to get it display the submenu
.submenu{
display:none;
}
.companymenuli:hover > ul{
display:block;
}
but it never shows the submenu. I realise that it might be something I'm just not doing right, but I cann't find the solution.
The HTML on the Drupals Website shows like this
HTML from chrome developer
I think that it might be some kind of restriction on the theme itself.
I really appreciate your help. If you have give mi a hint on where I might be able to find the solution.
Thank you.
Overflow: hidden. is added in below css:
#block-brainstorm-theme-main-menu
Once you remove overflow property from here and also remove display: none. from
#block-brainstorm-theme-main-menu ul ul
Submenu will display. But you have to work on css and js for proper look and feel. Instead I suggest to use some jquery for this.Also you can use modules like Nice menu or Superfish menu for the same. Let me know if i can help you in this.
I have a multi-level drop down menu at http://www.theseymourgroup-comm.net/new/. If you hover over Properties, you will see the first drop down menu come down that includes Commercial and Development. But when you hover over Commercial, you will see that the next level with Active and Sold goes way out to the right. I right clicked that panel and chose inspect element but could not determine what I needed to change in the css to make it move over to hug the first drop down menu. Any help would be appreciated. Thanks
The element with the "Active" and "Sold" entries is absolutely positioned, but it doesn't have settings for top or left / right.
If you add this rule
.nav li ul ul {
left: 150px;
}
you'll come closer to what you want. (I leave the finetuning of that value to yourself...)
I think javascript have some problems. Menu Dropdown use css only.
This is my example. It's very simple for newbie
Trying to understand the twitter bootstrap 3 sidebar navigation, e.g.: http://getbootstrap.com/javascript/
Here are already many questions about it (mainly about the affix), but i have an specific one.
I understand:
how to affix the sidebar, e.g.
$('#sidemenu').affix({
offset: {
top: 60
}
});
also is easy the scrollspy alone.
What i don't understand how is achieved the scrollspy + expanding submenus, e.g. in only the active chapter are shown the subchapters (what are also scrollspy-ed). As in red circle in the next screenshot:
Could someone explain what is basic principe? It is achieved with pure CSS (AFAIK), but when I'm, reading thru the http://getbootstrap.com/assets/css/docs.min.css didn't find how it is achieved.
Are you asking how only on larger views they show the sub-menu and on small they don't?
Before the media queries you will find that the ul is hidden:
.bs-docs-sidebar .nav .nav {
display: none;
padding-bottom: 10px;
}
Then when it's .active INSIDE the media queries it displays:
#media (min-width:992px) {
.bs-docs-sidebar .nav>.active>ul {
display: block
}
.... more styles go here ....
}
TIP: don't look at minified CSS.
If you're wondering how the scrollspy is achieved on the sub menu items, it's the same way as the large, each ID of the content corresponds with the link in the menu.