I am using Foundation 5.4.5 dropdown for my login form but the problem is that the dropdown appears like this:
I want it to be like the one opened where the nub on the right and the body positioned well
Here is my HTML:
<a data-dropdown="drop1" aria-controls="drop1" aria-expanded="false">Has Dropdown</a>
<ul id="drop1" class="f-dropdown" data-dropdown-content aria-hidden="true" tabindex="-1">
<li>This is a link</li>
<li>This is another</li>
<li>Yet another</li>
</ul>
You have two options
<a data-dropdown="drop1" aria-controls="drop1" aria-expanded="false" data-options="align:left">Has Dropdown</a>
Or
<ul id="drop1" class="f-dropdown drop-left" data-dropdown-content aria-hidden="true" tabindex="-1">
<li>This is a link</li>
<li>This is another</li>
<li>Yet another</li>
</ul>
Both work AS WORKAROUNDS. However, I get your point: you want your dropdown to be displayed in the bottom of your link, but aligned with the right border. I would be grateful if someone came up with an answer for that because the foundation site show it is possible in some undocumented way.
To specify how the drop down shows use the align property in data-options on the target element.
Add data-options="align:right" to the a tag.
Related
I have a menu like this:
<div class="menu-hori" id="myMenu">
<ul>
<li>☰</li>
<li><a>1</a>
<ul>
<li><a>Sub 1</a>
<ul>
<li><a>SubSub 1</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
When I click the hamburger icon in the top ListItem, the menu opens. So the functionality is fine. Though it does not look nice, how can I use css to give it a smooth fold out? A nice flow down?
I have a mega dropdown menu like this from bootstrap (code simplified) :
<li class="dropdown mega-dropdown">
Menu Button
<ul tabindex="-1">
<li>1st Link</li>
<li>2nd Link</li>
<!-- many other links -->
</ul>
<!-- many other menu buttons -->
</li>
Small fiddle here : https://jsfiddle.net/48m2ppzc/
I want to simplify the navigation with the tab key :
At the beginning the element <ul> has a max-heightof 0px so I shoudn't be able to navigate inside it with the tab key (because the menu is hidden).
When I click on the "Menu Button" link, the menu should show up (I set max-height to 500px), and I need to change the tabindex to '0' (I can do it with JQuery so that's not a problem)
The problem is at the first point : tabindex="-1" doesn't work, I can still navigate inside the menu with the tab key.
How can I fix this problem? I use HTML5 so tabindex should work on all HTML elements, I also tried with tabindex="0".
tabindex is not inherited by the children of an element, so you need to set it manually on all items:
<li class="dropdown mega-dropdown">
Menu Button
<ul>
<li>1st Link</li>
<li>2nd Link</li>
<!-- many other links -->
</ul>
<!-- many other menu buttons -->
</li>
Since this is probably accessibility related, it might help semantically to use the aria-hidden attribute as well (and toggle it, once it is visible):
<li class="dropdown mega-dropdown">
Menu Button
<ul aria-hidden="true">
<li>1st Link</li>
<li>2nd Link</li>
<!-- many other links -->
</ul>
<!-- many other menu buttons -->
</li>
I want to create a menu with sub-menus. After moving to the top menu, display sub menu the whole width of the page. It works, but I've problems with mobile menu. I am using bootstrap, but I can't click on links. Code select link is below div. I have to that menu. Have you any ideas, what's wrong ?
<ul>
<li>Head link</li>
<div id="submenu"><li></li></div>
<li>Head link</li>
</ul>
First and foremost, having such a reputation, I shouldn't answer these kind of questions. I am sorry for that. But in the sense of helping the OP genuinely, I am answering this question. Please do read the How to ask a question in StackOverflow.
A lot of mistakes in your code:
You cannot have <div> directly inside <ul>.
You cannot have <li> directly inside <div>.
The submenu should be a class and not an id.
All the contents of <li> should be wrapped inside <a> tag.
If you are using the Bootstrap's navigation, you need to use data-toggle attributes.
Corrected Code:
<ul>
<li>
Head link
<div id="submenu">
<ul>
<li></li>
</ul>
</div>
</li>
<li>
Head link
</li>
</ul>
With data-toggle Attributes:
<ul>
<li class="dropdown">
Head link
<div id="submenu" class="dropdown-menu">
<ul>
<li></li>
</ul>
</div>
</li>
<li>
Head link
</li>
</ul>
I would like to use a Font Awesome arrow instead of the default Bootstrap arrow for the dropdown menu link. I've added the Font Awesome arrow and it looks the way I want (on the left), but still there is the default Bootstrap arrow on the right. How can I get rid of it? I can't say I've tried anything yet as I keep checking and I don't find anything to be removed anywhere.
<ul class="nav navbar-nav">
<li class="dropdown drop-li">
<a href="#" class="dropdown-toggle menu-link" data-toggle="dropdown">
<i class="fa fa-angle-down arrow-down"></i>O Festiwalu <b class="caret"></b>
</a>
<ul class="dropdown-menu drop-one">
<li>Something</li>
<li>Something</li>
<li>Something</li>
</ul>
</li>
</ul>
This is how it looks: http://postimg.org/image/id3jbf27x/
Why not deleting <b class="caret"></b>?
If you are using Firefox, you can press STRG + I (I for Inspection) to inspect your html Code and see why something is here (Click on the Element in the Main Page) or even not here (Look at the CSS in the right bottom and select via the left bottom).
Using Foundation 5, I am trying to have a dropdown within a dropdown...
<a href="#" data-dropdown="drop1" data-options="is_hover:true" >More</a>
<ul id="drop1" class="f-dropdown" data-dropdown-content>
<li>Modify</li>
<li class="has-dropdown" >Share
<ul class="dropdown" >
<li>This is a link</li>
<li>This is another</li>
<li>Yet another</li>
</ul>
</li>
</ul>
But without any success!
The Share menu, is always displaying under the Modify menu.
EDIT 1
I tried something else, it's better but not good enough:
<a href="#" data-dropdown="drop1" data-options="is_hover:true" >More</a>
<ul id="drop1" class="f-dropdown" data-dropdown-content>
<li>Modify</li>
<li ><a data-dropdown="drop2" href="#" >Share</a>
<ul id="drop2" class="f-dropdown content " data-dropdown-content >
<li>This is a link</li>
<li>This is another</li>
<li>Yet another</li>
</ul>
</li>
</ul>
And added to my .css:
.f-dropdown.content {display: block;}
Here is my full css: http://pastebin.com/QPaFbenF with the previous line at line 67
But when clicking on Share, the More menu disapear and I have to put my mouse over the More link to get the the More menu and his sub-menu Share displayed.
I have found this question on the zurb forum : dropdown within dropdown and tried the answers, without any success :S
.f-dropdown.content will do nothing since you dont have a class named content under f-dropdown class
these should be in your css:
.has-dropdown ul{display:none;}
.has-dropdown:hover ul{display:block;}
Working Example
Nested dropdown menus tend to get complicated when you start from scratch. I would always recommend to start with superfish. You can a see a working demo here: http://users.tpg.com.au/j_birch/plugins/superfish/examples/
I had the same issue, and I realised I simply didn't include the jQuery trigger to get all the dropdown etc elements via the dropdown.js file working.
<script>
$(document).foundation();
</script>