Develop Reference

Is there a way to expand the dropdown menu content upwards?

I would like to use an accordion inside a bootstrap dropdown with up direction ("dropup") and make the menu expand upwards.
I managed to setup the "accordion" inside the dropdown as you can see in the code example.
Here is the html
<div class="dropup" id="dropdownUp">
<button
class="btn btn-secondary dropdown-toggle"
type="button"
id="btnGroup"
data-toggle="dropdown"
aria-haspopup="true"
aria-expanded="false"
>
Dropdown
</button>
<div class="dropdown-menu" aria-labelledby="btnGroup" id="dmenu">
<a class="dropdown-item keepopen" href="#c_1" data-toggle="collapse">Category 1</a>
<ul class="collapse" id="c_1" data-parent="#dmenu">
<li>Child 1-1</li>
<li>Child 1-2</li>
<li>Child 1-3</li>
</ul>
<a class="dropdown-item keepopen" href="#c_2" data-toggle="collapse">Category 2</a>
<ul class="collapse" id="c_2" data-parent="#dmenu">
<li>Child 2-1</li>
<li>Child 2-2</li>
</ul>
<a class="dropdown-item keepopen" href="#c_3" data-toggle="collapse">Category 3</a>
<ul class="collapse" id="c_3" data-parent="#dmenu">
<li>Child 3-1</li>
</ul>
</div>
</div>
And here is the javascript
$(document).ready(function() {
$('#dropdownUp').on('hide.bs.dropdown', function(e) {
if ($(e.clickEvent.target).hasClass('keepopen')) {
return false;
}
return true;
});
$('#dropdownUp').on('hidden.bs.dropdown', function() {
$('.dropdown-menu .collapse.show').collapse('hide');
});
});
Here the link to the example
https://jsbin.com/cirejudipu/edit?html,js,output
The problem is, when the collapse expands, the dropdown menu goes over the button. Is there a way to make the accordion and the dropdown menu expand upwards? Thank you.

you could use the transform/rotate CSS property to force the element to turn upside down. you may need to use the same property on the contents to flip them right side up. I've used this on animated CSS/JS apps as well as on flipping entire canvas projects sideways.
here is the line of CSS
transform: rotate(180deg);
let me know if that helps

Fixed NavBar on scroll using jQuery

I have my navbar on my page. I had used CSS and jQuery to fix it at the top but when I am selecting any menu item in navbar it doesn't go to that section. Give me the solution.
<header id="index-banner">
<nav id="navigation" class="banner-header z-depth-0 ">
<ul class="left hide-on-med-and-down">
<li><span>HOME</span></li>
<li><span>LOCATIONS</span>
<li><span>FAQ</span></li>
</li>
</ul>
<img src="img/logo/50.png" class="banner-logo" id="mylogo">
<ul class="right hide-on-med-and-down">
<span><li>MENU</li></span>
<span><li>CONTACT US</li></span>
<li><img src="img/tunnsingh/face.png" id="tunnsinghface"></li>
<li>
<h5 id="call" class="head"><span>989898XXXX</span></h5>
</li>
</ul>
&nbsp&nbsp<i class="fa fa-bars"></i>
<div id="slide-out" class="side-nav hide-on-large-only">
<img src="img/logo/50.png" id="side-nav-logo">
<img src="img/divider/green.png" class="divide">
<ul>
<span><li>HOME</li></span>
<span><li>LOCATIONS</li></span>
<span><li>MENU</li></span>
<span><li>FAQ</li></span>
<span><li>CONTACT US</li></span>
</ul>
</div>
</nav>
<img src="img/banner.jpg" class="hide-on-large-only" id="index-banner">
</header>

You have to define each section with the "id" attribute and then you have to use the "scrollTop" for those navigation which will scroll to those defined "id".
HTML Code
Scroll to Target Element
<section id=”target-element”>Target Element Content</section>
Jquery Code:
jQuery('.scroll_to').click(function(e){
var jump = $(this).attr('href');
var new_position = $(jump).offset();
$('html, body').stop().animate({ scrollTop: new_position.top }, 500);
e.preventDefault();
});

Height of div with multiple toggles

I'm trying to write a piece of code that will add a scrollbar to a div if the expanded content is taller than the window height.
The html is roughly structured like this:
<nav class="col-md-2 col-sm-3 no-padding">
<div class="nav-container">
<div class="tocify1">
<ul class="tocheader nav nav-list">
<li class="multi flex-container active-top"><a class="open"><i class="fa fa-caret-right fa-rotate-90" aria-hidden="true"></i></a>Top Link</li>
<ul id="" class="tocsubheader nav nav-list">
<li class="active">Link 1</li>
<li class="">Link 2</li>
</ul>
</li>
</ul>
And the Css:
.nav-container{position: fixed;}
Here is the relevant code:
windowheight = $(window).height();
$('.open').click(function() {
$(this).parent().next('.tocsubheader').slideToggle().promise().done(function(){
sidenav = $('.tocify1').height();
if (windowheight < sidenav){
$('.tocify1').css({'height': windowheight, "overflow-y" : "scroll"});
}
else{
$('.tocify1').css({'height':'100%', "overflow-y" : "hidden"});
}
});
});
This works when one toggle is clicked, however when one toggle is open and another is clicked the sidenav height defaults to a seemingly arbitrary number less than the window height.
Any help would be appreciated.
Thank you.

