I am creating a site with wordpress having six primary menu option and out of the six, two have 26 sub options under them. As the number of options in the drop downs are more than what my PC screen can accommodate, a few options at the bottom are cutoff. I also could not find any option to create the scrolling effect in the over-sized menu. I tried to search for the way out, but couldn't find one suitable in wordpress or stackoverflow. Is their any way out of this problem?
The easiest way to fix this would be something like the below:
ul ul{
max-height:200px;
overflow-y:scroll;
}
So, a list element inside a list element (the sub menu of your menu) has a maximum height of 200px. If it is over this, a scroll bar will let the user scroll down.
Demo
First you need to assign a class name to each of your sub menus. Go to "Appearance-Menus". Pop open the "Screen Options" at the top of the screen. Check the box for "CSS Classes". Then go to each of the sub menu names in your menu, pop the menu open and enter "SubMenu1" into the "CSS Classes (optional)" field for the first menu to have scrolling and "SubMenu2" for the second menu you want scrolling on. You will use these class names in the next steps.
No go to the "Appearance-Customize-Additional CSS" option and add this css.
.nav li ul { width: 290px; }
#top-menu li li a { width: 250px; }
.SubMenu1 ul {
height: 400px;
overflow: scroll;
}
.SubMenu2 ul {
height: 400px;
overflow: scroll;
}
Depending on the widths you need, you can adjust the width values.
Related
It is possible to move sub menu position to top of the screen. I am using the new menu component. Which way to declare it is to use it, all you have to do is write <Menu mode= {mode} theme={theme} items={items}/>.
Submenu position on default:
And this is my expected condition:
The blue line is menu, and the red line is submenu. The way I did before was to create a new menu and place it at the top of the screen
But I think it will be a lot of trouble if you use it that way. So I want to switch ways by moving the sub menu to the top of the screen. Is that really possible to do?
You can always override the ant design css styles to achieve this. The sub menu items are the usual ul & li pair. To display li items in a line we just need to -
ul li{
display: inline;
}
We can apply the same to ant design menu items & a few tweaks -
.ant-menu-vertical.ant-menu-sub > .ant-menu-item {
display: inline;
}
.ant-menu-submenu-popup {
top: 0px !important;
right: 5% !important;
left: auto !important;
width: 400px;
}
Output
Please check : http://shoejunction.net/
In the top menu, if you put your cursor on Shoes by Brand, it will show a really long list of items.
I want these items to be in a floating square drop down. So it will fit inside the page (the top menu goes down with you if you scroll down the page).
Is it possible to change it's style to do that?
I tried Mega Menu plugin, but it changes the style of the menu, and i want to keep the style.
Thanks.
You will have to be more specific about what you want. Here is a solution for showing all the shoes in the menu:
ul.sub-menu {
max-height: 600px;
max-height: calc(100vh - 80px); /* Comment Suggestion :D */
overflow-y: auto;
overflow-x: hidden;
}
Getting it to be the height of the page would require javascript though.
Im coding this design on wordpress: http://ft.webmode.lt/
And i got stuck on top sub-meniu floating. When you hover on first menu item the sub-menu floats normal from left, when hover second menu item the sub menu starts from that menu item who is child.
How to make submenu always float from left?
My code i use now: http://pastebin.com/sTt4wB2b
DONE
I just remove position:relative; from header .top-meniu ul li and add it to header .top-meniu ul
You can do it the following way using css:
.select-submenu-wrappers {
left: 0;
right: auto;
}
Did some searching but only found info for the megaBar. Would like to have 100% width dropdown widths and implement it with as little css/js on top of Foundation as possible.
I'd like to do a sub menu (ul > li.has-dropdown -> ul.dropdown) that is 100% window width similar to the one on Mashable and shows on hover. The Foundation megaBar is outside of the nested nav structure but that's not what I'd like for my Wordpress template (want to stay in the nested walker type menu tree).
If you hover over any of the top menu links on Mashable, you'll see the dropdown submenu I'd like to copy (just the structure, not the content).
I'm using Foundation 3.2 and have the <div class="contain-to-grid fixed"><nav class="top-bar"> setup so that it is fixed to the top and always 100% window width while the top-bar has a max-width: 1440px, just like the Mashable site.
Now I just need the dropdown (sub menu) part sussed out.
This will reset your top bar submenu to be 100% of your top bar's width and will organise your submenu items in responsive columns, just as a flyout content but still preserving the navigation behavior on the small screen size
#media only screen and (min-width: $screenSmall) {
nav.top-bar > section > ul > li.has-dropdown{
position: static;
& > .dropdown{
#include outerRow();
& > li.has-dropdown{
#include column(3);
min-width: auto;
.dropdown{
#include outerRow();
position: static;
visibility: inherit;
top: auto !important;
left: auto !important;
padding: 0;
min-width: auto;
li{
#include column(12);
min-width: auto;
}
}
}
}
}
}
Foundation does come with the functionality for a dropdown menu, so you could replicate the type of navigation used by Mashable with the Foundation framework.
If you read the documentation:
http://foundation.zurb.com/docs/navigation.php
You'll see that in the Nav Bar example, Nav Item 4 has a dropdown with its own rows/columns. As per the docs, "You can also have dropdowns with a specific size which can contain any kind of content, including rows and columns."
You should be able to specify the size of the dropdown so that it spans the page, by using CSS to alter the size of the flyout class.
I searched everywhere for an easy answer to making the drop down mega menu 100% of the container and found it here:
http://codepen.io/sldavidson/full/Jseph
The one essential style was this:
.open {left: 0 !important;}
This UI component is not part of Foundation (see Foundation Components). As you already mention, the dropdown menu is limited to showing nested menu elements.
Creating the same functionality as in the Mashable site is out of the scope of Foundation and will involve developing it by your own. The question is IMHO not suitable to be answered in Stack Overflow.
I have the problem whereby I can't keep my sub menu visible. When I hover over the parent <li> it appears, and then when I move down to select one of the sub menu items it disappears. This is as soon as focus is lost from the parent <li>
I can't find a solution anywhere.
can someone please check it?
http://www.mymediaventure.com/about.php. It is under the Pricing tab. This is so frustrating. other examples I look at seem to work and I can't spot any clear differences that would hint why theirs works and mine doesn't.
Thanks in advance.
The problem is in styles.css and has to do with your #main_content h1 title element overlapping your div#primary_navigation. You can fix it by setting a higher z-index on your navigation element as I've done in the example below.
#wrapper #top #right div#primary_navigation
{
position : relative;
z-index: 2;
font-size : 11pt;
margin-top : 72px;
}
And a little further down in the CSS:
#main_content h1
{
position : relative;
z-index: 1;
top : -20px;
font-weight : normal;
}
If you want to visually see the problem, add a background colour to your #main_content h1 and you'll notice it almost completely overlaps your tabs. As a result you can trigger the dropdown when you hover over the top of the Pricing tab, but as you move down to the sub items, your mouse goes over the title and the menu disappears.
#main_content h1 {
font-weight:normal;
position:relative;
top:-20px;
}
THis is the problem, try deleting the position:relative, or change it to something else, ie:absolute
My solution to this was to expand the padding around the parent so that the selectable/hover region was larger.
In my case I set something like: .nav a {padding: 20px;}
I had a similar problem and I've found a solution for mine. Now I'm not versed in coding at all, some light Dreamweaver, but that's about it. I was having this problem with a tumblr theme and none of these solutions worked. Only after changing top: 25px; to top: 20px;, the dropdown did work for my site. Hope this helps someone.
I followed the advice of the previous poster but with modifications. I changed all of my relative positioning to absolute for all items on the page (header, menu, and content) and this fixed the menu problem. I had to change for all three items for the menu to stop disappearing on mouseover.
I had a margin set on the <ul> which I removed and put on a div containing the <ul>.
anyway I managed to get a drop down menu from image hover effect, example and example code here dropdown menu from custom button image hover
I hope this helps someone
I had a similar problem: a drop down menu disappeared when the mouse pointer hovered over a part of the drop down menu at which underneath a adsense ad was shown. Putting the ad down in the html page solved the issue. Did not try out other solutions.
I also had this problem. The problem was that there was a space between where the main menu ended and where the dropdown menu began, so while moving the nouse down to the dropdown options, it would pass over an area of the background and the menu would disappear.
The fix was adjusting the top position as shown below (in my case, from 4.0 to 3.75em)
.main-navigation ul ul {
position: absolute;
top: 3.75em;
I had the same problem with the secondary hover navigation going away when i tried to move from the primary to the secondary menu. What seemed to help for me was to move the margin up into the primary menu. I added the following line to my already existing ul li ul { margin-top: -.1em; }