如何使用导航控件和css创建水平菜单栏 [英] how to create a horizontal menu bar using navigation control and css

问题描述

我想帮助创建一个水平菜单栏使用VS和css的导航控件

例如本网站的菜单栏请给我一个代码，它可以帮助我创建一个动态和酷看菜单栏

解决方案

使用解决方案1 ​​，下面提到 CSS 编码。

 < style  type =text / css> 
。 menu   ul  
 {
  border-bottom  ：  1px纯灰色;  
} 
 
。 menu   ul   li  
 {
  border  ：  1px纯白色;  
  background-color  ： 灰色;  
  text-decoration  ：  none;  
  padding  ：  3px;  
  margin  ：  3px;  
} 
 
。 menu   ul   li   a  
 {
  color  ： 白色;  
} 
 
。菜单  ul   li   a：hover  
 {
  font-weight  ： 粗体;  
} 
 < /  样式 >  

 <   asp：菜单    ID   =  Menu1    runat   =  server   方向  = 水平    CssClass   = 菜单 >  
 <  项目 >  
 <   asp：MenuItem    文字  = 主页     NavigateUrl   = < span class =code-keyword> Home.aspx    /  >  
 <   asp：MenuItem  < span class =code-attribute>  文本  = 与我们联系    NavigateUrl   =  ContactUs.aspx    /  >  
 <   asp：MenuItem    文字  = 关于我们    NavigateUrl   =  AboutUs.aspx    /  >  
 <   / Items  >  
 <   / asp：菜单 >  

这将为您提供一个水平菜单。



当它在浏览器中呈现为 HTML ，它将是一个无序列表（ul）。

因此，您可以将 CSS 样式应用于类 .menu ul，.menu ul li，.menu ul li a，.menu ul li a：hover 并根据您的要求进行设计。

 < style  type =text / css> 
。 menu   ul  
 {
  border-bottom  ：  1px纯灰色;  
} 
 
。 menu   ul   li  
 {
  border  ：  1px纯白色;  
  background-color  ： 灰色;  
  text-decoration  ：  none;  
  padding  ：  3px;  
  margin  ：  3px;  
} 
 
。 menu   ul   li   a  
 {
  color  ： 白色;  
} 
 
。菜单  ul   li   a：hover  
 {
  font-weight  ： 粗体;  
} 
 < /  样式 >  

i want help in creating a horizontal menu bar using navigation control of VS and css
for example the menu bar of this site please provide me a code which can help me to create an dynamic and cool looking menu bar

解决方案

Use Solution 1 with below mention CSS coding.

<style type="text/css">
    .menu ul
    {
        border-bottom: 1px solid gray;
    }

    .menu ul li
    {
        border: 1px solid white;
        background-color: gray;
        text-decoration: none;
        padding: 3px;
        margin: 3px;
    }

    .menu ul li a
    {
        color: White;
    }

    .menu ul li a:hover
    {
        font-weight:bold;
    }
</style>

<asp:Menu ID="Menu1" runat="server" Orientation="Horizontal" CssClass="menu">
    <Items>
        <asp:MenuItem Text="Home" NavigateUrl="Home.aspx" />
        <asp:MenuItem Text="Contact us" NavigateUrl="ContactUs.aspx" />
        <asp:MenuItem Text="About us" NavigateUrl="AboutUs.aspx" />
    </Items>
</asp:Menu>

This will give you a Horizontal menu.

When it is rendered in browser as HTML, it will be an Unordered list (ul).
So, you can apply CSS styles to classes like .menu ul, .menu ul li, .menu ul li a, .menu ul li a : hover and design it as per your requirement.

<style type="text/css">
    .menu ul
    {
        border-bottom: 1px solid gray;
    }

    .menu ul li
    {
        border: 1px solid white;
        background-color: gray;
        text-decoration: none;
        padding: 3px;
        margin: 3px;
    }

    .menu ul li a
    {
        color: White;
    }

    .menu ul li a:hover
    {
        font-weight:bold;
    }
</style>

这篇关于如何使用导航控件和css创建水平菜单栏的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！