I would like to implement a dropup menu (menu that opens above the button) in Angular.js that would behave similarly to the ".dropup" class in Boostrap.
Is there a directive that does this or simple instructions to create one?
If you're using a dropdown directive that actually uses Bootstrap (like the UI Bootstrap Dropdown directive), there's no reason you can't apply the .dropup class itself to that dropdown and have it work as expected.
<div class="btn-group dropup" dropdown> <!-- note the dropup class -->
<button type="button" class="btn btn-primary dropdown-toggle" ng-disabled="disabled">
Button dropup <span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu">
<li>Stuff</li>
...
</ul>
</div>
Here's a plunker to demonstrate: http://plnkr.co/edit/pzoRuVOjHHaBLryCv7RA
If you're talking about a navigation bar-type thing, rather than a <select> element, I'd go with the following CSS:
.nav ul li {
position: relative;
}
.nav ul ul {
display: none;
postion: absolute;
bottom: 100%;
width: 100%;
}
Adding in your own CCS flavorings and supplement that with jQuery animation:
$('.nav ul li').hover(function() {
$(this).children('ul').stop().slideDown();
}, function() {
$(this).children('ul').stop().slideUp();
});
The stop() prevents the animations from stacking up in an obnoxious queue. Despite the naming, slideDown() will open the submenu upwards and slideUp() will close it downwards because you've affixed the bottom of the element with your CSS.
Related
I am using a dropdown for filters and want the selected value from the dropdown to appear at the top so users can see what their selection is when the dropdown closes and they continue browsing.
In this scenario, let's say I select "Option 2", I would want the span section value of "Category" to be replaced by "Option 2". ( I tried using the HTML select and option tags but they just don't work to trigger the filter.)
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
position: fixed;
width: 50px;
padding: 4px;
z-index: 1;
}
.dropdown:hover .dropdown-content {
display: block;
}
p {
font-size: 16px;
}
<div class="dropdown">
<span>Category</span>
<div class="dropdown-content">
<a href="www.site.com/option1">
<p>Option 1</p>
</a>
<a href="www.site.com/option2">
<p>Option 2</p>
</a>
<a href="www.site.com/option3">
<p>Option 3</p>
</a>
</div>
</div>
Question is taggged [jQuery], therefore, without needing to change the HTML ...
$('a', '.dropdown-content').on('click', function() {
$(this).closest('.dropdown').find('span').text(this.text());
});
This expression will give all similarly constructed dropdowns on the page the required behaviour.
By traversing the DOM from the clicked element to the span element, there's no fear of cross-talk between different dropdowns.
Pretty simple stuff. To make it easier, I would add a class to each of the links and probably one to the span too for good measure. All in all, you would have something that looks like this:
<div class="dropdown">
<span class="selected-category">Category</span>
<div class="dropdown-content">
<a class="dropdown-option" href="www.site.com/option1"><p>Option 1</p></a>
<a class="dropdown-option" href="www.site.com/option2"><p>Option 2</p></a>
<a class="dropdown-option" href="www.site.com/option3"><p>Option 3</p></a>
</div>
</div>
document.querySelector('.dropdown-option').forEach(el => el.onclick = (e) => document.querySelector('.dropdown .selected-category').innerText = e.currentTarget.innerText);
if you can't add a class name, you just need to build a good selector using the element types instead.
const categorySpan = document.querySelector('.dropdown span');
const dropdownItems = document.querySelector('.dropdown div a');
then it's the same thing as with the class.
Edit: Updated based on comments from Heretic Monkey (thanks!)
I'm trying to change the sub-menu behavior of a site. The original sub-menu appears as a drop-down, and instead I'd like it to appear in a separate full horizontal div.
So far I've done this:
jQuery(document).ready(function( $ ){
$(".header").append("<div class='subber'><div class='sub-menu'></div></div>");
$(".main-navigation ul li.menu-item-has-children").mouseover( function() {
var a = $(this).find(".sub-menu").html();
$(".subber .sub-menu").html(a);
});
});
... with some css, and it works well. the original sub-menu HTML is copied to the subber sub-menu.
I'd like each subber sub-menu to be positioned relatively to the original menu item, even though they occur in separate areas of the HTML. Can I somehow bind the two?
My HTML code:
<div class="header">
<div id="navigation">
<div class="site-navigation">
<nav class="main-navigation">
<ul class="menu-main-menu">
<li class="menu-item">
some text
</li>
<li class="menu-item menu-item-has-children">
some text
<ul class="sub-menu">
<li class="menu=item">
sub item text
</li>
</ul>
</li>
<li class="menu-item">
some text
</li>
</ul>
</nav>
</div>
</div>
<div class="subber">
<div class="sub-menu"></div>
</div>
</div>
Since there's no actual parent-child relationship in the HTML structure, there's no CSS-way of positioning your new sub-menu relative to a top-level menu item.
Instead, you'll have to manually position the new sub-menu with JS, using the coordinates of the original menu item.
Keep in mind this basic positioning won't create a "stickyness" between the two, so if your main menu moves (e.g. a sliding menu bar with up/down toggle states), you'll have to trigger an update to the sub-menu positioning using a listener and function.
Codepen
$("#menuItem1").mouseover( function() {
/* get original menu */
var origMenu = $(this);
/* grab content out of original sub-menu */
var myContent = origMenu.find(".sub-menu").html();
/* copy content over to new sub-menu outside of navigation */
$(".subber .sub-menu").html(myContent);
/* get the coordinates of the original menu item */
var subberLeftOffset = origMenu.offset().left;
var subberTopOffset = origMenu.offset().top + origMenu.innerHeight(true);
/* re-position the new sub-menu so it appears below the original menu */
$(".subber").offset({top: subberTopOffset, left: subberLeftOffset});;
});
#origNavigation .sub-menu {
visibility: hidden;
height: 0px;
}
#menuItem1 {
margin-top: 8em;
margin-left: 8em;
padding: 1em;
width: 200px;
border: 1px solid black;
}
<div id="origNavigation">
<div id="menuItem1">
Hello
<div class="sub-menu">Sub-menu</div>
</div>
</div>
<div class="subber">
<div class="sub-menu"></div>
</div>
I have this dropdown menu and it has a gap between parent and child selector. which is causing it to close fast.
Fiddle
render() {
return (
<div class="dropdown-wrapper">
<div class="image">Image</div>
<ul class="dropdown-container">
<li class="dropdown-list">Nothing</li>
<li class="dropdown-list">Help</li>
<li class="dropdown-list">Settings</li>
<li class="dropdown-list">Logout</li>
</ul>
</div>
);
}
I tried few things.
using react onMoverOver and onMouseOut, which results in same behaviour
Changing css
Tried using jquery
How can I solve this problem. Any indication what i am doing wrong?
margin-top: 0; on .dropdown-container -- Because you have a margin on the .dropdown-container div, as soon as you move off the .image div you are no longer hovering over it... so the dropdown closes.
Fiddle update
If you want space.. add it to the .image class...
.dropdown-wrapper > .image { padding-bottom: 15px; }
Fiddle Update
I want to have an arrow pointing to the right to allow the user to expand the sidebar, and then change that glyphicon to point to the left. That way, it points to the left so that they understand how to hide the sidebar. I then want it to change back to its default state.
This is what I have currently:
<div id="page-content-wrapper">
<div class='hidden-lg'>
<div class="content-header">
<h1>
<a id="menu-toggle" href="#" class="btn btn-default"><i class="glyphicon glyphicon-arrow-right"></i></a>
</h1>
</div>
</div>
Just use:
$('#menu-toggle').click(function(){
$(this).find('i').toggleClass('glyphicon-arrow-right').toggleClass('glyphicon-arrow-left');
});
Fiddle Example
Try
$('#menu-toggle').on('click', function(){
var iSelector = $(this).find('i:first');
if(iSelector.hasClass('glyphicon-arrow-right')) {
iSelector.removeClass('glyphicon-arrow-right')
iSelector.addClass('glyphicon-arrow-left')
}
});
Fiddle
Reference:
selectors
on
hasClass
removeClass
addClass
I guess there is a better way to address this common problem is using CSS's pseudo classes like
:after
For example
.panel-heading .accordion-toggle:after {
font-family: 'Glyphicons Halflings';
content: "\e114";
float: right;
color: grey;
transition: transform 0.5s;
transform-origin: 8px 7px;
}
And below code for rotating glyphicon
.panel-heading .accordion-toggle.collapsed:after {
transform: rotateZ(180deg);
}
Please note: font-family and content may be different if you are using other than bootstrap css library. Also pay attention to the classes decorated or used for your panel.
Reference
Right now I have a pure HTML CSS navigation bar with some dropdowns. However on ipad the hover will obviously not work.
I want to add a click event to the relevant menu items so the dropdown will also activate with an onclick event.
I've look at other answers but I'm not capable of reading javascript well enough so that I can modify them for my specific site.
here is a link to where I'm at now: http://2ftrade.nl/kareem/eindopdracht/
and this is the relevant html. In my css the default is display:none for the dropdown menus and is changed to display:block when hovered over the li that contains it.
<ul>
<li>Home</li>
<li><a title="">Opleiding</a>
<!-- the dropdown -->
<ul>
<li>Visie & Beleid</li>
<li>Opbouw Studieprogramma</li>
<li>Competenties</li>
<li>Diploma</li>
<li>Beroepen</li>
</ul>
</li>
<li>Onderwijsprogramma</li>
<li>Organisatie</li>
<li><a title="">Stages en Projecten</a>
<!-- another dropdown -->
<ul>
<li>Stages</li>
<li>Projecten</li>
</ul>
</li>
<li>Top</li>
</ul>
This is the css that hides the dropdown section
nav > ul > li > ul {
display: none;
position: absolute;
}
and this is what will display it when hovering
nav > ul > li:hover ul {
display: block;
}
you can attach event listener to your element:
var dropdown_button = document.getElementById('#your-button-that-activates-dropdown');
dropdown_button.addEventListener('click', function() {
//here do what you want to do when the button is clicked.
}, false);
you should use javascript events , some thing like this :
var btn = document.getElementById('btn') // this button is a key to run what you want
var drp = document.getElementById('drp') // this is your dropdown list
btn.onclick = function()
{
drp.style.display = 'block'
// other codes . . .
}
You can achieve this without using javascript.
Use the :target selector
example
Add an id and href for each target in the html
<ul>
<li>Home</li>
<li id="Opleiding">
<a title="" href="#Opleiding">Opleiding</a>
<!-- the dropdown -->
<ul>
<li>Visie & Beleid</li>
<li>Opbouw Studieprogramma</li>
<li>Competenties</li>
<li>Diploma</li>
<li>Beroepen</li>
</ul>
</li>
<li>Onderwijsprogramma</li>
<li>Organisatie</li>
<li id="StagesenProjecten">
Stages en Projecten
<!-- another dropdown -->
<ul>
<li>Stages</li>
<li>Projecten</li>
</ul>
</li>
<li>Top</li>
</ul>
in the css specify the style for the :target
nav > ul > li:target ul {
display: block;
}
nav > ul > li:hover ul {
display: block;
}
nav > ul > li > ul {
display: none;
position: absolute;
}