[RESOLVED]Two menus and two CSS files!

Hi pals,

I have a horizental menu and a vertical in one page. Below code is for the horizental one (hmenucss.css)

    .main_menu
    {
        font-family: 'Times New Roman';
        font-size: 12pt;
        //min-width: 120px;
        width: 100px;
        background-color: #666666;
        color: #fff;
        text-align: center;
        height: 30px;
        line-height: 30px;
        //margin-right: 5px;
        margin-bottom: 2px;
        text-align: center;
        padding-bottom: 5px;
        padding-top: 5px;
    }
    
    .Hlevel_menu
    {
        font-family: 'Times New Roman';
        font-size: 12pt;
        min-width: 200px;
        //width: 100%;
        background-color: #666666;
        color: #fff;
        text-align: center;
        height: 30px;
        line-height: 30px;
        //margin-right: 5px;
        margin-bottom: 2px;
        text-align: center;
        padding-bottom: 5px;
        padding-top: 5px;
    }
    .Hlevel2_menu
    {
        font-family: 'Times New Roman';
        font-size: 12pt;
        min-width: 250px;
        //width: 100%;
        background-color: #666666;
        color: #fff;
        text-align: center;
        height: 30px;
        line-height: 30px;
        //margin-right: 5px;
        margin-bottom: 2px;
        text-align: center;
        padding-bottom: 5px;
        padding-top: 5px;
    }
    .selected
    {
        color: #fff;
        background-color: maroon;
    }

#Menu1 a.popout {
    padding-right: 0px !important;
    padding-left: 0px !important;
    
}

and the below code is for the vertical one (vmenucss.css):

#wrapper {
    width: 240px !important;
    margin: 0 auto !important;
}


