<div class="dropdown" style="position:fixed">
<span class="icon dropdown-toggle" data-toggle="dropdown"></span>
</div>
<ul class="dropdown-menu" style="position:abosolute">
<li id="1"></li>
<li id="2"></li>
</ul>
I need to do something like this. That is icon in one div(fixed) and ul outside the div(absolute position) to make scrollable in page ? If I give within the same div both taking fixed position and dropdown becomes un-scrollable This is not working. How can I achieve this ?
I think the only way to get this working is by creating a Button linked with your Dropdown menu. Almost like in this Bootstrap Example.
Related
I am trying to close the nav dropdown menu on scroll but I don't think I am targeting the class on the button correctly with jQuery as it is not working.
I am trying to target the .nav-menu-list class.
main.js and index.html
$(window).on('scroll', function() {
$('.nav-menu-list').prev().dropdown("toggle");
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="header" class="navbar-toggleable-md sticky clearfix fixed ">
<header id="topNav">
<div class="container">
<div class="row">
<nav>
<ul class="desktop-nav-links ">
<li class="list-group-item" >
Home
</li>
<li class="list-group-item">
<button class="dropdown-toggle nav-menu-list" type="button" id="" data-
toggle="dropdown" aria-haspopup="true" aria-expanded="false">
</button>
<div class="dropdown-menu " aria-labelledby="content"> Content </div>
</li>
</ul>
At first I tried using $('.dropdown-toggle').prev().dropdown("toggle"); which worked and closed the menu on scroll. The issue this gave me though was that it also targeted all of the dropdown-toggles on the page causing things to break.
Any suggestions will be really appreciated, thank you.
Update
After trying a few different ways of targeting the open dropdown menu to close on scroll, I found the best way for me was to explicitly target the class when the menu dropdown is open using -
$('li.show .nav-menu-list').dropdown("toggle");
So it is going to target the dropdown that is open.
Thank you everyone for helping me with this issue.
To target a class in jQuery, you must specify a class selector:
$('.nav-menu-list').prev().dropdown("toggle");
Note the leading . in front of nav-menu-list, which you were missing.
Thank you everyone for helping me with this issue.
After trying a few different ways of targeting the open dropdown menu to close on scroll, I found the best way for me was to explicitly target the class when the menu dropdown is open with
$('li.show .nav-menu-list').dropdown("toggle");
So it is only going to be on the dropdown that is open.
I will add as an update to my question.
I hope this may also help anyone else with similar issues
I am having an issue which i would like to solve. i have created a menu for an ecommerce site. The menu works fine. Unfortunately i cannot copy the whole code here cos it is too much but i made a short version and a picture to present the structure of the menu.
The main concept is when a button is clicked on the main nav a dropdown menu opens which has 2 columns. The left site has further buttons and the right side is where the div containers will be shown depending on the active list item on the left side. That is where the issue occours.
Because the container opens by hovering on the list item not by clicking it. When the mouse is over the li it gets highlighted but when the mouse is out the highlight color disappears.
I would like to keep the active li item highlighted until the mouse hovers on another li item.
Somehow i should get the row(item) which is hovered, change the css class for highlighted and keep until another row gets hovered. Then remove the css class and do the same with the new active list.
Hope i mad it clear. :-)
here are the html codes and the structure.
<nav class="navbar navbar-default" role="navigation">
<div class="collapse navbar-collapse navbar-ex1-collapse">
<ul class="nav navbar-nav">
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#" id="button1"> </a>
<div class="dropdown-menu">
<div class="col-sm-3">
<ul class="submenu-list">
<li> </li>
<li> </li>
<li> </li>
</ul>
</div>
<div class="col-sm-9" id="submenubox1">
<h3>Subbox Title</h3>
<div>Content</div>
</div>
<div class="col-sm-9" id="submenubox2">
<h3>Subbox Title</h3>
<div>Content</div>
</div>
</div>
</li>
</ul>
</div>
</nav>
The code im trying is the following using the menu.aim javascript:
<script src="jquery.menu-aim.js" type="text/javascript"></script>
<script>
var $menu = $(".dropdown-menu");
$menu.menuAim({
activate: activateSubmenu,
deactivate: deactivateSubmenu
});
function activateSubmenu(row) {
var $row = $(row);
// Keep the currently activated row's highlighted look
$row.find("a").addClass("maintainHover");
}
function deactivateSubmenu(row) {
//remove the row's highlighted look
$row.find("a").removeClass("maintainHover");
}
</script>
however this code is not working. Im am not sure if this would be the right way to solve this thought.
Also i have tried to use to css code:
ul.class li:hover{
background-color: red !important;
}
But this is not working either.
Here is a similar example what iam trying to achieve.
https://rawgit.com/kamens/jQuery-menu-aim/master/example/example.html
Any help would be appropriated.
Thank you!
Use jQuery to add an active class to the hovered item -
$('.submenu-list-item:not(.active)').on('mouseover', function() {
$(this).parent().find('.submenu-list-item.active').removeClass('active');
$(this).addClass('active');
});
This will add active class only when hovered over items of the same parent i.e. same submenu
Somewhat I can understand your question. I have tried this plugin. It may satisfy your need.
Bootstrap Submenu
Thanx for all replies.
With the help of Rohit answer I made it work.
However I had to change a line.
$(this).parent().find('.submenu-list-item.active').removeClass('active');
this line was not working for me unfortunatelly.
It did not remove the highlighted item once another got hovered on. Instead of this I removed the class from all items(a) in the ul.
$('.submenu-list-item:not(.active)').on('mouseover', function() {
$(".submenu-list a").removeClass();
$(this).addClass('active');
});
Anyway thanks for the bootstrap answer as well. I will learn some new stuffs from there.
I'm trying to align the items within a standard bootstrap dropdown menu to the right hand side within the menu. Normally they are left aligned.
I need this because I'm displaying languages that are read Right To Left (RTL).
Nothing I try seems to work properly, using "pull-right" class on any element, e.g. the <li>, <a> or <span> all fail when hovering over an item - e.g. hilight is wrong size or shape.
Note that the dropdown-menu-right class in the <ul> only aligns the whole menu container with the parent button, not the items within the menu with the container (which is what I want). Code currently is:
<ul class="dropdown-menu dropdown-menu-right">
<li><span dir="rtl">جديد ...</span></li>
<li><span dir="rtl">حفظ ...</span></li>
<li><span dir="rtl">تحميل ...</span></li>
<li><span dir="rtl">نص عادي (العادية) المشاركة ...</span></li>
<li class="divider"></li>
<li><a href="#" id="quitapp"><span dir="rtl"><i class="fa fa-close fa-lg fa-fw"></i> الإقلاع عن التدخين ...
</span></a></li>
</ul>
(Note: I need the <span dir="rtl"> to make sure text is displayed in the right direction, and want to keep the overall look of the menu (so not sure about converting to <divs> or <listgroups>)
Any suggestions / solutions much appreciated! I'm using Bootstrap 3.3.5
Many thanks
You can use style = "text-align : right;" for the a tags. It should work.
Hi there I am working on this simple tabbing solution for an onpage sub menu. It works with 2 options "about-bio-txt" and "about-eb-txt". When I tried to add a third option, I am having issues. I have edited the text down to a few words, but the code is exactly the same.
<ul id="switch-menu">
<li id="about-eb" class="on"><a href="#" onclick='$("#about-bio-txt").hide(); $("#about-3").hide(); $("#about-eb-txt").show(); return false;'>About Everyday Bright</a></li>
<li id="about-bio"><a href="#" onclick='$("#about-eb-txt").hide(); $("#about-3").hide(); $("#about-bio-txt").show(); return false;'>Bio</a></li>
enter code here
<li id="about-3"><a href="#" onclick='$("#about-eb-txt").hide(); $("#about-bio-txt").hide(); $("#about-3").show(); return false;'>About Three</a></li>
The content for the tabs is is just before this menu.
<div id="about-eb-txt">The Constitution</div>
<div id="about-bio-txt">Science is life</div>
<div id="about-3">I AM A TREE</div>
I was wandering if someone could tell me what I am doing wrong and if I am able to add MORE tabs if I need to.
Your menu div ID for the 3rd option and associated tab container have been given the same ID - #about-3
The below should work. Also reduced the JS required from multiple object targets for the same hide request...
<li id="about-eb" class="on"><a href="#" onclick='$("#about-bio-txt, #about-3-txt").hide(); $("#about-eb-txt").show(); return false;'>About Everyday Bright</a></li>
<li id="about-bio"><a href="#" onclick='$("#about-eb-txt, #about-3-txt").hide(); $("#about-bio-txt").show(); return false;'>Bio</a></li>
<li id="about-3"><a href="#" onclick='$("#about-eb-txt, #about-bio-txt").hide(); $("#about-3").show(); return false;'>About Three</a></li>
<div id="about-eb-txt">The Constitution</div>
<div id="about-bio-txt">Science is life</div>
<div id="about-3-txt">I AM A TREE</div>
Ive got this dropdown styled with bootstrap:
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#" id="posuvnik">15min <strong class="caret"></strong></a>
<ul class="dropdown-menu">
<li> 15min </li>
<li> 1hod </li>
</ul>
</li>
and I want that dropdown menu to be rolled down on a page load, anyone know how to achieve that? thanks in advance :)
The dropdown is toggled with having the additional class 'open' added to the enclosing <li> element. So if you want to have it open on page loading:
<li class="dropdown open">
That will do the trick.
This little bit of jQuery script (I'm assuming you've loaded it becasue you're using Bootstrap) ought to do the trick. Once the DOM has loaded, it sends a click() to the dropdown toggle button.
$(document).ready(function () {
$("#posuvnik").click();
});
There is probably a way to do it in straight CSS, but without seeing more of your code it's hard to know.