4个回答
展开全部
Repeater+<ul>和<li>
如:
<%@ Control Language="C#" AutoEventWireup="true" CodeFile="Top.ascx.cs" Inherits="Top" %>
<style type="text/css">
/*全局样式*/
*{
font-size:12px;
}
body{
margin:0;
padding:0;
background-color:#FFFFFF;
font-size:12px;
color:#666666;
font-family: "宋体",Arial, Helvetica, sans-serif;
}
/*主导航菜单*/
#menu ul{
padding:0;
border:0;
list-style:none;
line-height:150%;
margin-top: 0;
margin-right: 0;
margin-bottom: 0;
margin-left: 0px;
}
#menu_out{
width:960px;
padding-left:2px;
margin-left:auto;
margin-right:auto;
background:url(Images/inagesbar/menu_left.gif) no-repeat left top;
}
#menu_in{
background:url(Images/inagesbar/menu_right.gif) no-repeat right top;
padding-right:4px;
}
#menu{
background:url(Images/inagesbar/menu_bg.gif) repeat-x;
height:63px;
}
.menu_line{
background:url(Images/inagesbar/menu_line.gif) no-repeat center top;
width:6px;
}
.menu_line2{
background:url(Images/inagesbar/menu_line2.gif) no-repeat center top;
width:2px;
}
#nav{
padding-left:10px;
}
#nav li{
float:left;
height:35px;
}
#nav li a{
float:left;
display:block;
padding-left:6px;
height:33px;
background:url(Images/inagesbar/menu_on_left.gif) no-repeat left top;
cursor:pointer;
text-decoration:none;
}
#nav li a span{
float:left;
padding:10px 5px 10px5px;
line-height:14px;
background:url(Images/inagesbar/menu_on_right.gif) no-repeat right top;
font-size:14px;
font-weight:bold;
color:#FFFFFF;
text-decoration:none;
}
#nav li .nav_on{ /*鼠标经过时变换背景,方便JS获取样式*/
background-position:left 100%;
}
#nav li .nav_on span{ /*鼠标经过时变换背景,方便JS获取样式*/
background-position:right 100%;
color:#333333;
text-decoration:none;
padding:12px 5px 7px 5px;
}
/*子栏目*/
#menu_con{
padding-left:20px;
clear:both;
text-align:center;
}
#menu_con li{
float:left;
height:22px;
margin-top:3px;
text-align:center;
}
#menu_con li a{
display:block;
float:left;
background:url(Images/inagesbar/menu_on_left2.gif) no-repeat left top;
cursor:pointer;
padding-left:1px;
}
#menu_con li a span{
float:left;
padding:6px 3px 4px 3px;
line-height:12px;
background:url(Images/inagesbar/menu_on_right2.gif) no-repeat right top;
}
#menu_con li a:hover{
text-decoration:none;
background:url(Images/inagesbar/menu_on_left2.gif) no-repeat left bottom;
}
#menu_con li a:hover span{
background:url(Images/inagesbar/menu_on_right2.gif) no-repeat right bottom;
}
</style>
<div style="height: 10px;">
</div>
<script language="javascript">
function qiehuan(num){
for(var id = 1;id<=10;id++)
{
if(id==num)
{
document.getElementById("qh_con"+id).style.display="block";
document.getElementById("mynav"+id).className="nav_on";
}
else
{
document.getElementById("qh_con"+id).style.display="none";
document.getElementById("mynav"+id).className="";
}
}
}
</script>
<div style="width:960px; height:204px; background:url(<%=this.ImgUrl%>) no-repeat;"></div>
<div id="menu_out">
<div id="menu_in">
<div id="menu">
<ul id="nav">
<li><a class="nav_on" id="mynav1" onmouseover="javascript:qiehuan(1)" href="Default.aspx"><span>
首页</span></a></li>
<li class="menu_line"></li>
<li><a class="" id="mynav2" onmouseover="javascript:qiehuan(2)" href="Article.aspx?CatID=1"><span>
学院概况</span></a></li>
<li class="menu_line"></li>
<li><a class="" id="mynav3" onmouseover="javascript:qiehuan(3)" href="Article.aspx?CatID=2"><span>
所及中心介绍</span></a></li>
<li class="menu_line"></li>
<li><a class="" id="mynav4" onmouseover="javascript:qiehuan(4)" href="Article.aspx?CatID=3"><span>
教学工作</span></a></li>
<li class="menu_line"></li>
<li><a class="" id="mynav5" onmouseover="javascript:qiehuan(5)" href="Article.aspx?CatID=4"><span>
科研成果</span></a></li>
<li class="menu_line"></li>
<li><a class="" id="mynav6" onmouseover="javascript:qiehuan(6)" href="Article.aspx?CatID=5"><span>
研究生教育</span></a></li>
<li class="menu_line"></li>
<li><a class="" id="mynav7" onmouseover="javascript:qiehuan(7)" href="Article.aspx?CatID=6"><span>
团队建设</span></a></li>
<li class="menu_line"></li>
<li><a class="" id="mynav8" onmouseover="javascript:qiehuan(8)" href="Article.aspx?CatID=7"><span>
精品课程</span></a></li>
<li class="menu_line"></li>
<li><a class="" id="mynav9" onmouseover="javascript:qiehuan(9)" href="Article.aspx?CatID=8"><span>
人才培养</span></a></li>
<li class="menu_line"></li>
<li><a class="" id="mynav10" onmouseover="javascript:qiehuan(10)" href="Article.aspx?CatID=9"><span>
党建工作</span></a></li>
<li class="menu_line"></li>
<%-- <li><a class="" id="mynav11" onmouseover="javascript:qiehuan(11)" href="Article.aspx?CatID=10"><span>
学生工作</span></a></li>
<li class="menu_line"></li>--%>
</ul>
<div id="menu_con">
<div id="qh_con1" style="display: block">
<ul>
</ul>
</div>
<div id="qh_con2" style="display: none">
<ul>
<asp:Repeater ID="repXuYuan" runat="server">
<ItemTemplate>
<li><a href="Article.aspx?CatID=1&cateID=<%#Eval("cate_ID") %>"><span><%#Eval("cate_Name").ToString()%></span></a></li>
<li class="menu_line2"></li>
</ItemTemplate>
</asp:Repeater>
</ul>
</div>
<div id="qh_con3" style="display: none">
<ul>
<asp:Repeater ID="repSuiZhongXing" runat="server">
<ItemTemplate>
<li><a href="Article.aspx?CatID=2&cateID=<%#Eval("cate_ID") %>"><span>
<asp:Literal ID="Literal1" Text='<%#Eval("cate_Name")%>' runat="server"></asp:Literal></span></a></li>
<li class="menu_line2"></li>
</ItemTemplate>
</asp:Repeater>
</ul>
</div>
<div id="qh_con4" style=" display:none; margin-left:100px;">
<ul style="text-align:center;">
<asp:Repeater ID="repJiaoXue" runat="server">
<ItemTemplate>
<li><a href="Article.aspx?CatID=3&cateID=<%#Eval("cate_ID") %>"><span><%#Eval("cate_Name").ToString()%></span></a></li>
<li class="menu_line2"></li>
</ItemTemplate>
</asp:Repeater>
</ul>
</div>
<div id="qh_con5" style="display: none; margin-left:250px;">
<ul>
<asp:Repeater ID="repKeyan" runat="server">
<ItemTemplate>
<li><a href="Article.aspx?CatID=4&cateID=<%#Eval("cate_ID") %>"><span><%#Eval("cate_Name").ToString()%></span></a></li>
<li class="menu_line2"></li>
</ItemTemplate>
</asp:Repeater>
</ul>
</div>
<div id="qh_con6" style="display: none; margin-left:300px;">
<ul>
<asp:Repeater ID="repTeam" runat="server">
<ItemTemplate>
<li><a href="Article.aspx?CatID=5&cateID=<%#Eval("cate_ID") %>"><span><%#Eval("cate_Name").ToString()%></span></a></li>
<li class="menu_line2"></li>
</ItemTemplate>
</asp:Repeater>
</ul>
</div>
<div id="qh_con7" style="display: none; margin-left:200px;">
<ul>
<asp:Repeater ID="repJPKC" runat="server">
<ItemTemplate>
<li><a href="Article.aspx?CatID=6&cateID=<%#Eval("cate_ID") %>"><span><%#Eval("cate_Name").ToString()%></span></a></li>
<li class="menu_line2"></li>
</ItemTemplate>
</asp:Repeater>
</ul>
</div>
<div id="qh_con8" style="display: none; margin-left:520px;">
<ul>
<asp:Repeater ID="repRCPY" runat="server">
<ItemTemplate>
<li><a href="Article.aspx?CatID=7&cateID=<%#Eval("cate_ID") %>"><span><%#Eval("cate_Name").ToString()%></span></a></li>
<li class="menu_line2"></li>
</ItemTemplate>
</asp:Repeater>
</ul>
</div>
<div id="qh_con9" style="display: none">
<ul>
<asp:Repeater ID="repDangJian" runat="server">
<ItemTemplate>
<li><a href="Article.aspx?CatID=8&cateID=<%#Eval("cate_ID") %>"><span><%#Eval("cate_Name").ToString()%></span></a></li>
<li class="menu_line2"></li>
</ItemTemplate>
</asp:Repeater>
</ul>
</div>
<div id="qh_con10" style="display: none">
<ul>
<asp:Repeater ID="repStudent" runat="server">
<ItemTemplate>
<li><a href="Article.aspx?CatID=9&cateID=<%#Eval("cate_ID") %>"><span><%#Eval("cate_Name").ToString()%></span></a></li>
<li class="menu_line2"></li>
</ItemTemplate>
</asp:Repeater>
</ul>
</div>
<div id="qh_con11" style="display: none">
<ul>
<asp:Repeater ID="Repeater10" runat="server">
<ItemTemplate>
<li><a href="Article.aspx?CatID=10&cateID=<%#Eval("cate_ID") %>"><span><%#Eval("cate_Name").ToString()%></span></a></li>
<li class="menu_line2"></li>
</ItemTemplate>
</asp:Repeater>
</ul>
</div>
</div>
</div>
</div>
</div>
如:
<%@ Control Language="C#" AutoEventWireup="true" CodeFile="Top.ascx.cs" Inherits="Top" %>
<style type="text/css">
/*全局样式*/
*{
font-size:12px;
}
body{
margin:0;
padding:0;
background-color:#FFFFFF;
font-size:12px;
color:#666666;
font-family: "宋体",Arial, Helvetica, sans-serif;
}
/*主导航菜单*/
#menu ul{
padding:0;
border:0;
list-style:none;
line-height:150%;
margin-top: 0;
margin-right: 0;
margin-bottom: 0;
margin-left: 0px;
}
#menu_out{
width:960px;
padding-left:2px;
margin-left:auto;
margin-right:auto;
background:url(Images/inagesbar/menu_left.gif) no-repeat left top;
}
#menu_in{
background:url(Images/inagesbar/menu_right.gif) no-repeat right top;
padding-right:4px;
}
#menu{
background:url(Images/inagesbar/menu_bg.gif) repeat-x;
height:63px;
}
.menu_line{
background:url(Images/inagesbar/menu_line.gif) no-repeat center top;
width:6px;
}
.menu_line2{
background:url(Images/inagesbar/menu_line2.gif) no-repeat center top;
width:2px;
}
#nav{
padding-left:10px;
}
#nav li{
float:left;
height:35px;
}
#nav li a{
float:left;
display:block;
padding-left:6px;
height:33px;
background:url(Images/inagesbar/menu_on_left.gif) no-repeat left top;
cursor:pointer;
text-decoration:none;
}
#nav li a span{
float:left;
padding:10px 5px 10px5px;
line-height:14px;
background:url(Images/inagesbar/menu_on_right.gif) no-repeat right top;
font-size:14px;
font-weight:bold;
color:#FFFFFF;
text-decoration:none;
}
#nav li .nav_on{ /*鼠标经过时变换背景,方便JS获取样式*/
background-position:left 100%;
}
#nav li .nav_on span{ /*鼠标经过时变换背景,方便JS获取样式*/
background-position:right 100%;
color:#333333;
text-decoration:none;
padding:12px 5px 7px 5px;
}
/*子栏目*/
#menu_con{
padding-left:20px;
clear:both;
text-align:center;
}
#menu_con li{
float:left;
height:22px;
margin-top:3px;
text-align:center;
}
#menu_con li a{
display:block;
float:left;
background:url(Images/inagesbar/menu_on_left2.gif) no-repeat left top;
cursor:pointer;
padding-left:1px;
}
#menu_con li a span{
float:left;
padding:6px 3px 4px 3px;
line-height:12px;
background:url(Images/inagesbar/menu_on_right2.gif) no-repeat right top;
}
#menu_con li a:hover{
text-decoration:none;
background:url(Images/inagesbar/menu_on_left2.gif) no-repeat left bottom;
}
#menu_con li a:hover span{
background:url(Images/inagesbar/menu_on_right2.gif) no-repeat right bottom;
}
</style>
<div style="height: 10px;">
</div>
<script language="javascript">
function qiehuan(num){
for(var id = 1;id<=10;id++)
{
if(id==num)
{
document.getElementById("qh_con"+id).style.display="block";
document.getElementById("mynav"+id).className="nav_on";
}
else
{
document.getElementById("qh_con"+id).style.display="none";
document.getElementById("mynav"+id).className="";
}
}
}
</script>
<div style="width:960px; height:204px; background:url(<%=this.ImgUrl%>) no-repeat;"></div>
<div id="menu_out">
<div id="menu_in">
<div id="menu">
<ul id="nav">
<li><a class="nav_on" id="mynav1" onmouseover="javascript:qiehuan(1)" href="Default.aspx"><span>
首页</span></a></li>
<li class="menu_line"></li>
<li><a class="" id="mynav2" onmouseover="javascript:qiehuan(2)" href="Article.aspx?CatID=1"><span>
学院概况</span></a></li>
<li class="menu_line"></li>
<li><a class="" id="mynav3" onmouseover="javascript:qiehuan(3)" href="Article.aspx?CatID=2"><span>
所及中心介绍</span></a></li>
<li class="menu_line"></li>
<li><a class="" id="mynav4" onmouseover="javascript:qiehuan(4)" href="Article.aspx?CatID=3"><span>
教学工作</span></a></li>
<li class="menu_line"></li>
<li><a class="" id="mynav5" onmouseover="javascript:qiehuan(5)" href="Article.aspx?CatID=4"><span>
科研成果</span></a></li>
<li class="menu_line"></li>
<li><a class="" id="mynav6" onmouseover="javascript:qiehuan(6)" href="Article.aspx?CatID=5"><span>
研究生教育</span></a></li>
<li class="menu_line"></li>
<li><a class="" id="mynav7" onmouseover="javascript:qiehuan(7)" href="Article.aspx?CatID=6"><span>
团队建设</span></a></li>
<li class="menu_line"></li>
<li><a class="" id="mynav8" onmouseover="javascript:qiehuan(8)" href="Article.aspx?CatID=7"><span>
精品课程</span></a></li>
<li class="menu_line"></li>
<li><a class="" id="mynav9" onmouseover="javascript:qiehuan(9)" href="Article.aspx?CatID=8"><span>
人才培养</span></a></li>
<li class="menu_line"></li>
<li><a class="" id="mynav10" onmouseover="javascript:qiehuan(10)" href="Article.aspx?CatID=9"><span>
党建工作</span></a></li>
<li class="menu_line"></li>
<%-- <li><a class="" id="mynav11" onmouseover="javascript:qiehuan(11)" href="Article.aspx?CatID=10"><span>
学生工作</span></a></li>
<li class="menu_line"></li>--%>
</ul>
<div id="menu_con">
<div id="qh_con1" style="display: block">
<ul>
</ul>
</div>
<div id="qh_con2" style="display: none">
<ul>
<asp:Repeater ID="repXuYuan" runat="server">
<ItemTemplate>
<li><a href="Article.aspx?CatID=1&cateID=<%#Eval("cate_ID") %>"><span><%#Eval("cate_Name").ToString()%></span></a></li>
<li class="menu_line2"></li>
</ItemTemplate>
</asp:Repeater>
</ul>
</div>
<div id="qh_con3" style="display: none">
<ul>
<asp:Repeater ID="repSuiZhongXing" runat="server">
<ItemTemplate>
<li><a href="Article.aspx?CatID=2&cateID=<%#Eval("cate_ID") %>"><span>
<asp:Literal ID="Literal1" Text='<%#Eval("cate_Name")%>' runat="server"></asp:Literal></span></a></li>
<li class="menu_line2"></li>
</ItemTemplate>
</asp:Repeater>
</ul>
</div>
<div id="qh_con4" style=" display:none; margin-left:100px;">
<ul style="text-align:center;">
<asp:Repeater ID="repJiaoXue" runat="server">
<ItemTemplate>
<li><a href="Article.aspx?CatID=3&cateID=<%#Eval("cate_ID") %>"><span><%#Eval("cate_Name").ToString()%></span></a></li>
<li class="menu_line2"></li>
</ItemTemplate>
</asp:Repeater>
</ul>
</div>
<div id="qh_con5" style="display: none; margin-left:250px;">
<ul>
<asp:Repeater ID="repKeyan" runat="server">
<ItemTemplate>
<li><a href="Article.aspx?CatID=4&cateID=<%#Eval("cate_ID") %>"><span><%#Eval("cate_Name").ToString()%></span></a></li>
<li class="menu_line2"></li>
</ItemTemplate>
</asp:Repeater>
</ul>
</div>
<div id="qh_con6" style="display: none; margin-left:300px;">
<ul>
<asp:Repeater ID="repTeam" runat="server">
<ItemTemplate>
<li><a href="Article.aspx?CatID=5&cateID=<%#Eval("cate_ID") %>"><span><%#Eval("cate_Name").ToString()%></span></a></li>
<li class="menu_line2"></li>
</ItemTemplate>
</asp:Repeater>
</ul>
</div>
<div id="qh_con7" style="display: none; margin-left:200px;">
<ul>
<asp:Repeater ID="repJPKC" runat="server">
<ItemTemplate>
<li><a href="Article.aspx?CatID=6&cateID=<%#Eval("cate_ID") %>"><span><%#Eval("cate_Name").ToString()%></span></a></li>
<li class="menu_line2"></li>
</ItemTemplate>
</asp:Repeater>
</ul>
</div>
<div id="qh_con8" style="display: none; margin-left:520px;">
<ul>
<asp:Repeater ID="repRCPY" runat="server">
<ItemTemplate>
<li><a href="Article.aspx?CatID=7&cateID=<%#Eval("cate_ID") %>"><span><%#Eval("cate_Name").ToString()%></span></a></li>
<li class="menu_line2"></li>
</ItemTemplate>
</asp:Repeater>
</ul>
</div>
<div id="qh_con9" style="display: none">
<ul>
<asp:Repeater ID="repDangJian" runat="server">
<ItemTemplate>
<li><a href="Article.aspx?CatID=8&cateID=<%#Eval("cate_ID") %>"><span><%#Eval("cate_Name").ToString()%></span></a></li>
<li class="menu_line2"></li>
</ItemTemplate>
</asp:Repeater>
</ul>
</div>
<div id="qh_con10" style="display: none">
<ul>
<asp:Repeater ID="repStudent" runat="server">
<ItemTemplate>
<li><a href="Article.aspx?CatID=9&cateID=<%#Eval("cate_ID") %>"><span><%#Eval("cate_Name").ToString()%></span></a></li>
<li class="menu_line2"></li>
</ItemTemplate>
</asp:Repeater>
</ul>
</div>
<div id="qh_con11" style="display: none">
<ul>
<asp:Repeater ID="Repeater10" runat="server">
<ItemTemplate>
<li><a href="Article.aspx?CatID=10&cateID=<%#Eval("cate_ID") %>"><span><%#Eval("cate_Name").ToString()%></span></a></li>
<li class="menu_line2"></li>
</ItemTemplate>
</asp:Repeater>
</ul>
</div>
</div>
</div>
</div>
</div>
展开全部
网站导航,可以直接用<asp:PlaceHolder ID="plhControl" runat="server"></asp:PlaceHolder>,然后后台直接输出A连接到这个控件。我现在就用的这套系统,你可以参考PetShop4.0的网站导航。上面有详细源代码
已赞过
已踩过<
评论
收起
你对这个回答的评价是?
展开全部
其实用什么控件都可以实现 比如说用Repeater控件就挺好的 布局随意 简单的绑定就可以实现
已赞过
已踩过<
评论
收起
你对这个回答的评价是?
展开全部
要看你实际应用了,菜单用Menu,菜单树用Treeview都需要手动实现数据绑定
已赞过
已踩过<
评论
收起
你对这个回答的评价是?
推荐律师服务:
若未解决您的问题,请您详细描述您的问题,通过百度律临进行免费专业咨询