Page 2 of 2 FirstFirst 12
Results 11 to 15 of 15

Thread: suckertree hoizontal menu css + javascript questions

  1. #11
    Join Date
    Jan 2011
    Location
    Southeastern CT
    Posts
    597
    Thanks
    43
    Thanked 28 Times in 28 Posts

    Default

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

    Bud

  2. #12
    Join Date
    Mar 2013
    Posts
    14
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Default

    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

    Code:
    <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>

  3. #13
    Join Date
    Jan 2011
    Location
    Southeastern CT
    Posts
    597
    Thanks
    43
    Thanked 28 Times in 28 Posts

    Default

    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?

    Code:
    .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?
    Thanks,

    Bud

  4. #14
    Join Date
    Mar 2013
    Posts
    14
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Default

    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!


    Code:
    /*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:*/
    }
    Last edited by wtronic-germany; 03-29-2013 at 12:35 PM.

  5. #15
    Join Date
    Mar 2013
    Posts
    14
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Default

    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?
    Last edited by wtronic-germany; 03-30-2013 at 11:06 PM.

Similar Threads

  1. Replies: 4
    Last Post: 03-19-2013, 07:38 PM
  2. Javascript questions... What Is The Best Option?
    By Byronwells in forum Looking for such a script or service
    Replies: 10
    Last Post: 03-03-2010, 02:49 AM
  3. javascript general questions
    By leonidassavvides in forum JavaScript
    Replies: 1
    Last Post: 05-17-2008, 06:25 PM
  4. Replies: 1
    Last Post: 04-16-2008, 06:01 PM
  5. Javascript SuckerTree Horizontal Menu works for FF not IE
    By Ramya_hv in forum Dynamic Drive scripts help
    Replies: 1
    Last Post: 12-28-2007, 12:57 AM

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •