Edit Script, Please

**TheLink** · 02-07-2010, 07:39 PM

Re: Edit Script, Please

Originally posted by WSBlue View Post

Hi!
I got the script for MENU from Dynamic Drive.
I have edited it
but there are some, still don't know where to edit.
Can you please show me where to edit these: ?
1. want to get rid . black dot in front of the Sub Menu
2. the line at Sub Menu like : A B C
3. change font size both for Menu and Sub Menu
4. change font color both Menu and Sub Menu

Please take a look here:
iwork.tokobaik.com/a p p l e.html
(a p p l e - No Spaces)
Thanks a lot

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml2/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">

<head>

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

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

/***********************************************
* Accordion Content script- (c) Dynamic Drive DHTML code library (www.dynamicdrive.com)
* Visit http://www.dynamicDrive.com for hundreds of DHTML scripts
* This notice must stay intact for legal use
***********************************************/

</script>

<script type="text/javascript">

ddaccordion.init({
headerclass: "silverheader", //Shared CSS class name of headers group
contentclass: "submenu", //Shared CSS class name of contents group
revealtype: "mouseover", //Reveal content when user clicks or onmouseover the header? Valid value: "click", "clickgo", or "mouseover"
mouseoverdelay: 200, //if revealtype="mouseover", set delay in milliseconds before header expands onMouseover
collapseprev: true, //Collapse previous content (so only one open at any time)? true/false
defaultexpanded: [0], //index of content(s) open by default [index1, index2, etc] [] denotes no content
onemustopen: true, //Specify whether at least one header should be open always (so never all headers closed)
animatedefault: false, //Should contents open by default be animated into view?
persiststate: true, //persist state of opened contents within browser session?
toggleclass: ["", "selected"], //Two CSS classes to be applied to the header when it's collapsed and expanded, respectively ["class1", "class2"]
togglehtml: ["", "", ""], //Additional HTML added to the header when it's collapsed and expanded, respectively ["position", "html1", "html2"] (see docs)
animatespeed: "fast", //speed of animation: integer in milliseconds (ie: 200), or keywords "fast", "normal", or "slow"
oninit:function(headers, expandedindices){ //custom code to run when headers have initalized
//do nothing
},
onopenclose:function(header, index, state, isuseractivated){ //custom code to run whenever a header is opened or closed
//do nothing
}
})

</script>

<style type="text/css">

.*****menu{
margin: 5px 0;
padding: 0;
width: 170px; /*width of menu*/
border: 1px solid #9A9A9A;
}

.*****menu div.silverheader a{
background: black url(silvergradient.gif) repeat-x center left;
font: bold 12px Tahoma, "Lucida Grande", "Trebuchet MS", Helvetica, sans-serif;
color: white;
display: block;
position: relative; /*To help in the anchoring of the ".statusicon" icon image*/
width: auto;
padding: 5px 0;
padding-left: 8px;
text-decoration: none;
}

.*****menu div.silverheader a:visited, .*****menu div.silverheader a:active{
color: white;
}

.*****menu div.selected a, .*****menu div.silverheader a:hover{
background-image: url(silvergradientover.gif);
color: white;
}

.*****menu div.submenu{ /*DIV that contains each sub menu*/
background: white;
padding: 5px;
height: 300px; /*Height that applies to all sub menu DIVs. A good idea when headers are toggled via "mouseover" instead of "click"*/
}

</style>

</head>

<body>

