What is the best method to design a navigation bar that is responsive to different screen

Question

What is the best method to design a navigation bar that is responsive to different screen

I'm facing a challenge with making my website responsive. I've successfully made all the pages responsive, but I'm struggling to finalize the navigation part.

You can view my website at www.christierichards.co.uk/gcc_website/index.php

When the window is resized to 635px, the navigation ul disappears and a menu icon appears. In the CSS, the nav ul is set to display:none at this point. What I'm aiming for is when the menu icon is clicked, the navigation is set to display block and slides down the entire page to reveal the nav (I hope that explanation makes sense!) This technique is commonly used in many responsive sites, but I just can't seem to figure out how to do it!

I would greatly appreciate any assistance on this matter! Thank you

javascript jquery html css responsive-design

Answer 1

Answer №1

give this a shot >>>

CSS:
ul > li { 
width: 24.5%; /*vital*/
height: 50px;
background-color:#000;
color:orange;
float: left;
margin-left: 0.5%; /*vital*/
list-style-type: none;
}
ul{margin:0px;padding:0px;} /*vital*/

HTML:
<ul>
<li>ITEM1</li>
<li>ITEM2</li>
<li>ITEM3</li>
<li>ITEM4</li>
</ul>

This adjusts based on the browser size. Kindly provide feedback. http://jsfiddle.net/S4TcF/ The text can be vertically and horizontally centered, please provide feedback for that

Answer 2

give this a shot >>>

CSS:
ul > li { 
width: 24.5%; /*vital*/
height: 50px;
background-color:#000;
color:orange;
float: left;
margin-left: 0.5%; /*vital*/
list-style-type: none;
}
ul{margin:0px;padding:0px;} /*vital*/

HTML:
<ul>
<li>ITEM1</li>
<li>ITEM2</li>
<li>ITEM3</li>
<li>ITEM4</li>
</ul>

This adjusts based on the browser size. Kindly provide feedback. http://jsfiddle.net/S4TcF/ The text can be vertically and horizontally centered, please provide feedback for that

Answer 3

Answer №2

To achieve the desired functionality, you should follow these 2 steps -

1. Create an event for the menu button to toggle the navigation menu (Assuming you are using jQuery, you can use the following code snippet:

$("#pull").on("click", function(){
  $("#nav-bg").toggleClass("vertical")});

2. Ensure that the CSS styling corresponds to the class you are adding. You can define it as:

div#nav-bg.vertical {
    height: auto;
    background: blue;
}
.vertical ul {
    display: block;
}
.vertical nav li {
    display: block;
    float: none;
}
.vertical nav li a {
    display: block;
}
.vertical nav {
    background: blue;
}

Answer 4

To achieve the desired functionality, you should follow these 2 steps -

1. Create an event for the menu button to toggle the navigation menu (Assuming you are using jQuery, you can use the following code snippet:

$("#pull").on("click", function(){
  $("#nav-bg").toggleClass("vertical")});

2. Ensure that the CSS styling corresponds to the class you are adding. You can define it as:

div#nav-bg.vertical {
    height: auto;
    background: blue;
}
.vertical ul {
    display: block;
}
.vertical nav li {
    display: block;
    float: none;
}
.vertical nav li a {
    display: block;
}
.vertical nav {
    background: blue;
}

Answer 5

Answer №3

Implement a click event for #pull that will animate the display of #nav-bg ul by using jQuery's slideUp and slideDown functions.

Answer 6

Implement a click event for #pull that will animate the display of #nav-bg ul by using jQuery's slideUp and slideDown functions.

Answer 7

Answer №4

To hide content, you can use a class called ".hide" with a display set to none, and then toggle to a ".show" class with display set to block using a jQuery click function.

Use the following CSS:

.show {display: block;}
.hide {display: none;}

jQuery:

$("#pull").click(function(){
$("#nav-menu").toggleClass('show');
});

Check out the working example here:

http://jsfiddle.net/22sSj/6/

Answer 8

To hide content, you can use a class called ".hide" with a display set to none, and then toggle to a ".show" class with display set to block using a jQuery click function.

Use the following CSS:

.show {display: block;}
.hide {display: none;}

jQuery:

$("#pull").click(function(){
$("#nav-menu").toggleClass('show');
});

Check out the working example here:

http://jsfiddle.net/22sSj/6/

Answer 9

Answer №5

When the page is loading, if you are using a variable that has not been defined, like your #pull, it may not be visible. This usually happens when the window size is larger than 635 and the variable var pull = $('#pull'); has not been defined. Changing the window width will not have any impact on the visibility of the bar.

It is recommended to modify the script so that it listens to the window width and only executes the function when the window width is 636px or smaller.

var winWidth = $(window).width();
$(window).resize(function(){
    if(winWidth <= 635){
        addPull();
    }
});

function addPull(){
    menu = $('nav ul');
    menuHeight = menu.height();

    $(document).on('click', '#pull', function(e) {
        e.preventDefault();
        menu.slideToggle();
    });
}

$(document).ready(function(){
    if(winWidth <= 635){
        addPull();
    }
});

Answer 10

When the page is loading, if you are using a variable that has not been defined, like your #pull, it may not be visible. This usually happens when the window size is larger than 635 and the variable var pull = $('#pull'); has not been defined. Changing the window width will not have any impact on the visibility of the bar.

It is recommended to modify the script so that it listens to the window width and only executes the function when the window width is 636px or smaller.

var winWidth = $(window).width();
$(window).resize(function(){
    if(winWidth <= 635){
        addPull();
    }
});

function addPull(){
    menu = $('nav ul');
    menuHeight = menu.height();

    $(document).on('click', '#pull', function(e) {
        e.preventDefault();
        menu.slideToggle();
    });
}

$(document).ready(function(){
    if(winWidth <= 635){
        addPull();
    }
});

What is the best method to design a navigation bar that is responsive to different screen

Answer №1

Answer №2

Answer №3

Answer №4

Answer №5

Similar questions

I am looking to convert the HTML code into Selenium code

What are some ways to apply selector combinators to hashed CSS module classes?

Steps for clearing the UIWebView application cache for HTML5 applications

Running an ESNext file from the terminal: A step-by-step guide

Harness the power of $compile within the Angular link function while also retrieving and utilizing the arguments of the

How can I use JQuery to iterate through Object data and dynamically create tr and td elements?

Jump straight to the top of the page with just a click using the Google Maps Store Locator

Loading data into a text field using JQuery, AJAX, and PHP when a checkbox is clicked

Adjust the height based on the size of another div when the window is resized

Modify the colors of the chartist fill and stroke using JavaScript

JavaScript object merging (let's coin a term)

Display a component just once in React or React Native by utilizing local storage

The D3.js text element is failing to show the output of a function

Loop through each item using the .each() method, then make an AJAX

Permission for geolocation must be granted every time when using Safari and mobile browsers

Tips for concealing a collapsible navbar menu upon clicking elsewhere (Bootstrap 5)

Experiencing issues with regex in JavaScript: all text enclosed within <angular> brackets vanishes

Import .vue single file component into PHP application

Optimizing jQuery UI autocomplete choices through filtering

Which files should be included to define the variable $? in jQuery/JavaScript?