PDA

View Full Version : Removing Spaces in Accordion Menu



Rinne
01-13-2011, 08:10 PM
1) Script Title:

2) Script URL (on DD): http://www.dynamicdrive.com/dynamicindex17/ddaccordionmenu-urban.htm

3) Describe problem: I'm using your code here (http://family-tradition.proboards.com/index.cgi), and I was wondering if there was any way to remove the blank spaces in between the cells/bars (they're marked by arrows in this image (http://i55.tinypic.com/k3ssk8.png).) Any solution would be much appreciated.

CODE:


<left>
<div style="top: 25px; left: 50px; position: fixed;"><img src="http://i56.tinypic.com/206bk36.png">

<div style="margin-top: -13px;"><script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>

<script type="text/javascript" src="http://www.dynamicdrive.com/dynamicindex17/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: "headerbar", //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: "normal", //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">

.urbangreymenu{
width: 300px; /*width of menu*/
}

.urbangreymenu .headerbar{
font: 10px georgia bold;
color: white;
background: #b2b2b2 url(arrowstop.gif) no-repeat 8px 6px; /*last 2 values are the x and y coordinates of bullet image*/
margin-bottom: 0; /*bottom spacing between header and rest of content*/
text-transform: lowercase;
padding: 7px 0 7px 7px; /*31px is left indentation of header text*/
}

.urbangreymenu .headerbar a{
text-decoration: none;
color: white;
display: block;
}

.urbangreymenu ul{
list-style-type: none;
margin: 0;
padding: 0;
margin-bottom: 0; /*bottom spacing between each UL and rest of content*/
}

.urbangreymenu ul li{
padding-bottom: 2px; /*bottom spacing between menu items*/
}

.urbangreymenu ul li a{
font: normal 12px Arial;
color: black;
background: #E9E9E9;
display: block;
padding: 5px 0;
line-height: 17px;
padding-left: 8px; /*link text is indented 8px*/
text-decoration: none;
}

.urbangreymenu ul li a:visited{
color: black;
}

.urbangreymenu ul li a:hover{ /*hover state CSS*/
color: white;
background: black;
}

</style>

<div class="urbangreymenu">

<h3 class="headerbar"><font color="#942c2c"></font> Plot</h3>
<ul class="submenu">
<div class="allmyfriends">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed fringilla tristique mi nec semper. Suspendisse tincidunt tortor sed enim cursus auctor. Proin molestie tempus tincidunt. Pellentesque non congue ligula. Aenean cursus dui vel purus condimentum congue. Sed ipsum leo, lacinia et condimentum ac, tempor ut ligula. Nam rhoncus, justo in viverra vehicula, mi neque volutpat augue, eget suscipit justo justo id nisl. Nunc vitae est vel lectus sollicitudin ornare. Phasellus non leo in nunc volutpat mattis ultrices in lacus. Sed ut nisl id mauris consectetur sodales sed sed nisl. Morbi convallis ultricies tincidunt. Quisque rhoncus tempus orci, nec sollicitudin odio feugiat sed. Integer erat lectus, consequat sit amet semper quis, venenatis varius est. Sed hendrerit dui ac est fermentum commodo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</div>
</ul>

<h3 class="headerbar"> Plot</h3>
<ul class="submenu">
<div class="allmyfriends">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed fringilla tristique mi nec semper. Suspendisse tincidunt tortor sed enim cursus auctor. Proin molestie tempus tincidunt. Pellentesque non congue ligula. Aenean cursus dui vel purus condimentum congue. Sed ipsum leo, lacinia et condimentum ac, tempor ut ligula. Nam rhoncus, justo in viverra vehicula, mi neque volutpat augue, eget suscipit justo justo id nisl. Nunc vitae est vel lectus sollicitudin ornare. Phasellus non leo in nunc volutpat mattis ultrices in lacus. Sed ut nisl id mauris consectetur sodales sed sed nisl. Morbi convallis ultricies tincidunt. Quisque rhoncus tempus orci, nec sollicitudin odio feugiat sed. Integer erat lectus, consequat sit amet semper quis, venenatis varius est. Sed hendrerit dui ac est fermentum commodo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</div>
</ul>

<h3 class="headerbar"> Plot</h3>
<ul class="submenu">
<div class="allmyfriends">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed fringilla tristique mi nec semper. Suspendisse tincidunt tortor sed enim cursus auctor. Proin molestie tempus tincidunt. Pellentesque non congue ligula. Aenean cursus dui vel purus condimentum congue. Sed ipsum leo, lacinia et condimentum ac, tempor ut ligula. Nam rhoncus, justo in viverra vehicula, mi neque volutpat augue, eget suscipit justo justo id nisl. Nunc vitae est vel lectus sollicitudin ornare. Phasellus non leo in nunc volutpat mattis ultrices in lacus. Sed ut nisl id mauris consectetur sodales sed sed nisl. Morbi convallis ultricies tincidunt. Quisque rhoncus tempus orci, nec sollicitudin odio feugiat sed. Integer erat lectus, consequat sit amet semper quis, venenatis varius est. Sed hendrerit dui ac est fermentum commodo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</div>
</ul>

</div></div><div style="border-top: 10px solid #f0f1ed;"> </div></div></left>

<script type="text/javascript">
<!--
/* Welcome Table Basic Customize by SubDevo */
/* Global Header - Please leave this header intact. Do not repost */
/* http://interoceandesigns.proboards.com or http://lsdp.proboards.com */

var wWdth=700; // Welcome Table Width.
/* 1=Yes, 0=No for the Options Below. */
var wTrans=0; // Transparent Welcome Table?
var mTrans=1; // Transparent Menu Bar?
var moveAds=0; // Banner Below Ads?
var rSpc=0; // Remove Space Above Banner?
var rBrdrs=1; // Remove Borders?
var rTitle=1; // Remove Forum Title?
var rHeyX=1; // Remove "Hey X" message?
var rHome=1; // Remove " Home "?
var rBraces=1; // Remove "[]" From Menu Buttons?
var rBan=1; // Remove Banner? (only Menu bar will be visible)
var rMenu=0; // Remove Menu Bar?

var tb=gT("table")[0]; var tm=gT("td")[5]; var tn=tb.rows[0].getElementsByTagName("td");
tb.width=wWdth; if(rBrdrs){tb.cellSpacing="0";}
if(wTrans){tT(tb); for(var x=0;x<tn.length;x++){tT(tn[x]);}}
if(mTrans){tT(tb); tm.className=""; tT(tm);}
if(rBraces){tm.innerHTML=tm.innerHTML.replace(/(\[|\])/gi,"");}
gN(rSpc,"br",0); gN(rHeyX,"td",2); gN(rTitle,"font",0); gN(rHome,"font",1); gN(rMenu,"tr",2); gN(rBan,"tr",1);
if(moveAds){ document.write('<span id="wTbl"></span>');
var wTbl=document.getElementById("wTbl");
wTbl.parentNode.replaceChild(tb,wTbl);
} function gT(n){var h=document.getElementsByTagName(n);return h;}
function gN(x,n,i){if(x){(gT(n))[i].style.display="none";}}
function tT(n){n.style.backgroundColor="transparent";}
// -->
</script>

<style type="text/css">
body {
padding-left: 300px;
}

html {
overflow-y: scroll;
}

.allmyfriends {
background-color: #a6a6a6;
padding: 5px;
font-family: tahoma;
font-size: 10px;
text-align: justify;
text-transform: lowercase;
}

.allmyfriends:first-line {
color: ##942c2c;
}
</style>

ddadmin
01-15-2011, 05:55 AM
Try changing the line in red below inside your CSS for the menu:


.urbangreymenu .headerbar{
font: 10px georgia bold;
color: white;
background: #b2b2b2 url(arrowstop.gif) no-repeat 8px 6px; /*last 2 values are the x and y coordinates of bullet image*/
margin-bottom: 0; /*bottom spacing between header and rest of content*/
text-transform: lowercase;
padding: 4px 0 4px 4px;
}

to just:


margin:0;