suckertree hoizontal menu css + javascript questions

[wtronic-germany]

Hi DD community!

Since three days I am reading here and work on my modified suckertree horizontal menu.

Now I am lost and have to ask for help:

need some help in css formating and maybe some fixings in the javascript code.


Question 1 ??? current site => link = black - how??? ":current"? :active?


Question 2 ??? this has been solved meanwhile, but now there is a question No. 7 :rolleyes:


Question 3 ??? '<p id="iepara"></p>' <!--For a paragraph (if any) that immediately follows suckertree menu, add 1em top spacing between the two in IE--> Needed exactly for what?


Done! Question 4 ??? How can both sublevel-menus been shown (I did several tries with two separate javascipts, it is always only shown the first or the second.) Now I think, the second script needs some changes)?
Thank you, Bud, for the hint!
Changed in the javascript: *var menuids=["treemenu1","treemenu2"] //Enter id(s) of SuckerTree UL menus, separated by commas
Changed in the second menu code: "<div class="suckertreemenu"><ul id="treemenu2">"


Done! Question 5 ??? How to set the submenus of the second menu to be shown above the main level ?
Fixed by myself *proud*
Changed disclosures for "top:" in the CSS code


Done! Question 6 ??? How to change java script code (menu arrows are not needed)?
Thank you for the hint, Beverleyh!
see post http://www.dynamicdrive.com/forums/showthread.php?73323-Help-needed-to-shorten-some-jacascript-code&p=292381#post292381
Changed in the javascript: commented out the lines:
//ultags[t].parentNode.getElementsByTagName("a")[0].className="mainfoldericon"
//ultags[t].parentNode.getElementsByTagName("a")[0].className="subfoldericon"


Question 7 ???
The Holly Hack seems only to work in IE 4 - 6!?! Have a look at this table: http://www.dynamicsitesolutions.com/css/filters/support-chart/

IE 8 looks fine without the Holly Hack (with activated ActiveX)?!? Still needed?
In Chrome (version 25.0.1364.172 m) it also looks nice.
But: the menus have a space /overlap in FireFox version 19.0.2.
How to manage this?

/* Holly Hack for IE \*/
/** html .suckertreemenu ul li, .suckertreemenu2 ul li { float: left; height: 1%;}
* html .suckertreemenu ul li a, .suckertreemenu2 ul li a { height: 1%;}
* html .suckertreemenu ul li ul li, .suckertreemenu2 ul li ul li { float: left;}*/
/* End */


I packed my work in a .zip-file:
two .html-files, a .gif- and a .png-image and put it now into the DD space, hoping someone will have a look at it.

I am still learning and will probably not understand too "cryptic" explanations and please, excuse my bad English.

Thank you for reading!
wimi

[ajfmrf]

Please post a link to the page on your site that contains the problematic script so we can check it out.

http://oarso.net/suckerTree/index.html

This has both one the same page.just do like it has for each menu but place it where you want it.

[wtronic-germany]

Done! Thank you, Bud, for the hint!

Changed in the javascript: var menuids=["treemenu1","treemenu2"]
Changed in the second menu code: <div class="suckertreemenu"><ul id="treemenu2">

Now the second hoizontal menu works too (downwards) :) and "only" five more questions are remaining ...

Here is the link: http://fimum.de/lischi/wtronic-suckertree-menu-test.html

Greetings from wimi

[wtronic-germany]

Question 5 is done too!

[ajfmrf]

In the css for the menu you have the arrows here:


/*Background image for top level menu list links */
.suckertreemenu .mainfoldericon{
background: #F3F3F3 url(media/arrow-down.gif) no-repeat center right;
}

/*Background image for subsequent level menu list links */
.suckertreemenu .subfoldericon{
background: #F3F3F3 url(media/arrow-right.gif) no-repeat center right;
}
remove the meda/arrow-right.gif and the media/arrow-down.gif

just delelte the link to the image and leave the background to start.

[wtronic-germany]

Hi Bud,

the CSS code was deleted, but I want to delete the code in the JavaScript too.

Thanks!
wimi

[ajfmrf]

I may be wrong but I don't think that the javascript is involved with the arrow images,just the css.

If I am wrong someone will correct me surely - lol

[wtronic-germany]

The javascript is somehow involved:

ultags[t].parentNode.getElementsByTagName("a")[0].className="mainfoldericon"

ultags[t].parentNode.getElementsByTagName("a")[0].className="subfoldericon"

