WebsiteBaker Support (2.8.x) > Templates, Menus & Design

show_menu2: valid XHTML and CSS selectable menus

<< < (49/64) > >>

bupaje:
Thanks brofield.

rrjbeans:
Hello,

I installed wb 2.7 and used css to style drop down menus using show_menu2. Position is set to "absolute" for the submenus so they can popout correctly.

Having one or more period characters in the menu title, and it appears that wb ignores such positioning specified. Remove the periods in the menu title and it returns to normal.

SHOW_MENU2 SETTINGS IN TEMPLATE...

--- Code: ---<td id="nav"><?php show_menu2(
        $aMenu          = 0,
        $aStart         = SM2_ROOT,
        $aMaxLevel      = SM2_ALL,
        $aFlags         = SM2_ALL,
        $aItemOpen      = &#39;<li class="[menu_title] [class] lev[level]">[a][menu_title]</a>&#39;,
        $aItemClose     = &#39;</li>&#39;,
        $aMenuOpen      = &#39;[ul]&#39;,
        $aMenuClose     = &#39;</ul>&#39;,
        $aTopItemOpen   = false,
        $aTopMenuOpen   = false
        ); ?></td>
--- End code ---

STYLES.CSS

--- Code: ---#nav li {
    display: inline;
        position: relative;
}


#nav ul li.lev0 {
        padding-left: 10px;
        padding-right: 10px;
}

#nav li.menu-current {
    background-color: #C0C0C0;
}

#nav li:hover {
        background-color: #C0C0C0;
}

#nav a {
    color: black;
        text-decoration: none;
}

.1 {
    vertical-align: middle;
}

#nav ul li {
    position: relative;
}

#nav ul ul {
    display: none;
        position: absolute;
}

#nav ul ul ul {
    display: none;
        position: absolute;
        left: 100%;
        top: 0;
        width: 100%;
}

#nav ul ul,
#nav ul li:hover ul ul,
#nav ul ul li:hover ul ul
{display: none;}

#nav ul li:hover ul,
#nav ul ul li:hover ul,
#nav ul ul ul li:hover ul
{display: block;}

#nav ul li:hover ul {
    display: block;
        font-size: small;
        /*border: 1px solid black;*/
        background-color: #C0C0C0;
        width: 90px;
        filter: Alpha(Opacity=70, FinishOpacity=75, Style=1, StartX=1, StartY=1, FinishX=20, FinishY=20);
        opacity: 0.7;
        moz-opacity: 0.7;
}

#nav ul ul li:hover ul {
    display: block;
        position: absolute;
        /*left: 600px;
        top: 0;*/
        /*left: 195%;*/
        /*margin-top: -30px;
        margin-right: -100px;*/
        font-size: small;
        /*border: 1px solid black;*/
        background-color: #C0C0C0;
        width: 90px;
        filter: Alpha(Opacity=90, FinishOpacity=95, Style=1, StartX=1, StartY=1, FinishX=20, FinishY=20);
        opacity: 0.9;
        moz-opacity: 0.9;
}

#nav ul li.About:hover ul {
    left: 0px;
        margin-top: 28px;

}


#nav ul li.Studio:hover ul {
    left: 0px;
        margin-top: 28px;

}

#nav ul ul li.Classes:hover ul {
    left: 90px;
        margin-top: 0px;
}

#nav ul ul li.Calendar:hover ul {
    left: 90px;
        margin-top: 0px;
}


#nav ul ul li {
        list-style: none;
        background-image: none;
}

#nav ul ul li:hover {
    background-color: #FFFFFF;
}

#nav ul ul li a {
    border-top: 1px solid #C0C0C0;
        border-bottom: 1px solid #C0C0C0;
        text-indent: -40px;
        text-align: left;
        list-style: none;
        background-image: none;
        display: block;
}

#nav ul ul li a:hover {
    background-color: #FFFFFF;
        border-top: 1px solid #990000;
        border-bottom: 1px solid #990000;
        margin-left: -40px;
        text-indent: 0px;
        display: block;     
        filter: Alpha(Opacity=120, FinishOpacity=125, Style=1, StartX=1, StartY=1, FinishX=20, FinishY=20);
        opacity: 1.2;
        moz-opacity: 1.2;}

#nav ul li.menu-expand {
    background-image: url(http://fladance.org/beta/media/down-arrow-sm.png);
        background-repeat: no-repeat;
        background-position: right;
}

#nav ul ul li.menu-expand {
    background-image: url(http://fladance.org/beta/media/right-arrow.gif);
        background-repeat: no-repeat;
        background-position: right;
}

--- End code ---

MENU STRUCTURE:

Home
About
- History
- Staff
- Board
Studio
- Classes
-- one
-- two
-- three
- Calendar
-- Schedule
-- News
- Summer
Gallery
Contact Us

MENU STRUCTURE THAT MESSES MENU POSTIONING UP:

Home
About
- History
- Staff
- Board
Studio
- Classes...
-- one
-- two
-- three
- Calendar...
-- Schedule
-- News
- Summer
Gallery
Contact Us

fsuk:
will this show private pages?

brofield:
rrjbeans:
you are using the page name as a class. A class cannot have periods in it. Ergo, what happens next is anyone's guess.

fsuk:
if it is supposed to. i.e. the person is logged in and has been given access to that page.

brofield:
New version released now. show_menu2 v4.7 adds new functionality. See the readme.en.txt or readme.de.txt files. Note the Extended Options that are now possible. This is the only difference from 4.6 - there is no reason for 99.9% of people to upgrade. See the topic https://forum.WebsiteBaker.org/index.php/topic,11150.html for details of how the new option may be used.

Download from http://code.jellycan.com/show_menu2/

Regards,
Brodie

Navigation

[0] Message Index

[#] Next page

[*] Previous page