<div class="*****menu">
<div class="silverheader"><a href="http://www.dynamicdrive.com">A</a></div>
<div class="submenu">
<li><a href="http://www.dynamicdrive.com/style/csslibrary/category/C1/">A1</a></li>
<li><a href="http://www.dynamicdrive.com/style/csslibrary/category/C2/">A2</a></li>
<li><a href="http://www.dynamicdrive.com/style/csslibrary/category/C4/">A3</a></li>
<li><a href="http://www.dynamicdrive.com/style/csslibrary/category/C6/">A4</a></li>
<li><a href="http://www.dynamicdrive.com/style/csslibrary/category/C5/">A5</a></li>
<li><a href="http://www.dynamicdrive.com/style/csslibrary/category/C7/">A6</a></li>
<li><a href="http://www.dynamicdrive.com/style/csslibrary/category/C8/">A7</a></li>
<li><a href="http://www.dynamicdrive.com/style/csslibrary/all/">A8</a></li>
</div>
<div class="silverheader"><a href="http://www.dynamicdrive.com/style/" >B</a></div>
<div class="submenu">
<li><a href="http://www.dynamicdrive.com/style/csslibrary/category/C8/">B1</a></li>
<li><a href="http://www.dynamicdrive.com/style/csslibrary/all/">B2</a></li>
</div>
<div class="silverheader"><a href="http://www.javascriptkit.com">C</a></div>
<div class="submenu">
<li><a href="http://www.dynamicdrive.com/style/csslibrary/category/C1/">Lain1</a></li>
<li><a href="http://www.dynamicdrive.com/style/csslibrary/all/">C2</a></li>
</div>
<div class="silverheader"><a href="http://www.cssdrive.com">D</a></div>
<div class="submenu">
<li><a href="http://www.dynamicdrive.com/style/csslibrary/category/C8/">D1</a></li>
<li><a href="http://www.dynamicdrive.com/style/csslibrary/all/">D2</a></li>
<img src="http://i27.tinypic.com/sy7295.gif" />
</div>
<div class="silverheader"><a href="http://www.codingforums.com">E</a></div>
<div class="submenu">
<li><a href="http://www.dynamicdrive.com/style/csslibrary/category/E1/">Lain1</a></li>
<li><a href="http://www.dynamicdrive.com/style/csslibrary/all/">E2</a></li>
</div>
<div class="silverheader"><a href="http://www.codingforums.com">F</a></div>
<div class="submenu">
<li><a href="http://www.dynamicdrive.com/style/csslibrary/category/F1/">F1</a></li>
<li><a href="http://www.dynamicdrive.com/style/csslibrary/all/">F2</a></li>
</div>
</body>
</html>

I don't know if you have had this question answered yet or figured it out for yourself but I have the accordion menu too.

1. Im not sure about the A B C. I'm wondering why you have all these ****** (above in red), I'm presuming that you have added to the script yourself??. Perhaps thats the reason.

2. As for the "dots" (aka Bullets) remove all the tags <li></li> that you have before and after all the website url's. See example below:

<li><a href="http://www.blahblah.com></a></li>

This will remove the bullet but will bring everything adjacent to each other. So if you want the links to be underneath each other, do one of the following:

<a href="http://www.blahblah.com></a><p> (this is a paragraph break)
<a href="http://www.blahblah.com></a><br> (this is a single line break)

3&4. You can modify the text colour, font, size etc in this section here:

.*****menu div.silverheader a{
background: black url(silvergradient.gif) repeat-x center left;
font: bold 12px Tahoma, "Lucida Grande", "Trebuchet MS", Helvetica, sans-serif;
color: white;
display: block;
position: relative; /*To help in the anchoring of the ".statusicon" icon image*/
width: auto;
padding: 5px 0;
padding-left: 8px;
text-decoration: none;

NB: to modify the colour, you may need to use code for that. For example, the colour white is "#FFFFFF" and black is "#000000" and green is "#008040".

The other thing to is that in BV, you can't modify existing page HTML, you can only add to it. So you might have to do what I did and copy the entire HTML code into a HTML box and modify to suit (if you havent already done so).

Im a complete novice at HTML, scripts, Java etc but I downloaded CoffeeCup HTML Editor (trial version) which has helped me learn about html and basic coding to modify certain things. Great program to learn as everything you do, you can preview the result immediately and your not stuffing up your BV pages in the process.

Hope this helps.

**If a script expert comes along and looks at what I've just written and laughs.....well, at least I'm trying to help him!!**

**TheLink** · 02-07-2010, 07:47 PM

Re: Edit Script, Please

Yep, I just tried removing all the ******* you've added in and it removes the underline from A B C etc.

Let me know if you need more help, I can modify the script for you then give it to you to copy and paste into your HTML box.

Edit Script, Please

Edit Script, Please

Comment

Comment