So sorry:(
wimi

[ajfmrf]

I don't think that is what it may look like.

I am not a javascript guru so we need one to verify that it is not for those arrow images as I believe.

[wtronic-germany]

The link has changed:

http://fimum.de/lischi/suckertreemenu-test/test.html

Greetings from wimi

[ajfmrf]

Now explain what you are looking for.............

[wtronic-germany]

Hi Bud and hello again :)

meanwhile I embedded the menu in my site.

The above link leads to a simplified version on a place in my webspace, where it can be "forever".
Maybe I'm not the last one with this issue...

My questions became rather more then less,
but one of the most important is the "CSS Pie round corners" problem, when using the internet explorer:

CSS Pie works fine in the top level menu and all other areas (and all other tested browsers), but not in the suckertree submenus. The background.png is not shown (tested with IE 8 ).

How to manage this?

Greetings and thanks a lot!
wimi


<style type="text/css">

.wtronicmenuboxwhite {
background-image:url(bg75w.png);
border-radius:5px;
-moz-border-radius:5px;
-khtml-border-radius:5px;
-webkit-border-radius:5px;
-o-border-radius:5px;
behavior: url(PIE-1.0.0/PIE.htc);
width:920px;
height:25px;
}

.wtronicmenuwidth1 {
width:190px; /*Width of the first top level menu link items*/
padding-left:5px;
}
.wtronicmenuwidth2 {
width:190px; /*Width of the second top level menu link items*/
padding-left:15px;
}
.wtronicmenuwidth3 {
width:190px; /*Width of the third top level menu link items*/
}
.wtronicmenuwidth4 {
width:60px; /*Width of the third last top level menu link item*/
padding-top:4px;
padding-left:130px;
}
.wtronicmenuwidth5 {
width:60px; /*Width of the last two top level menu link items*/
padding-top:4px;
}

/*** SuckerTree Menu *****************************/

.suckertreemenu ul,
.suckertreemenu2 ul {
list-style-type:none;
margin:0;
padding:0;
}

/*Top level list items*/
.suckertreemenu ul li,
.suckertreemenu2 ul li {
position:relative;
display:inline;
float:left;
text-align:center;
}
/*Top level menu link items style*/
.suckertreemenu ul li a,
.suckertreemenu ul li a.nogo,
.suckertreemenu2 ul li a,
.suckertreemenu2 ul li a.nogo {
font-family:Tahoma, Verdana, Arial, Helvetica, sans-serif;
font-size:18px;
font-style:normal;
line-height:1.5; /*change along with top:*/
font-weight:700;
font-variant:normal;
color:#39A851; /*green*/
display:block;
text-decoration:none;
}
.suckertreemenu ul li a span,
.suckertreemenu ul li a.nogo span,
.suckertreemenu2 ul li a span,
.suckertreemenu2 ul li a.nogo span {
font-size:14px;
}
.suckertreemenu ul li a:link,
.suckertreemenu ul li a.nogo:link,
.suckertreemenu2 ul li a:link,
.suckertreemenu2 ul li a.nogo:link,
.suckertreemenu ul li a:visited,
.suckertreemenu ul li a.nogo:visited,
.suckertreemenu2 ul li a:visited,
.suckertreemenu2 ul li a.nogo:visited {
color:#39A851; /*green*/
}
.suckertreemenu ul li a:hover,
.suckertreemenu2 ul li a:hover {
color:#000;
}
.suckertreemenu ul li a.nogo:hover,
.suckertreemenu2 ul li a.nogo:hover {
color:#39A851; /*green*/
}

.suckertreemenu ul li a:focus,
.suckertreemenu ul li a.nogo:focus,
.suckertreemenu2 ul li a:focus,
.suckertreemenu2 ul li a.nogo:focus {
color:#FF6A00; /*orange*/
}
.suckertreemenu ul li a:active,
.suckertreemenu2 ul li a:active {
color:#277538; /*darkgreen*/
}
.suckertreemenu ul li a.nogo:active,
.suckertreemenu2 ul li a.nogo:active {
color:#39A851; /*green*/
}

/*1st sub level menu*/
.suckertreemenu ul li ul,
.suckertreemenu2 ul li ul {
left:50px;
position:absolute;
top:1em; /* no need to change, as true value set by script */
display:block;
visibility: hidden;
}

/*Sub level menu list items (undo style from Top level List Items)*/
.suckertreemenu ul li ul li {
display:list-item;
float:none;
background-image:url(bg75w.png);
border-radius:5px;
-moz-border-radius:5px;
-khtml-border-radius:5px;
-webkit-border-radius:5px;
-o-border-radius:5px;
behavior: url(PIE-1.0.0/PIE.htc);
top:0px;
}
/*Sub level menu list items (undo style from Top level List Items)*/
.suckertreemenu2 ul li ul li {
display:list-item;
float:none;
background-image:url(bg75w.png);
border-radius:5px;
-moz-border-radius:5px;
-khtml-border-radius:5px;
-webkit-border-radius:5px;
-o-border-radius:5px;
behavior: url(PIE-1.0.0/PIE.htc);
top:-127px; /*change along with line-height:*/
}

