PDA

View Full Version : how to use this dropdown script



ModernRevolutions
02-13-2009, 06:33 PM
1) Script Title: Chrome CSS Drop Down Menu (v2.5)

2) Script URL (on DD): http://www.dynamicdrive.com/dynamicindex1/chrome/index.htm

3) Describe problem: Everytime I put the code up in my header.php document it always comes up with bullets. Like this: click here for example (http://www.modernrevolutions.vivid-avenue.net/index2.php). What am I doing wrong?

ModernRevolutions
02-13-2009, 07:02 PM
here is the code I am using:

<div class="chromestyle" id="chromemenu">
<ul>
<li><a href="http://www.dynamicdrive.com">Home</a></li>
<li><a href="#" rel="dropmenu1">Resources</a></li>
<li><a href="#" rel="dropmenu2">News</a></li>
</ul>
</div>

<!--1st drop down menu -->
<div id="dropmenu1" class="dropmenudiv">
<a href="http://www.dynamicdrive.com/">Dynamic Drive</a>
<a href="http://www.cssdrive.com">CSS Drive</a>
<a href="http://www.javascriptkit.com">JavaScript Kit</a>
</div>


<!--2nd drop down menu -->
<div id="dropmenu2" class="dropmenudiv" style="width: 150px;">
<a href="http://www.cnn.com/">CNN</a>
<a href="http://www.msnbc.com">MSNBC</a>
<a href="http://news.bbc.co.uk">BBC News</a>
</div>

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

Snookerman
02-13-2009, 08:04 PM
Where exactly is the menu on your page? I can't find it.

ModernRevolutions
02-13-2009, 08:32 PM
I took it down for a breif second to fix the layout it self. Ill put it back up.

Snookerman
02-13-2009, 08:37 PM
The beginning of your page is missing. That is probably why there is no link to your chromestyle.css file. Make sure you use the same doctype as the one used on the demo page.

Good luck!

ModernRevolutions
02-13-2009, 08:40 PM
I don't understand what your trying to say.

ModernRevolutions
02-13-2009, 08:43 PM
Oh! I got it lol wow i feel dumb Thanks! Now how to to move the bar? Because I want it right under the header. But everytime i try and put it into a div it doesn't work :/

Snookerman
02-13-2009, 08:56 PM
Change this:

div#headerdiv {
background-image:url(http://www.modernrevolutions.vivid-avenue.net/layout/bell/omfg3.jpg);
border:0 solid;
height:300px;
left:282px;
position:absolute;
top:50px;
width:699px;
}
to this:

div#headerdiv {style2.css (line 209)
background-image:url(http://www.modernrevolutions.vivid-avenue.net/layout/bell/omfg3.jpg);
border:0 solid;
height:300px;
width:699px;
margin: 0 auto;
}

Good luck!

ModernRevolutions
02-13-2009, 08:59 PM
Now my header disappeared :/ lol and is there a way to make is skinner? So if fits in the white area and doesn't go across the whole page?

Snookerman
02-13-2009, 09:04 PM
Sorry, I copied from firebug and forgot to remove the file name, remove the highlighted:

div#headerdiv {style2.css (line 209)
background-image:url(http://www.modernrevolutions.vivid-avenue.net/layout/bell/omfg3.jpg);
border:0 solid;
height:300px;
width:699px;
margin: 0 auto;
}
so you get this:

div#headerdiv {
background-image:url(http://www.modernrevolutions.vivid-avenue.net/layout/bell/omfg3.jpg);
border:0 solid;
height:300px;
width:699px;
margin: 0 auto;
}

Good luck!

ModernRevolutions
02-13-2009, 09:06 PM
Its perfect! Thanks!!! :)

Snookerman
02-13-2009, 09:09 PM
You're welcome, glad to help!

Good luck with your site!

ModernRevolutions
02-13-2009, 09:11 PM
GAH! one last thing. How do i remove the down arrow but have it still drop down when you hover over it?

Snookerman
02-13-2009, 09:25 PM
Find this code in your chrome.js file on line 185 and remove the highlighted:

menuitems[i].innerHTML=menuitems[i].innerHTML+" "+this.dropdownindicator

Good luck!

ModernRevolutions
02-13-2009, 11:56 PM
I removed it and now the drop down menus aren't well dropping down lol

Snookerman
02-14-2009, 07:27 AM
That's because you didn't remove it all, you missed a plus sign, remove it:

menuitems[i].innerHTML=menuitems[i].innerHTML+


Good luck!

ModernRevolutions
02-21-2009, 06:04 AM
Okay im trying to use this on my friend's site but i forgot what i did lol and now idk what im missing :/ can you help? here is her link:
http://www.vivid-avenue.net/

Snookerman
02-21-2009, 08:21 AM
She seems to have closed a script tag in the wrong place:

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

/***********************************************
* Chrome CSS Drop Down Menu- (c) Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for full source code
***********************************************/


<div class="chromestyle" id="chromemenu">
<ul>
<li><a href="http://www.dynamicdrive.com">Home</a></li>
<li><a href="#" rel="dropmenu1">Resources</a></li>
<li><a href="#" rel="dropmenu2">News</a></li>
</ul>
</div>

<!--1st drop down menu -->
<div id="dropmenu1" class="dropmenudiv">
<a href="http://www.dynamicdrive.com/">Dynamic Drive</a>
<a href="http://www.cssdrive.com">CSS Drive</a>
<a href="http://www.javascriptkit.com">JavaScript Kit</a>
</div>

<!--2nd drop down menu -->
<div id="dropmenu2" class="dropmenudiv" style="width: 150px;">
<a href="http://www.cnn.com/">CNN</a>
<a href="http://www.msnbc.com">MSNBC</a>
<a href="http://news.bbc.co.uk">BBC News</a>
</div>

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

</script>
Should be:

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

/***********************************************
* Chrome CSS Drop Down Menu- (c) Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for full source code
***********************************************/

</script>

<div class="chromestyle" id="chromemenu">
<ul>
<li><a href="http://www.dynamicdrive.com">Home</a></li>
<li><a href="#" rel="dropmenu1">Resources</a></li>
<li><a href="#" rel="dropmenu2">News</a></li>
</ul>
</div>

<!--1st drop down menu -->
<div id="dropmenu1" class="dropmenudiv">
<a href="http://www.dynamicdrive.com/">Dynamic Drive</a>
<a href="http://www.cssdrive.com">CSS Drive</a>
<a href="http://www.javascriptkit.com">JavaScript Kit</a>
</div>

<!--2nd drop down menu -->
<div id="dropmenu2" class="dropmenudiv" style="width: 150px;">
<a href="http://www.cnn.com/">CNN</a>
<a href="http://www.msnbc.com">MSNBC</a>
<a href="http://news.bbc.co.uk">BBC News</a>
</div>

<script type="text/javascript">
cssdropdown.startchrome("chromemenu")
</script>
There could be other issues, but take care of this first.

Good luck!

ModernRevolutions
02-21-2009, 07:05 PM
Okay I did that and now its still not working. :/ Could the alignment code you gave us before be interfering?

Snookerman
02-21-2009, 07:16 PM
I suggest you validate the page (http://validator.w3.org/check?verbose=1&uri=http%3A%2F%2Fwww.vivid-avenue.net%2F) first since there are many mistakes such as double title and doctype tags and unopened close tags. If the problem still remains after that, it would be much easier to target it.

Good luck!