Expanding a non-bootstrap navigation bar upon clicking the menu

I'm having some difficulty getting my navigation menu to show up when I click the navigation menu icon.

HTML

nav role="navigation" class="navbar">
    <div class="nav-header">
        <a href="#"><span style="font-family: 'Cabin Sketch', cursive; font-size: 1.4em;">Testy Testy Web</span></a>
        <a href="#menu" id="toggle"><span><i class="fa fa-bars"></i></span></a>
    </div>
    <div id="menu">
      <ul>
        <li><a href="#about">About</a></li>
        <li><a href="#services">Services</a></li>
        <li><a href="#pricing">Pricing</a></li>
        <li><a href="#contact">Contact</a></li>
      </ul>
    </div>
</nav>

CSS

nav {width: 100%; position: fixed; text-align: left; background-color: #404040; z-index: 999;}
nav ul li {display: inline;}
nav a {text-decoration: none; float: left; color: white; padding: 1em; line-height: 100%;}
nav a:hover {background-color: #1AA2D4;}
.nav-header a {display: inline-block;}
#toggle {float: right; display: none;}

@media (max-width: 592px) {
    .splash p {font-size: 1em;}
    .splash h1 {font-size: 8em;}
    nav {width: 100%; position: fixed; top: 0; text-align: left; background-color: #404040; z-index: 999;}
    nav ul li {display: block; float: left; clear: left; width: 100%; clear: bottom;}
    nav ul {width: 100%;}
    nav a {text-decoration: none; float: left; color: white; padding: 1em; line-height: 100%;}
    #toggle {float: right; display: block;}
    #menu {display: none;}

JavaScript/jQuery

$(document).ready(function(){

$('#toggle').click(function(){
        $('#menu').css('display', 'visible');
    });

});

Essentially, I've set up the navigation links to be hidden on smaller screens, but I'm struggling with implementing jQuery to make them visible when the toggle icon is clicked. I know this functionality is common in Bootstrap, but I'm not using a framework for the website I'm working on.

If anyone can point out where I might be going wrong, I'd really appreciate it.

Thank you

javascriptjqueryhtmlcsstwitter-bootstrap

Answer №1

display property has the values block, inline, inline-block, and none. To display a menu, you need to modify this line:

$('#menu').css('display', 'visible');

Change it to:

$('#menu').css('display', 'block');

You can also use the toggle function to toggle the visibility of the menu with each click:

$('#menu').toggle();

For more information on using toggle: http://api.jquery.com/toggle/

Answer №2

To show/hide your menu, you can utilize the toggleClass method. Create a new class "menu" that can be toggled on and off to display or hide your menu. Simply replace your existing code with this snippet.

$(document).ready(function(){

   $("#toggle").click(function(){
        $("#menu").toggleClass("menu");
    });

});
nav {width: 100%; position: fixed; text-align: left; background-color: #404040; z-index: 999;}
nav ul li {display: inline;}
nav a {text-decoration: none; float: left; color: white; padding: 1em; line-height: 100%;}
nav a:hover {background-color: #1AA2D4;}
.nav-header a {display: inline-block;}
#toggle {float: right; display: none;}


@media (max-width: 592px) {
    .splash p {font-size: 1em;}
    .splash h1 {font-size: 8em;}
    nav {width: 100%; position: fixed; top: 0; text-align: left; background-color: #404040; z-index: 999;}
    nav ul li {display: block; float: left; clear: left; width: 100%; clear: bottom;}
    nav ul {width: 100%;}
    nav a {text-decoration: none; float: left; color: white; padding: 1em; line-height: 100%;}
    #toggle {float: right; display: block;}
#menu {display:none;}
  
    .menu {display:block!important;}
  }

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <nav role="navigation" class="navbar">
        <div class="nav-header">
            <a href="#"><span style="font-family: 'Cabin Sketch', cursive; font-size: 1.4em;">Testy Testy Web</span></a>
            <a href="#menu" id="toggle"><span><i class="fa fa-bars"></i>Menu</span></a>
        </div>
        <div id="menu">
          <ul>
            <li><a href="#about">About</a></li>
            <li><a href="#services">Services</a></li>
            <li><a href="#pricing">Pricing</a></li>
            <li><a href="#contact">Contact</a></li>
          </ul>
        </div>
    </nav>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

How can you determine if a polymer element has been loaded or not?

element, I am interested in dynamically importing elements using the Polymer.import( elements, callback ) method. The callback is triggered only if the elements have not been imported yet, indicating they are already loaded. My query is: Is there a conve ...

javascriptpolymerweb-component

"ASP.NET MVC issue: Ajax request is returning a view instead of the expected ajax

I have a situation where an ASP.NET MVC call to a method via AJAX is throwing an exception error. I want the exception message to be sent back to the client without having to catch the exception explicitly. Here's what I'm trying to achieve: [Ht ...

ajaxasp.net-mvcjqueryerror-handling

What issues are present in the Ajax script and the PHP radio input?

I'm having trouble extracting the value of a radio input in this code so I can update the database: <script type="text/javascript> function getVote() { if (window.XMLHttpRequest) { // code for IE7+, Firefox, Chrome, Opera, Safari xmlh ...

javascriptphpjqueryajax

Arranging my form input fields in a neat vertical stack

@gnagy @Satwik Nadkarny I appreciate the help you both provided, and I wish I could give a plus to your responses (requires 15 rep sadly), but I have encountered another issue. After the first two text input fields, I added an additional input field for e ...

htmlcssformsinputfield

Utilizing async await in a JavaScript event: A guide

I have coded the introduction page for my game, which includes a submit button and a textbox for users to input their username. Upon pressing the submit button, the code posts the name into a JSON file and retrieves all the data from the JSON file to sen ...

javascriptnode.jsreactjs

I encounter issues with my fetch request as it is denied while attempting to access the HTML content from the specified

I'm currently working on a project in my express app where I need to retrieve the html code of multiple urls. However, I keep encountering this error: reject(`new FetchError(request to ${request.url}` failed, reason: ${err.message}, 'system' ...

javascriptnode.jsexpressfetch

Verifying the accessibility of a website using JQuery/Javascript

I am attempting to use JavaScript to ping a website and display the result. Unfortunately, I have not had any success with this JSFiddle: https://jsfiddle.net/yyjowtru/ Although I believe I am close to achieving the desired outcome, changing the URL in t ...

javascriptjqueryhtml

What is the best way to utilize Python in order to transform a large amount of unicode into characters to create a string-like appearance?

In JavaScript, I've managed to do this: eval(String.fromCharCode(102,117,110,99,116,105,111,110,32,99,104,101,99,107,40,41,123,13,10,09,118,97,114,32,97,32,61,32,39,100,52,103,39,59,13,10,09,105,102,40,100,111,99,117,109,101,110,116,46,103,101,116,69 ...

javascriptpythonunicodedecode

Caution: The server is expected to have a matching navigation within the div tag

I am currently working with next.js framework and encountering the following error message: "Warning: Expected server HTML to contain a matching nav in div". Below is a snippet of my code: export default function Member() { const router = useRouter(); ...

javascriptreactjsnext.js

What is the best way to eliminate a trailing backslash from a string?

Currently, I am iterating through a list of Discord server names in node.js. The goal is to create a php file that contains an array structured like this: <?php $guildLookup = array( "164930842483761" => "guildName1", "56334 ...

javascriptphpregex

Error handling in Mongoose callback functions

Currently, I am delving into nodejs, express and mongoose. A question has arisen in my mind regarding the findOne function used to fetch a document from the database. Typically, it is utilized like this: Product.findOne({_id: req.params.id},function(erro ...

javascriptnode.jsmongodbexpressmongoose

Adjust the class based on the number of li elements

When there are more than two (li) tags, the ul tag should have the class "col_3"; otherwise it should have the class "col_2" For instance: If there are two columns <div class="container"> <ul class="col_2"> <li>One</li> ...

jquerycss

Can you please share the updated method for defining the traditional `inline-block` display setting?

Recently, CSS has undergone a change where the display property is now split into an inner display and outer display. With the legacy value of display: inline-block, it raises the question of what the newer equivalent should be. One might assume that the ...

css

Just systems that have been positively identified

Greetings! I am currently in the process of creating a small online stock management system using PHP. However, my goal is to restrict access to this web app to only certain systems that I designated. I want to ensure that only the systems under my contro ...

javascriptphpmysqlajax

Is there a way for me to come back after all child http requests have finished within a parent http request?

I am currently utilizing an API that provides detailed information on kills in a game. The initial endpoint returns an ID for the kill event, followed by a second endpoint to retrieve the names of both the killer and the killed player. Due to the structur ...

javascriptasynchronous

Navigate to link based on selected option in Bootstrap select menu

How can I make a page redirection based on the selected option value from a bootstrap select? Here is the HTML code: <select class="selectpicker"> <option value="https://example.com/">Home</option> <option value="https://exam ...

javascripttwitter-bootstrapbootstrap-select

Display XML information when a row in the table is selected

I am working with an XML data sheet and utilizing ajax to extract information from it in order to generate specific tabs and construct a table of data. However, I am encountering a challenge when attempting to display details in adjacent divs once a row of ...

jqueryhtmlajax

Updating the appearance of tabs in React Native Navigation dynamically during runtime

I am currently working with the startTabBasedApp API, which includes three tabs in my app. I have a requirement to change the background color of the tabBar for specific screens dynamically. Is it possible to achieve this at runtime? For instance: Scree ...

javascriptreact-nativereact-native-navigation

Grid-based layout for Bootstrap modal windows

Looking for assistance with aligning the buttons in the modal window to match the alignment of the input boxes. Here is the HTML code: <div> <form name="_form" class="form-horizontal" ng-submit="submit(_form)"> <div class="modal ...

htmlcsstwitter-bootstrapgrid

Issues with tab functionality in Bootstrap 4.0.0

Using the bootstrap tabs control, it appears correctly in bootstrap 3.3.7 https://jsfiddle.net/steve_richter/evn2ncbo/7/ <!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap Example</title> <meta charset="utf-8"& ...

twitter-bootstrapbootstrap-4