• Guest, before posting your code please take these rules into consideration:
    • It is required to use our BBCode feature to display your code. While within the editor click < / > or >_ and place your code within the BB Code prompt. This helps others with finding a solution by making it easier to read and easier to copy.
    • Don't share a wall of code. All we want is the problem area, the code related to your issue.
    To learn more about how to use our BBCode feature, please click here.

    Thank you, Code Forum.

HTML & CSS Need help with menu functionality

Kung Fu Yoda

New Coder
Hi Everyone

I have been coding my website over the past month in html (please don't judge). I do not know how to code with php and databases yet. so the problem I have is...

I tested every link and function throughout the entire process on my laptop using firefox to live preview my files and it was all working perfectly. Uploaded my files to my domain last night and for some reason the last file in my menu tree flakes out. The moment I click on the menu link it adds #menu at the back of the page address but does not open up the menu.

Please go have a look <<HERE>> and let me know. Please note that this is the last page in the sequence.

Any assistance would be appreciated
 

darioK

New Coder
You would need some Javascript to handle that click, currently what you are doing is using hypertext reference (href) to go to that menu.

Here is some basic code for menu expand functionality done in html with <script> tags:

HTML:
<a href="#" id ="expand">Expand me!</a>
<nav id="nav">
  <ul>
    <li>Home</li>
    <li>About</li>
    <li>Contact</li>
  </ul>
</nav>

<script>

let nav = document.querySelector('#nav');
nav.style.height = 0;
nav.style.transition = '0.3s ease'
nav.style.overflow = 'hidden'
let navExpand = document.querySelector('#expand')
let toggler = true;

navExpand.addEventListener("click", e => {
  if (!toggler) {
    nav.style.height = "0px";
    toggler = true;
  } else {
    nav.style.height = '100px';
    toggler = false;
  }
});

</script>


As long as you give your expand icon or whatever and id of 'expand' and what you want to expand an id of 'nav' it will work.
 
Last edited:

Kung Fu Yoda

New Coder
You would need some Javascript to handle that click, currently what you are doing is using hypertext reference (href) to go to that menu.

Here is some basic code for menu expand functionality done in html with <script> tags:
{...}
As long as you give your expand icon or whatever and id of 'expand' and what you want to expand an id of 'nav' it will work.
Thank you for the reply. I don't know if this will help.

This is an overview of the path tree on the site...

Primary - https://www.jaegerprojects.co.za/generator.jaegerprojects.co.za/index.html - menu works
Secondary - https://www.jaegerprojects.co.za/generator.jaegerprojects.co.za/generators/generators.html - menu works
https://www.jaegerprojects.co.za/generator.jaegerprojects.co.za/generators/phases.html - menu works
https://www.jaegerprojects.co.za/generator.jaegerprojects.co.za/generators/diesel2.html - menu works
https://www.jaegerprojects.co.za/generator.jaegerprojects.co.za/generators/BPD20S3.html - menu doesn't work

The exact same menu has been used through the entire site. Used a template.

This is the HTML code for the header and nav -

HTML:
<!-- Header -->
            <header id="header" class="alt">
                <div class="logo"><a href="http://www.jaegerprojects.co.za"><img src="images/logo.png" height="45px" alt="Jaeger Projects" /></a></div>
                <a href="#menu">Menu</a>
            </header>

        <!-- Nav -->
            <nav id="menu">
                <ul class="links">
                    <li><a href="index.html">Home</a></li>
                      <li><a href="about.html">About Us</a></li>
                      <li><a href="generators/generators.html">Generators</a></li>
                    <li><a href="solar/solar.html">Solar</a></li>
                    <li><a href="information.html">Information</a></li>
                    <li><a href="contact.html">Contact Us</a></li>
                </ul>
            </nav>

And this is the js I can spot for the menu...

JavaScript:
// Menu.
            $('#menu')
                .append('<a href="#menu" class="close"></a>')
                .appendTo($body)
                .panel({
                    delay: 500,
                    hideOnClick: true,
                    hideOnSwipe: true,
                    resetScroll: true,
                    resetForms: true,
                    side: 'right'
                });
 

Kung Fu Yoda

New Coder
UPDATE: I found the error in my ways... I somehow managed to enclose my jquery.min.js in comment brackets and didn't notice it :x3:

This is what I did...
HTML:
<!-- <script src="../assets/js/jquery.min.js"></script> -->
<script src="../../js/jquery-1.11.3.min.js"></script>

This was the fix

HTML:
<script src="../assets/js/jquery.min.js"></script>
<script src="../../js/jquery-1.11.3.min.js"></script> <---Removed
 
Top Bottom