Jump to content
xisto Community
miCRoSCoPiC^eaRthLinG

Need Help With JS/CSS Dropdown Menu

Recommended Posts

Hey guys,

I'm helping out a friend in designing a site for his business and got stuck with JS/CSS Dropdown menu. Searching around I found one of the easiest to implement scripts at Dynamic Drive.

 

I managed to implement the script partially, i.e. got the top menu showing up. Looked good so far. Here's the screenshot:

Posted Image

 

After defining the menu divs, you're supposed to call the script that performs the dropdown action using a code like this:

<script type="text/javascript">cssdropdown.startchrome("name_of_main_menu_div");</script>

When I call the function, my page layout gets totally garbled and the dropdown function never works. Here's how it looks like...

Posted Image

 

Do the web-design pros out here have an idea why it's getting messed up like this ? The example layout can be viewed at: http://forums.xisto.com/no_longer_exists/

Also attached along with this post is a zip containing the site files so far.

 

Any help will be greatly appreciated.

 

Cheers,

m^e

 

Site Files:

Share this post


Link to post
Share on other sites

There are just two things that need to be fixed, both in the index.html file. First of all, let's take a look at the header. Over there, you load the JavaScript file that contains the necessary function. You used the following code:

<script type="text/javascript" src="js/chrome.js">

However, this way, the text that goes after (including a big part of the HTML code) is inside the <script> tag and considered JavaScript. That's why you need to close the tag in the header:

<script type="text/javascript" src="js/chrome.js"></script>

OK, so we've got the whole page being displayed, but it's still not working. Why? Another JavaScript problem, except now it's about calling the function. After the menu, you did it like this:

<!-- <script type="text/javascript">cssdropdown.startchrome("chromemenu");</script> -->

As you probably know, <!-- and --> are used to indicate comments or code that will not be displayed/executed. By removing these, you get a fully functional menu ;)

<script type="text/javascript">cssdropdown.startchrome("chromemenu");</script>

There is one more thing, though. I'm sure you didn't put those comments without a reason - yes they should be around there, but like this:

<script type="text/javascript"><!--cssdropdown.startchrome("chromemenu");--></script>

We have to do this in order to deal with browsers that don't support JavaScript. Be careful, the code must be just like this, with a new line for each element, otherwise it would again be a comment, if you put it like this:

<script type="text/javascript"><!-- cssdropdown.startchrome("chromemenu"); --></script>

Since the starting and ending point for the comment are alone and in separate lines, a JavaScript browser will ignore them because those are not JS commands. Older browsers will comment the JS function, because they don't recognize the <script> tags.

Share this post


Link to post
Share on other sites

Great job pyost, first i try directly the code and nothing works, after make the corrections you give it works perfectly. Now, if you plan to validate your website to be xhtml 1.1 you need to remove the comment tags because if you dont your page do not pass the validation process and also, if you plan to be a valid xhtml 1.0 then you need to do some little modifications to conform the validation. The first modification you need to perform is to declare correctly the DOCTYPE because it is not correctly typed, you need to change this:

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN https://w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd xmlns="https://w3.org/1999/xhtml/;
to this:

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"   "https://w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd;	  <html xmlns="https://w3.org/1999/xhtml/;" lang="en" xml:lang="en">
BTW, m^e thanks for your code, i will modify it to use on another website, but dont worry, i will only use your page structure because is very simple and clean, not your data ;)

 

Best regards,

Share this post


Link to post
Share on other sites

Damn guys - that was such a silly blunder and got fixed in one go ;) Thanks to all of you... However, I'll be back with more questions soon.As of now, there's an issue with the site - do you know of any way to fix the footer below ? What I mean is that, if I stuff in a lot of content in the Center column, it expands below and covers up the footer. What's the CSS trick, that'll make it move down along with the content ??

Share this post


Link to post
Share on other sites

Ugh.. The way you created the layout is a bit confusing ;) I am sure the problem can be easily solved if you used floats for the sidebar. This way, however, I cannot think of a solution.

Share this post


Link to post
Share on other sites

I got the 3 column layout from one of the CSS Tutorial sites and the biggest advantage of my layout is that the Center column comes up first. That is a MUST if you're concerned about SE-Optimization of your pages.

 

The layout you've shown makes the two side columns come up first. Crawlers don't like that kinda sites ;) Otherwise it'd have been a good layout.

 

Any alternatives ???

Share this post


Link to post
Share on other sites

Well an old trick would be to make a div with the content in that you want to be searched..make it first in positoning then make it hidden...but I hear that some search engines penalise you for doing this..

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

×
×
  • Create New...

Important Information

Terms of Use | Privacy Policy | Guidelines | We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.