I'm having trouble with my fullscreen menu. Is there something I missed when setting it up?

Question

I'm having trouble with my fullscreen menu. Is there something I missed when setting it up?

Hi there! I'm currently working on my website and I seem to have run into an issue with the code. I'm still new to coding, so I would appreciate some assistance in identifying where I went wrong. I've been going through the code diligently to make sure everything is as clean and refined as possible for others to review. Surprisingly, I haven't been able to spot any errors myself. Since I am a beginner when it comes to jQuery, I suspect that the problem lies in linking jQuery to the file or something along those lines, but I'm really not quite sure about this aspect yet.

    ISSUE SOLVED

jquery html css navigationbar

Answer 1

Answer №1

You can find all the CDN libraries you need at this URL. https://developers.google.com/speed/libraries/

Insert the library within your head tag.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>

Then, place your script inside the following code:

$(document).ready(function(){
     /// insert your script code here
 });

Here is an example:

  $(document).ready(function(){
         $(".menu-toggle").on('click', function() {
              $(this).toggleClass("on");
              $('.menu-section').toggleClass("on");
              $("nav ul").toggleClass('hidden');
        });
     });

Answer 2

You can find all the CDN libraries you need at this URL. https://developers.google.com/speed/libraries/

Insert the library within your head tag.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>

Then, place your script inside the following code:

$(document).ready(function(){
     /// insert your script code here
 });

Here is an example:

  $(document).ready(function(){
         $(".menu-toggle").on('click', function() {
              $(this).toggleClass("on");
              $('.menu-section').toggleClass("on");
              $("nav ul").toggleClass('hidden');
        });
     });

Answer 3

Answer №2

Ensure that you include jQuery and insert your custom JavaScript code after importing it.

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>

It is recommended to place your JavaScript code at the end of your HTML page, just before the </body> tag.

Answer 4

Ensure that you include jQuery and insert your custom JavaScript code after importing it.

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>

It is recommended to place your JavaScript code at the end of your HTML page, just before the </body> tag.

Answer 5

Answer №3

Make sure to include your click event inside the

$(document).ready(function(){ //click event goes here });

. Check out this sample code on JSFiddle to see if everything is functioning as intended.

It is important to confirm that you are correctly linking to the necessary JS files.

JSFIDDLE EXAMPLE

UPDATE

If your jQuery files are located in the main folders, you can link to them like this...

<script type="text/javascript" src="/jquery-1.11.3.min"></script>
<script type="text/javascript" src="/script.js"></script>

Remember to replace the first jQuery file with the correct version you are using. Place these scripts at the bottom of your website's footer.

Answer 6

Make sure to include your click event inside the

$(document).ready(function(){ //click event goes here });

. Check out this sample code on JSFiddle to see if everything is functioning as intended.

It is important to confirm that you are correctly linking to the necessary JS files.

JSFIDDLE EXAMPLE

UPDATE

If your jQuery files are located in the main folders, you can link to them like this...

<script type="text/javascript" src="/jquery-1.11.3.min"></script>
<script type="text/javascript" src="/script.js"></script>

Remember to replace the first jQuery file with the correct version you are using. Place these scripts at the bottom of your website's footer.

I'm having trouble with my fullscreen menu. Is there something I missed when setting it up?

Answer №1

Answer №2

Answer №3

Similar questions

Retrieve information from specific dates by using a datepicker tool

Unnecessary scrollbar appears in the Simple Material UI dialog demonstration

Tips on customizing label colors on a Donutchart using Google API

delaying the alteration of an image attribute following an AJAX call

Restrictions on the number of characters based on the size of fonts in an html list sc

When attempting to refresh, the global.Exp.Data.getLocalDataSet() function returns empty

What is the best way to attach to the beforeSubmit event of a dynamically loaded AJAX form in Yii?

getting data from asp.net gridview checkbox values

HTML & CSS: Modify background rectangle behind text to limit its size within the webpage dimensions

Using JQUERY for navigating through pages in a REST API while utilizing deferred functionality

What is the best place in Rails to add @media CSS tags?

Incorporating the fadeout technique in conjunction with the append() function

Using JavaScript to shift an image sideways upon clicking a hyperlink on the page

delete the initial background color assigned to the button

Use jQuery to gather all the values from an HTML select element

Present the received JSON objects in a visually pleasing manner

Modify text using JQuery when the span is clicked

Angular 2 component hierarchy with parent and child components

What is the best way to avoid having multiple files in a JavaScript file input when a user selects a new file?

Eliminate the Material Stepper heading