HTML Help: 3 Buttons displaying 3 lists in 1 Bar

Rainagul

Rainagul

Rainagul

Associate
Joined
4 Aug 2009
Posts
1,727
Location
Canterbury
Hi All,

I will just preface this post with the fact that my knowledge of HTML/CSS is quite basic. It's usually enough to achieve what I need but I've ran into a problem today and need some advice on the following.

What I'm trying to achieve:

help.png


Basically I'm building a feature for my site that will need to display a different menu (horizontal list) depending on which button is pressed.

So as you can see in the diagram above, button 1 would be linked to menu 1, button 2 to menu 2 etc.

My idea to solve this was:

If button 1 is pressed, it hides menu 2 & 3 , leaving menu 1 to be shown.
If button 2 is pressed, it hides menu 1 & 3, leaving menu 2 to be shown.
If button 3 is pressed, it hides menu 1 & 2, leaving menu 3 to be shown.

I already have all the lists ready to go, my problem is I don't know enough HTML off the top of my head to code what I stated above?

Could anyone point me in the right direction?

Also, would this be possible to do without having to reload the page each time?

Cheers
 
Yes you can do it without loading the page each time with JavaScript. Something like this is easier to do with jQuery (JavaScript library which is used on a lot of websites these days). I'd do something like this:

Code: 
$(document).ready(function(){
    $("#button1").click(function(){
        $("#menu-selector").replaceWith('html of menu1 goes here');
    });
    $("#button2").click(function(){
        $("#menu-selector").replaceWith('html of menu2 goes here');
    });
    $("#button3").click(function(){
        $("#menu-selector").replaceWith('html of menu3 goes here');
    });
});
 
Thanks for the response Mailman.

Got a few more questions for you though.

Long story short for the site I'm developing, due to some restrictions, I can only insert HTML by itself and link CSS/JS/PhP files through a link in the HTML.

So how would what you have written look if it was being linked from HTML? (sorry for being a noob, I have no experience with JS)

Also, you wrote "#button1" above. Where would I need to define what button1 is? (I'm guessing in the HTML, but just checking)
 
To get jquery running do this - typically in the footer of the page but still within the body tag:

Code: 
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js" type="text/javascript"></script>

Or you can host the jquery file on your site and link to it like:

Code: 
<script src="/path/to/your/scripts/jquery.min.js" type="text/javascript"></script>

Each button or image should be given an id="buttonX" where X is the button number (if following the given example.

ie.

Code: 
<a href="#"><img src="/someimage.gif" width="10" height="10" alt="example" id="button1" /></a>

The # tells jquery that it is looking for an element id. You do not include the # in the above code.
 
Last edited:
You should never really have JavaScript or CSS in your html markup and that's quite normal. I'm sure there are exceptions to the rule which escape me at the moment but you should never really do it unless you have a good reason.

With regards to including the JavaScript file have a look at the below markup.

Code: 
<!DOCTYPE html>
<html>
    <head>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>
        <script src"/path/to/file/menu.js"></script>
        <meta charset="UTF-8">
        <title>My website</title>
    </head>
    <body>
        <!--Body goes here-->
    </body>
</html>

Put all the code I wrote above in your defined js file.

Note there are actual several ways of doing it but if your writing html5 (defined by the doctype "html" as above), which you should use unless you have a good reason if you are writing a new site, that's the way to do it. #button1 is an example of an id which you would use to select something. For most things you should use a class to select things as you can use them more than once on a page. "#" denotes an id and a "." denotes a class. If you are sure it will be unique on the page, use an id. As for how to define it in your markup, it would be something like this:

Code: 
<button id="button1">Click me</button>
 
You must log in or register to reply here.
Back
Top Bottom