Change ribbon menu when changing the screen size

Question

currently I got this menu

 var navBtnActive = true; // menu opened? $(document).ready(function () { $('body').click(function (e) { if ($(e.target).attr('id') !== 'navContainer') { // close menu when clicking outside $("#navContent").slideUp(); navBtnActive = false; } }); $("#navBtn").click(function (e) { // toggle the menu when clicking an item e.stopPropagation(); navBtnActive = !navBtnActive; $("#navContent").slideToggle(); }); }); 

 #header{ height: 21px; background-color: #129934; } #navContainer { position: relative; display: inline-block; } .toggleBtn{ display: block; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="header"> <div id="navContainer"> <button id="navBtn">Menu</button> <div id="navContent"> <button class="toggleBtn">Button 1</button> <button class="toggleBtn">Button 2</button> <button class="toggleBtn">Button 3</button> </div> </div> </div> 

So this menu would handle a mobile device or something like that. When having a large screen I want the menu look like this for example

 #header{ height: 21px; background-color: #129934; } 

 <div id="header"> <button>Button 1</button> <button>Button 2</button> <button>Button 3</button> </div> 

Is it possible to switch the menu to a smaller one, when lowering down the screen size?

Answer 1

Update you might have noticed that when you click the button to hide the nav buttons and then resize they are all hidden. The cause is that jQuery slideup() adds an inline-style saying display: none; . Now you could remove that with using !important but that's where things start to get messy.

So here is another solution which will be the better way then the previous one. jsFiddle to resize

Actually it's much simpler. All javascript / jQuery does is add/hide (toggle) a class name hidden . Animations (these days) can all be done with CSS3. Like so you always have full control over the look no matter which size the viewport is. Hope this helps, happy coding.

 $(document).ready(function () { $("#navBtn").click(function (event) { event.preventDefault(); event.stopPropagation(); $("#navContent").toggleClass('hidden'); }); }); 

 #header{ height: 21px; background-color: #129934; } #navBtn { display: none; } #navContent button { display: inline-block; } #navContainer { position: relative; display: inline-block; } @media screen and (max-width: 540px){ #navBtn { display: block; } #navContent { height: auto; transform: scaleY(0); transform-origin: top; transition: transform 0.3s ease-in-out; } #navContent.hidden { transform: scaleY(1); } #navContent button { display: block; } } 

 <div id="header"> <div id="navContainer"> <button id="navBtn">Menu</button> <div id="navContent"> <button class="toggleBtn">Button 1</button> <button class="toggleBtn">Button 2</button> <button class="toggleBtn">Button 3</button> </div> </div> </div> 

Previous (first) solution: Check out this fiddle where you can resize the viewport and see what happens:

It's the code from your first example with little changes to have it for mobile or desktop:

 var navBtnActive = true; // menu opened? $(document).ready(function () { $('body').click(function (e) { if ($(e.target).attr('id') !== 'navContainer') { // close menu when clicking outside $("#navContent").slideUp(); navBtnActive = false; } }); $("#navBtn").click(function (e) { // toggle the menu when clicking an item e.stopPropagation(); navBtnActive = !navBtnActive; $("#navContent").slideToggle(); }); }); 

 #header{ height: 21px; background-color: #129934; } #navBtn { display: none; } #navContent button { display: inline-block; } #navContainer { position: relative; display: inline-block; } @media screen and (max-width: 540px){ #navBtn { display: block; } #navContent button { display: block; } } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="header"> <div id="navContainer"> <button id="navBtn">Menu</button> <div id="navContent"> <button class="toggleBtn">Button 1</button> <button class="toggleBtn">Button 2</button> <button class="toggleBtn">Button 3</button> </div> </div> </div> 

Answer 2

As said in the comments, you can use media query to change the way the buttons are aligned, just like this:

@media (max-width: 960px) {
  #navContainer {
    display: flex;
 }
  #navContent {
    display: flex;
}

Example

https://jsfiddle.net/3w7xngpf/3/