Close responsive menu after click on menu item

I have this custom js code for basic (open/close) menu movement that was great when I used it on multi page websites, but it only closes the menu when you click the menu symbol. Now I need to implement it into a one page website and I need it to close after a user clicks on a menu item. I have very little experience in javascript so I need help solving this problem.
The js:
$(document).ready(function() {
var n = '#nav', no = 'nav-open';
$('#nav-menu').click(function() {
if ($(n).hasClass(no)) {
$(n).animate({height:0},300);
setTimeout(function() {
$(n).removeClass(no).removeAttr('style');
},320);
}
else {
var newH = $(n).css('height','auto').height();
$(n).height(0).animate({height:newH},300);
setTimeout(function() {
$(n).addClass(no).removeAttr('style');
},320);
}
});
});
The HTML:
<!-- Navigation Bar -->
<div class="nav-hold">
<div class="nav-bar">
<img src="images/logo.png" alt="logo" />
Company name
<a id="nav-menu" class="nav-menu-symbol">☰<!-- menu symbol --></a>
<a class="nav-menu">Menu</a>
<ul class="nav-list" id="nav">
<li>Top</li>
<li>About us</li>
<li>Services</li>
<li>Portfolio</li>
<li>Contact</li>
</ul>
</div>
</div>
</div>

change
$('#nav-menu').click(function() {
if you want that your menu close only by clicking on the li element
$('#nav li').click(function() {
or if you want to close menu with both li and menu icon
$('#nav-menu, #nav li').click(function() {

That's because you only bind the click function to the menu symbol. I'm not sure why you separate the symbol and text, but I would prefer to wrap it in single element. Also you can use jQuery slideToggle() to slide down or up on click. Example:
$(document).ready(function() {
$('#nav-menu').click(function() {
$('#nav').slideToggle(300);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="nav-hold">
<div class="nav-bar">
<img src="images/logo.png" alt="logo" />
Company name
<a id="nav-menu" class="nav-menu-symbol">
<span>☰</span>
<span>Menu</span>
</a>
<ul class="nav-list" id="nav">
<li>Top</li>
<li>About us</li>
<li>Services</li>
<li>Portfolio</li>
<li>Contact</li>
</ul>
</div>
</div>
</div>

Manipulate Bootstrap navbar elements using jquery

What I'm trying to do is to hide <li> elements from navbar to a dropdown menu on resize.
I tried and I've ended with this buggy menu. http://i.imgur.com/1uJ7hbG.gif
Here is the js:
$().ready(function () {
//we reconstruct menu on window.resize
$(window).on("resize", function (e) {
var parentWidth = $("#normal").parent().width() - 40;
var ulWidth = $(".menutohide").outerWidth();
var menuLi = $("#normal > li");
var liForMoving = new Array();
//take all elements that can't fit parent width to array
menuLi.each(function () {
ulWidth += $(this).outerWidth();
if (ulWidth > parentWidth) {
console.log(ulWidth);
liForMoving.push($(this));
}
});
if (liForMoving.length > 0) { //if have any in array -> move em to "more" ul
e.preventDefault();
liForMoving.forEach(function (item) {
item.clone().appendTo(".links-hidden");
item.remove();
});
}
else if (ulWidth < parentWidth) { //check if we can put some 'li' back to menu
liForMoving = new Array();
var moved = $(".links-hidden > li");
for (var i = moved.length - 1; i >= 0; i--) { //reverse order
var tmpLi = $(moved[i]).clone();
tmpLi.appendTo($("#normal"));
ulWidth += $(moved[i]).outerWidth();
if (ulWidth < parentWidth) {
$(moved[i]).remove();
}
else {
ulWidth -= $(moved[i]).outerWidth();
tmpLi.remove();
}
}
}
if ($(".links-hidden > li").length > 0) { //if we have elements in extended menu - show it
$(".menutohide").show();
}
else {
$(".menutohide").hide();
}
});
$(window).trigger("resize"); //call resize handler to build menu right
});
And here is the html:
<nav class="navbar navbar-default" role="navigation">
<ul class="nav navbar-nav" id="normal">
<li>Home</li>
<li>News</li>
<li>Download</li>
<li>Twitch Live</li>
<li class="disabled">Ranking</li>
</ul>
<ul class="nav navbar-nav menutohide">
<li class="dropdown hidden-dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="true">
<i class="fa fa-bars fa-fw"></i>
</a>
<ul class="dropdown-menu links-hidden" role="menu">
<!--Hidden links here-->
</ul>
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">
<h6 class="hidden-xs">Bambini</h6>
<img src="http://placehold.it/250x250/000000"/>
<span class="caret"></span></a>
<ul class="dropdown-menu" role="menu">
<li>Account info</li>
<li>Logoff</li>
</ul>
</li>
</ul>
</nav>

I think you can accomplish this with a CSS #media query. Just give whatever you want to hide some sort of id, and then you can use display: none to hide it.
#media (max-width: 767px) {
#contact-nav-link {
display: none;
}
}
Here's a JSFiddle - the <li> element that says 'Contact' will display in the navbar, but when the window is resized (and the navbar collapses), it disappears from the dropdown list.