.level1,
.level1 ul,
.level1 li,
.level1 a,
.level1 span {
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    outline: none !important;
}

    .level1 li {
        list-style: none !important;
    }

        /* Accordian Style */

        .level1 li > a {
            display: block !important;
            position: relative !important;
            min-width: 248px !important;
            padding: 0 10px 0 0 !important;
            text-align: center !important;
            height: 32px !important;
            color: #FFFFFF !important;
            font: bold 12px/32px Arial, sans-serif !important;
            text-decoration: none !important;
            background: #343435 !important;
            background: -moz-linear-gradient(top, #343435 1%, #4a4a4a 100%) !important;
            background: -webkit-gradient(linear, left top, left bottom, color-stop(1%,#343435), color-stop(100%,#4a4a4a)) !important;
            background: -webkit-linear-gradient(top, #343435 1%,#4a4a4a 100%) !important;
            background: -o-linear-gradient(top, #343435 1%,#4a4a4a 100%) !important;
            background: -ms-linear-gradient(top, #343435 1%,#4a4a4a 100%) !important;
            background: linear-gradient(top, #343435 1%,#4a4a4a 100%) !important;
            -webkit-box-shadow: inset 0px 1px 0px 0px rgba(255,255,255, .1), 0px 1px 0px 0px rgba(0,0,0, .1) !important;
            -moz-box-shadow: inset 0px 1px 0px 0px rgba(255,255,255, .1), 0px 1px 0px 0px rgba(0,0,0, .1) !important;
            box-shadow: inset 0px 1px 0px 0px rgba(255,255,255, .1), 0px 1px 0px 0px rgba(0,0,0, .1) !important;
        }

    .level1 > li:hover > a,
    .level1 > li:target > a {
        text-shadow: 1px 1px 1px rgba(255,255,255, .2) !important;
        background: #20a4ca !important;
        background: -moz-linear-gradient(top, #20a4ca 1%, #47b5d4 100%) !important;
        background: -webkit-gradient(linear, left top, left bottom, color-stop(1%,#20a4ca), color-stop(100%,#47b5d4)) !important;
        background: -webkit-linear-gradient(top, #20a4ca 1%,#47b5d4 100%) !important;
        background: -o-linear-gradient(top, #20a4ca 1%,#47b5d4 100%) !important;
        background: -ms-linear-gradient(top, #20a4ca 1%,#47b5d4 100%) !important;
        background: linear-gradient(top, #20a4ca 1%,#47b5d4 100%) !important;
        -webkit-box-shadow: inset 0px 1px 0px 0px rgba(255,255,255, .1), 0px 1px 0px 0px rgba(0,0,0, .1) !important;
        -moz-box-shadow: inset 0px 1px 0px 0px rgba(255,255,255, .1), 0px 1px 0px 0px rgba(0,0,0, .1) !important;
        box-shadow: inset 0px 1px 0px 0px rgba(255,255,255, .1), 0px 1px 0px 0px rgba(0,0,0, .1) !important;
    }



/* level2 */

.level2 li a {
    color: #797979 !important;
    text-shadow: 1px 1px 0px rgba(255,255,255, .2) !important;
    background: #eae9e9 !important;
    border-bottom: 1px solid #c1bfbf !important;
    -webkit-box-shadow: inset 0px 1px 0px 0px rgba(255,255,255, .1), 0px 1px 0px 0px rgba(0,0,0, .1) !important;
    -moz-box-shadow: inset 0px 1px 0px 0px rgba(255,255,255, .1), 0px 1px 0px 0px rgba(0,0,0, .1) !important;
    box-shadow: inset 0px 1px 0px 0px rgba(255,255,255, .1), 0px 1px 0px 0px rgba(0,0,0, .1) !important;
}

.level2 li:hover a {
    background: #f6f5f5 !important;
}

.level2 {
    position: initial !important;
    height: initial !important;
    left: initial !important;
}

/* Accordian Function */

.level1 > li > .level2 {
    height: 0 !important;
    overflow: hidden !important;
    -webkit-transition: max-height 0.3s ease-in-out, box-shadow 0.6s linear !important;
    -moz-transition: max-height .8s ease-in-out !important;
    -o-transition: max-height .8s ease-in-out !important;
    -ms-transition: max-height .8s ease-in-out !important;
}

.level1 > li:hover > .level2 {
    height:  auto!important;
    max-height:inherit !important;
   
}





/* level3 */

.level3 li a {
    color: #797979 !important;
    text-shadow: 1px 1px 0px rgba(255,255,255, .2) !important;
    background: #861818 !important;
    border-bottom: 1px solid #c1bfbf !important;
    -webkit-box-shadow: inset 0px 1px 0px 0px rgba(255,255,255, .1), 0px 1px 0px 0px rgba(0,0,0, .1) !important;
    -moz-box-shadow: inset 0px 1px 0px 0px rgba(255,255,255, .1), 0px 1px 0px 0px rgba(0,0,0, .1) !important;
    box-shadow: inset 0px 1px 0px 0px rgba(255,255,255, .1), 0px 1px 0px 0px rgba(0,0,0, .1) !important;
}

.level3 li:hover a {
    background: #ffd800 !important;
}

.level3 {
    position: initial !important;
    height: initial !important;
    left: initial !important;
}

/* Accordian Function */

.level2 > li > .level3 {
    height: 0 !important;
    overflow: hidden !important;
    -webkit-transition: max-height 0.3s ease-in-out, box-shadow 0.6s linear !important;
    -moz-transition: max-height .8s ease-in-out !important;
    -o-transition: max-height .8s ease-in-out !important;
    -ms-transition: max-height .8s ease-in-out !important;
}

.level2 > li:hover > .level3 {
    height:  auto!important;
    max-height:inherit !important;
   
}

and the html code is:

<div id="hmenue">
                <asp:Menu ID="Menu1" runat="server" DataSourceID="SiteMapDataSource1" Orientation="Horizontal" Width= "100%"
                    SkipLinkText="" IncludeStyleBlock="false">
                    
                    <LevelMenuItemStyles>
                        <asp:MenuItemStyle CssClass="main_menu" />
                        <asp:MenuItemStyle CssClass="Hlevel_menu" />
                        <asp:MenuItemStyle CssClass="Hlevel2_menu" />
                    </LevelMenuItemStyles>

                    <DynamicHoverStyle BackColor="#FF0000" />
                    <StaticHoverStyle BackColor="#FF0000" />

                    <DynamicSelectedStyle BackColor="#C10000" />
                    <StaticSelectedStyle BackColor="#C10000" />

                </asp:Menu>
            </div>


            <!--right menu-->
            <div id="rmenue">
                <asp:Menu ID="Menu2" CssClass="wrapper" runat="server" DataSourceID="SiteMapDataSource1" Orientation="Vertical">
                    
                </asp:Menu>
            </div>

When running the page, the horizental page, employs the css for the vmenucss.css file which is for the vertical menu. I have also added <IncludeStyleBlock="false"> for the horizental menu, but it does not work!

Please help me to have the horizental menu apply hmenucss.css file

tnx in advance

If the code generated by ASP.NET for your menus includes classes that are present in the css document, the browser will apply them. What you should do is set your css classes to be childs of the respective div id containing each menu. So, instead of this:

.main_menu {...}

You should write this:

#hmenue.main_menu {...}

The same should be done for the second menu. I hope you get the point.

Dear hugonne,

     Thank you so much for your helpful guidance.

     I did almost what you mentioned with this difference that I wrote:

#Menu1 a.main-menu { ... }

and the same for Menu2. It did work

Leave a Reply