Bleach984
07-27-2006, 08:23 PM
1) Script Title:
Chromemenu & slashdot-style menu
2) Script URL (on DD):
http://www.dynamicdrive.com/dynamicindex1/chrome/index.htm & http://www.dynamicdrive.com/dynamicindex1/slashdot.htm
3) Describe problem:
My problem is more of a combo problem.
I have combined the 2 menu styles. The chrome menu being the promary and the slashdot menu being the menu that gets displayed once the chrome menu displays it's dropdown.
My problem is that when one of the slashdot menu collapses the Chrome menu hides itself and you then have to move the mouse over the chrome menu to get the slashdot menu. The slashdot menu is the basic slashdot menu except that when you open up the chrome drop-down the submenu the you collapsed will be collapsed.
Does anyone know of a way to make it so that when you click on the submenu and it collapses, the drop-down will not hide itself?
Here is the .css file
.sdmenu {
width: 150px;
font-family: Tahoma;
font-size: 16px;
padding-bottom: 10px;
background: White no-repeat right bottom;
color: Black;
}
.sdmenu .title, .sdmenu .titlehidden{
display: block;
padding: 5px 0;
font-weight: bold;
color: White;
background: #EEE url(title.gif) repeat-x;
}
.sdmenu .title {
border-bottom: 0px solid Blue;
}
.sdmenu .arrow {
margin-left: 10px;
margin-right: 7px;
arrow-olor: Blue;
}
.sdmenu .titlehidden {
border-bottom: none;
}
.sdmenu #top {
background: url(toptitle.gif) no-repeat;
}
.sdmenu .submenu {
overflow: hidden;
}
.sdmenu .submenu a {
padding: 1px 1px;
text-indent: 07px;
background: white url(Hover2.gif) ;
display: block;
border-bottom: 10px solid #EEE;
color: White;
text-weight: bold;
font-size:13px;
border-top:10px;
}
.sdmenu .submenu a:hover {
background : white url(Hover2arrow.gif) ;
color: white;
}
.chromestyle{
width: 99%;
font-weight: bold;
}
.chromestyle:after{ /*Add margin between menu and rest of content in Firefox*/
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.chromestyle ul{
border: 1px solid #BBB;
width: 100%;
background: url(chromebg.gif) center center repeat-x; /*THEME CHANGE HERE*/
padding: 4px 0;
margin: 0;
text-align: center; /*set value to "left", "center", or "right"*/
}
.chromestyle ul li{
display: inline;
}
.chromestyle ul li a{
color: #494949;
padding: 4px 7px;
margin: 0;
text-decoration: none;
border-right: 1px solid #DADADA;
}
.chromestyle ul li a:hover{
background: url(chromebg-over.gif) center center repeat-x; /*THEME CHANGE HERE*/
}
.chromestyle ul li a[rel]:after{ /*HTML to indicate drop down link*/
content: " v";
/*content: " " url(downimage.gif); /*uncomment this line to use an image instead*/
}
/* ######### Style for Drop Down Menu ######### */
.dropmenudiv{
position:absolute;
top: 0;
border: 1px solid #BBB; /*THEME CHANGE HERE*/
border-bottom-width: 1;
font:normal 12px Tahoma;
line-height:18px;
z-index:100;
background-color: white;
width: 150px;
visibility: hidden;
filter: progid:DXImageTransform.Microsoft.Shadow(color=#CACACA,direction=135,strength=4); /*Add Shadow in IE. Remove if desired*/
}
.dropmenudiv a{
width: auto;
display: block;
text-indent: 3px;
border-bottom: 1px solid #BBB; /*THEME CHANGE HERE*/
padding: 2px 0;
text-decoration: none;
font-weight: bold;
color: black;
}
* html .dropmenudiv a{ /*IE only hack*/
width: 100%;
}
.dropmenudiv a:hover{ /*THEME CHANGE HERE*/
background-color: #F0F0F0;
}
Chromemenu & slashdot-style menu
2) Script URL (on DD):
http://www.dynamicdrive.com/dynamicindex1/chrome/index.htm & http://www.dynamicdrive.com/dynamicindex1/slashdot.htm
3) Describe problem:
My problem is more of a combo problem.
I have combined the 2 menu styles. The chrome menu being the promary and the slashdot menu being the menu that gets displayed once the chrome menu displays it's dropdown.
My problem is that when one of the slashdot menu collapses the Chrome menu hides itself and you then have to move the mouse over the chrome menu to get the slashdot menu. The slashdot menu is the basic slashdot menu except that when you open up the chrome drop-down the submenu the you collapsed will be collapsed.
Does anyone know of a way to make it so that when you click on the submenu and it collapses, the drop-down will not hide itself?
Here is the .css file
.sdmenu {
width: 150px;
font-family: Tahoma;
font-size: 16px;
padding-bottom: 10px;
background: White no-repeat right bottom;
color: Black;
}
.sdmenu .title, .sdmenu .titlehidden{
display: block;
padding: 5px 0;
font-weight: bold;
color: White;
background: #EEE url(title.gif) repeat-x;
}
.sdmenu .title {
border-bottom: 0px solid Blue;
}
.sdmenu .arrow {
margin-left: 10px;
margin-right: 7px;
arrow-olor: Blue;
}
.sdmenu .titlehidden {
border-bottom: none;
}
.sdmenu #top {
background: url(toptitle.gif) no-repeat;
}
.sdmenu .submenu {
overflow: hidden;
}
.sdmenu .submenu a {
padding: 1px 1px;
text-indent: 07px;
background: white url(Hover2.gif) ;
display: block;
border-bottom: 10px solid #EEE;
color: White;
text-weight: bold;
font-size:13px;
border-top:10px;
}
.sdmenu .submenu a:hover {
background : white url(Hover2arrow.gif) ;
color: white;
}
.chromestyle{
width: 99%;
font-weight: bold;
}
.chromestyle:after{ /*Add margin between menu and rest of content in Firefox*/
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.chromestyle ul{
border: 1px solid #BBB;
width: 100%;
background: url(chromebg.gif) center center repeat-x; /*THEME CHANGE HERE*/
padding: 4px 0;
margin: 0;
text-align: center; /*set value to "left", "center", or "right"*/
}
.chromestyle ul li{
display: inline;
}
.chromestyle ul li a{
color: #494949;
padding: 4px 7px;
margin: 0;
text-decoration: none;
border-right: 1px solid #DADADA;
}
.chromestyle ul li a:hover{
background: url(chromebg-over.gif) center center repeat-x; /*THEME CHANGE HERE*/
}
.chromestyle ul li a[rel]:after{ /*HTML to indicate drop down link*/
content: " v";
/*content: " " url(downimage.gif); /*uncomment this line to use an image instead*/
}
/* ######### Style for Drop Down Menu ######### */
.dropmenudiv{
position:absolute;
top: 0;
border: 1px solid #BBB; /*THEME CHANGE HERE*/
border-bottom-width: 1;
font:normal 12px Tahoma;
line-height:18px;
z-index:100;
background-color: white;
width: 150px;
visibility: hidden;
filter: progid:DXImageTransform.Microsoft.Shadow(color=#CACACA,direction=135,strength=4); /*Add Shadow in IE. Remove if desired*/
}
.dropmenudiv a{
width: auto;
display: block;
text-indent: 3px;
border-bottom: 1px solid #BBB; /*THEME CHANGE HERE*/
padding: 2px 0;
text-decoration: none;
font-weight: bold;
color: black;
}
* html .dropmenudiv a{ /*IE only hack*/
width: 100%;
}
.dropmenudiv a:hover{ /*THEME CHANGE HERE*/
background-color: #F0F0F0;
}