Home/ Questions/Q 3631890
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-19T00:27:20+00:00

I’ve done a simple menu using some HTML, CSS and Javascript. The main idea

  • 0

I’ve done a simple menu using some HTML, CSS and Javascript. The main idea is that it should be hided until the user click on it, but the problem is that it won’t start the page hidden and nothing happens when I click, just like if the Javascript won’t active. Here is part of my files:

index.html

<head>
<link rel="stylesheet" type="text/css" href="style/sample.css" />
</head>
<body>
<script src="js/menu.js" type="text/javascript"></script>

<div id="container">
    <div id="header">
        <center>
            <div class="leftMenu" onclick="toggleMenu()">Menu</div>
            <a href="./"><h1>Test</h1></a>
        </center>
        <ul>
            <li><a href="about.htm">About</a></li>
            <li><a href="http://developmentcloud.blogspot.com/">Blog</a></li>
            <li><a href="contact.htm">Contact</a></li>
        </ul>
    </div>
</div>
</body>

menu.js

$(document).ready(function() {
    $('#header ul').addClass('hide');
    $('#header').append('<div class="leftMenu" onclick="toggleMenu()">Menu</div>');
});

function toggleClass() {
    $('#header ul').toggleClass('hide');
    $('#header .leftMenu').toggleClass('pressed');
}

sample.css

#header ul.hide {
    display: none;
}

#header div.pressed {
    -webkit-border-image: url(graphics/button_clicked.png) 0 8 0 8;
}

What I’m making wrong and how I can correct it?

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    I think at least part of the problem is that the menu toggle div you’re creating is using the function toggleMenu() and not toggleClass().

    EDIT: I made a jsfiddle that shows the changes I would propose to make it work properly: http://jsfiddle.net/avidal/dDDKz/

    The key is to remove the onclick attributes, and use jQuery to handle the event binding for all current, and future matching elements:

    $(document).ready(function() {
    $('#header ul').addClass('hide');
    $('#header').append('<div class="leftMenu">Menu</div>');

    $('#header div.leftMenu').live('click', toggleClass);
});

function toggleClass() {
    $('#header ul').toggleClass('hide');
    $('#header .leftMenu').toggleClass('pressed');
}
    • 0