导航条

 

模板页中应用，鼠标经过，变色，选中后变色 （一张灰色，一张红色）

 

 

             

导航前台

 

<div class="menubtn">
                    <ul>
                       <% string str = Url.RequestContext.HttpContext.Request.RawUrl; %>
                        <li class="<%=str.Contains("index")?"navone2":"navone"%>">
                             <a  href="/member/index">首页</a>
                        </li>
                        <li class="navtwo">
                             <a href="">网上商城</a>
                        </li>
                        <li class="<%=str.Contains("index")?"navthree2":"navthree"%>">
                             <a href="/member/profile">会员服务中心</a>
                         </li>
                        <li class="navfour">
                             <a href="">经销商会</a>
                        </li>
                    </ul>
                </div>

 

 

css样式：

 

.menubtn { float: left;  width: 490px; padding-top: 53px; }
.menubtn ul { list-style: none; width: 400px; height: 20px; }
.menubtn ul li { float: left; line-height: 25px; margin-left: 1px; text-align: center; height: 25px; padding-top: 5px; display: inline; }
.menubtn ul li a { color: #000; font-size: 15px; display: inline-block; }
.menubtn ul .navone a { background: url(/images/img/background_nav.gif) no-repeat; width: 76px; height: 27px; }
.menubtn ul .navtwo a { background: url(/images/img/background_nav.gif) no-repeat -76px 0px; width: 78px; height: 27px; }
.menubtn ul .navthree a { background: url(/images/img/background_nav2.gif) no-repeat -154px 0px; color: #FFF; width: 106px; height: 27px; }
.menubtn ul .navfour a { background: url(/images/img/background_nav.gif) no-repeat -260px 0px; width: 79px; height: 27px; }

.menubtn ul .navone2 a { background: url(/images/img/background_nav2.gif) no-repeat;color: #FFF; width: 76px; height: 27px; }
.menubtn ul .navtwo2 a { background: url(/images/img/background_nav2.gif) no-repeat -76px 0px;color: #FFF; width: 78px; height: 27px; }
.menubtn ul .navthree2 a { background: url(/images/img/background_nav.gif) no-repeat -154px 0px; width: 106px; height: 27px; }
.menubtn ul .navfour2 a { background: url(/images/img/background_nav2.gif) no-repeat -260px 0px;color: #FFF; width: 79px; height: 27px; }
.menubtn ul .navone a:hover { background: url(/images/img/background_nav2.gif) no-repeat; width: 76px; height: 27px; color: #FFF; }
.menubtn ul .navtwo a:hover { background: url(/images/img/background_nav2.gif) no-repeat -76px 0px; width: 78px; height: 27px; color: #FFF; }
.menubtn ul .navthree2 a:hover { background: url(/images/img/background_nav2.gif) no-repeat -155px 0px; color: #FFF; width: 105px; height: 27px; }
.menubtn ul .navfour a:hover { background: url(/images/img/background_nav2.gif) no-repeat -260px 0px; width: 79px; height: 27px; color: #FFF; }