/*All subsequent sub menu levels offset after 1st level sub menu */
.suckertreemenu ul li ul li ul {
left:159px; /* no need to change, as true value set by script */
top:0px;
}
/*All subsequent sub menu levels offset after 1st level sub menu */
.suckertreemenu2 ul li ul li ul {
left:159px; /* no need to change, as true value set by script */
top:27px; /*change along with line-height - in 25er Schritten hoch-/runterrechnen*/
}

/* Sub level menu links style */
.suckertreemenu ul li ul li a,
.suckertreemenu2 ul li ul li a,
.suckertreemenu ul li ul li a:link,
.suckertreemenu2 ul li ul li a:link,
.suckertreemenu ul li ul li a:visited,
.suckertreemenu2 ul li ul li a:visited {
width:90px; /*width of sub menu levels*/
font-size:14px;
line-height:1.8; /*change along with top:*/
text-align:left;
padding-left:15px;
padding-right:15px;
color:#39A851; /*green*/
}
.suckertreemenu ul li ul li a:hover,
.suckertreemenu2 ul li ul li a:hover {
color:#000;
}
.suckertreemenu ul li ul li a:focus,
.suckertreemenu2 ul li ul li a:focus {
color:#FF6A00; /*orange*/
}
.suckertreemenu ul li ul li a:active,
.suckertreemenu2 ul li ul li a:active {
color:#277538; /*darkgreen*/
}

* html p#iepara { /*For a paragraph (if any) that immediately follows suckertree menu, add 1em top spacing between the two in IE*/
padding-top:1em;
}

/* Holly Hack for IE 4-6\*/
* html .suckertreemenu ul li, .suckertreemenu2 ul li { float: left; height: 1%;}
* html .suckertreemenu ul li a, .suckertreemenu2 ul li a { height: 1%;}
* html .suckertreemenu ul li ul li, .suckertreemenu2 ul li ul li { float: left;}
/* End */

/**** SuckerTree Menu end ****************************/

</style>

[ajfmrf]

well the only thing I have to say about that is the same as the others

Do you have the url/addy for the pie thing?


.wtronicmenuboxwhite {
background-image:url(bg75w.png);
border-radius:5px;
-moz-border-radius:5px;
-khtml-border-radius:5px;
-webkit-border-radius:5px;
-o-border-radius:5px;
behavior: url(PIE-1.0.0/PIE.htc);
width:920px;
height:25px;
}


Is this a link that is good? do you have it downloaded and if so is the location correct?

[wtronic-germany]

Hi Bud,

this is the link: http://css3pie.com/.

PIE makes nice corners everywhere, but not in my <ul><li> elements.
Syntax and path are ok, I checked this twice and triple.

When I began to style my menu, I thought it will be better not to work with opacity, so I used a background.png.
May be, it is necessary to use opacity in the sub menus.

If I comment out the "behavior:" in the CSS instruction for the sub menus, the background is indicated, but - of course - without rounded corners.

I try to solve this issue by myself and in the CSS3 PIE Forum and then I'll come back with the results.
Perhaps you can help me meanwhile with my other questions?

For the clarity I put the next question in a new post.

Happy Easter greetings from wimi!



/*Sub level menu list items (undo style from Top level List Items)*/
.suckertreemenu ul li ul li {
display:list-item;
float:none;
background-image:url(bg75w.png);
border-radius:5px;
-moz-border-radius:5px;
-khtml-border-radius:5px;
-webkit-border-radius:5px;
-o-border-radius:5px;
behavior: url(PIE-1.0.0/PIE.htc);
top:0px;
}
/*Sub level menu list items (undo style from Top level List Items)*/
.suckertreemenu2 ul li ul li {
display:list-item;
float:none;
background-image:url(bg75w.png);
border-radius:5px;
-moz-border-radius:5px;
-khtml-border-radius:5px;
-webkit-border-radius:5px;
-o-border-radius:5px;
/*behavior: url(PIE-1.0.0/PIE.htc);*/
top:-127px; /*change along with line-height:*/
}

[wtronic-germany]

My next open question is:

<p id="iepara"></p> <!--For a paragraph (if any) that immediately follows suckertree menu, add 1em top spacing between the two in IE-->

This is exactly needed for what?
After each menu?
And where is the right place to set it in?