Jump to content
  • Advertisement
Sign in to follow this  
Zero_Racer

[web] Side bar menu question

This topic is 4369 days old which is more than the 365 day threshold we allow for new replies. Please post a new topic.

If you intended to correct an error in the post then please contact us.

Recommended Posts

Hello, i am a biginner at web dev and i really love it. I have some questions concerning mainly on the menu. I want to know what it takes to have something like this sites menu, http://www.lineage2.com/ , if you dont want to look at it then this is what it does. it has the main topic menu names and if you press on one or more it slides down what ever is below it and shows the sub topics. i want to know what language it uses, javascript, CSS, PHP, and maybe a link to helpful guide to do that sort of thing. Thank you in advance for any help.

Share this post


Link to post
Share on other sites
Advertisement

The easy way: use some third-party (maybe open-source) controls to render them (like the panelbar control on telerik.com). Search for 'panelbar', although I don't think it will be easy to find a good-working free version.

The hard way: code it yourself using javascript / ajax.

Edo

Share this post


Link to post
Share on other sites
Start with the basic HTML:


<ul class="myNavigation">
<li onclick="navigationContent('content1')">News</li>
<ul id="content1">
<li><a href="#">Latest news</a></li>
<li><a href="#">Archives</a></li>
</ul>
<li onclick="navigationContent('content2')">Game</li>
<ul id="content2">
<li><a href="#">Overview</a></li>
<li><a href="#">Credits</a></li>
</ul>
</ul>


Add styling to hide at beginning:

<style type="text/css">
ul.myNavigation ul{
display: none;
}
</style>


And finally the javascript javascript:

<script language="javascript" type="text/javascript">
function navigationContent( content ) {
if(document.getElementById(content).style.display == 'none' ) {
// content is hidden
document.getElementById(content).style.display = 'block';
} else {
// content is shown
document.getElementById(content).style.display = 'none';
}
}
</script>




Make sure to add the javascript and css in the head of the html file.

Share this post


Link to post
Share on other sites
Thank you for the reponse it really helped, but could you also tell me how they made it semi-transparent, i think you can do it with CSS but im not too sure how.

Share this post


Link to post
Share on other sites
You have to use PNGs to achieve this because GIFs only support binary transparency, where a pixel is either transparent or it isn't. Firefox has no problem with transparency in PNGs but you have to use a filter in IE.

Lets just say its complicated.

Read A List Apart's PNG Opacity Article for more information.

Share this post


Link to post
Share on other sites
Sign in to follow this  

  • Advertisement
×

Important Information

By using GameDev.net, you agree to our community Guidelines, Terms of Use, and Privacy Policy.

Participate in the game development conversation and more when you create an account on GameDev.net!

Sign me up!