Welcome!

By registering with us, you'll be able to discuss, share and private message with other members of our community.

SignUp Now!
  • 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.
    • You can also use markdown to share your code. When using markdown your code will be automatically converted to BBCode. For help with markdown check out the markdown guide.
    • 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

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
 
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:
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'
                });
 
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
 

New Threads

Latest posts

Buy us a coffee!

Back
Top Bottom