您的位置：程序门 -> .net技术 -> c#



csdn的个人空间的右上部的横向的二级下拉菜单是怎么做的啊？


[收藏此页] [打印本页]选择字色：背景色：字体：[大][中][小]


csdn的个人空间的右上部的横向的二级下拉菜单是怎么做的啊？[已结贴,结贴人:zzmdegm]
发表于：2007-09-29 14:50:44 楼主
它是用ul和li标签做的。但我把它的代码copy下来后是个竖的，怎么能把它横过来的，从而实现它那样的状态呢

发表于：2007-09-29 15:34:321楼 得分:0
up
发表于：2007-09-29 15:43:032楼 得分:0
看他的class
发表于：2007-09-29 15:48:373楼 得分:0
to:楼上

找了的啊，把所的*.js文件都下下来了，就是有些class找不到。烦
发表于：2007-09-30 08:27:044楼 得分:0
up
发表于：2007-10-08 09:12:445楼 得分:0
up
发表于：2007-10-17 10:51:296楼 得分:20
<html>
  <head>
    <title>   横向菜单   </title>  
    <style>
    .mainmenufloatleft{float:left;}
    </style>
  </head>

  <body>
    <script   type="text/javascript">
function   settab（m,n){
var   tli=document.getelementbyid（"menu"+m).getelementsbytagname（"li");
var   mli=document.getelementbyid（"main"+m).getelementsbytagname（"ul");
for（i=0;i <tli.length;i++){
tli[i].classname=i==n?"mainmenufloatleft":"";
mli[i].style.display=i==n?"block":"none";
}
}
</script>
<table   cellpadding="0"   align="center"   border="0"   cellspacing="0">
<tr>
<td   bgcolor="#efefd0">
<div>
        <ul   id="menu0">
                <!--   这里的样式一定要用"style"格式，不能用"class="格式。不然移动mouse时不能定住浮动成一行的样式   -->
                <li   style="float:left;"> <a   href="#"> <span> 我要   ¦ </span> </a> </li>
                <li   style="float:left;"   onmouseover="settab（0,1)"> <a   href="#"> <span> 去社区   ¦ </span> </a> </li>
                <li   style="float:left;"   onmouseover="settab（0,2)"> <a   href="#"> <span> 写博客   ¦ </span> </a> </li>
                <li   style="float:left;"   onmouseover="settab（0,3)"> <a   href="#"> <span> 看图书   ¦ </span> </a> </li>
                <li   style="float:left;"   onmouseover="settab（0,4)"> <a   href="#"> <span> 下资源   ¦ </span> </a> </li>
                <li   style="float:left;"   onmouseover="settab（0,5)"> <a   href="#"> <span> 去群组   ¦ </span> </a> </li>
                <li   style="float:left;"   onmouseover="settab（0,6)"> <a   href="#"> <span> 找工作   ¦ </span> </a> </li>
                <li   style="float:left;"   onmouseover="settab（0,7)"> <a   href="#"> <span> 接项目   ¦ </span> </a> </li>
                <li   style="float:left;"   onmouseover="settab（0,8)"> <a   href="#"> <span> csdn控制台 </span> </a> </li>
        </ul>
</div>
</td>
</tr>
<tr>
<td   bgcolor="#f4f4ef">
<div   id="main0">
        <!--   这个ul给上面"menu0"的ul作定位用   -->
        <ul>                
</ul>
        <ul>
                <li   class="mainmenufloatleft"> <a   href='http://community.csdn.net/'   target='_blank'> 社区首页 </a>   ¦   </li>  
                <li   class="mainmenufloatleft"> <a   href='http://community.csdn.net/expert/member/myforum.asp?typenum=1'   target='_blank'> 我的问题 </a>   ¦   </li>
                <li   class="mainmenufloatleft"> <a   href='http://community.csdn.net/expert/member/myforum.asp?typenum=3'   target='_blank'> 我的得分问题 </a>   ¦   </li>
                <li   class="mainmenufloatleft"> <a   href='http://community.csdn.net/expert/member/myforum.asp?typenum=2'   target='_blank'> 我参与的问题 </a>   ¦   </li>
                <li   class="mainmenufloatleft"> <a   href='http://message.csdn.net/listmessage.aspx'   target='_blank'> 我的短消息 </a> </li>
</ul>
        <ul   style="display:   none;">
                <li   class="mainmenufloatleft"> <a   href='http://blog.csdn.net/'   target='_blank'> 博客首页 </a>   ¦   </li>
                <li   class="mainmenufloatleft"> <a   href='http://blog.csdn.net/latestentry.aspx'   target='_blank'> 最新文章 </a>   ¦   </li>
                <li   class="mainmenufloatleft"> <a   href='http://writeblog.csdn.net/postedit.aspx'   target='_blank'> 发表新文章 </a>   ¦   </li>
                <li   class="mainmenufloatleft"> <a   href='http://writeblog.csdn.net/postlist.aspx'   target='_blank'> 管理我的文章 </a>   ¦   </li>
                <li   class="mainmenufloatleft"> <a   href='http://writeblog.csdn.net/feedback.aspx'   target='_blank'> 我的评论 </a> </li>
        </ul>
        <ul   style="display:   none;">
                <li   class="mainmenufloatleft"> <a   href='http://book.csdn.net/'   target='_blank'> 图书首页 </a>   ¦   </li>
                <li   class="mainmenufloatleft"> <a   href='http://www.dearbook.com.cn/'   target='_blank'> 我要买书 </a>   ¦   </li>
                <li   class="mainmenufloatleft"> <a   href='http://club.book.csdn.net/people/myclub.aspx'   target='_blank'> 我的书友会 </a>   ¦   </li>
                <li   class="mainmenufloatleft"> <a   href='http://bank.csdn.net/'   target='_blank'> 我的社区银行 </a> </li>
        </ul>
        <ul   style="display:   none;">
                <li   class="mainmenufloatleft"> <a   href='http://download.csdn.net/'   target='_blank'> 资源首页 </a>   ¦   </li>
                <li   class="mainmenufloatleft"> <a   href='http://download.csdn.net/sort/new/all'   target='_blank'> 最新资源 </a>   ¦   </li>
                <li   class="mainmenufloatleft"> <a   href='http://download.csdn.net/sort/hot/all'   target='_blank'> 热门资源 </a>   ¦   </li>
                <li   class="mainmenufloatleft"> <a   href='http://download.csdn.net/upfile/'   target='_blank'> 发布新资源 </a> </li>
        </ul>
        <ul   style="display:   none;">
                <li   class="mainmenufloatleft"> <a   href='http://group.csdn.net/all'   target='_blank'> 群组首页 </a>   ¦   </li>
                <li   class="mainmenufloatleft"> <a   href='http://groups.csdn.net/mygroups'   target='_blank'> 我的群组 </a>   ¦   </li>
                <li   class="mainmenufloatleft"> <a   href='http://groups.csdn.net/ijoined'   target='_blank'> 我参与的群组 </a>   ¦   </li>
                <li   class="mainmenufloatleft"> <a   href='http://groups.csdn.net/exgroups'   target='_blank'> 推荐群组 </a>   ¦   </li>
                <li   class="mainmenufloatleft"> <a   href='http://groups.csdn.net/create'   target='_blank'> 创建新群组 </a>   ¦   </li>
                <li   class="mainmenufloatleft"> <a   href='http://groups.csdn.net/group/subscribeservices.aspx'   target='_blank'> 订阅群组 </a> </li>
        </ul>
        <ul   style="display:   none;">
                <li   class="mainmenufloatleft"> <a   href='http://job.csdn.net/'   target='_blank'> 人才首页 </a>   ¦   </li>
                <li   class="mainmenufloatleft"> <a   href='http://job.csdn.net/con002_userinfo/portal/login_user.aspx'   target='_blank'> 我的简历 </a>   ¦   </li>
                <li   class="mainmenufloatleft"> <a   href='http://job.csdn.net/con002_userinfo/portal/login_ent.aspx'   target='_blank'> 我要招聘人才 </a>   ¦   </li>
                <li   class="mainmenufloatleft"> <a   href='http://job.csdn.net/emag/default.aspx'   target='_blank'> 订阅人才周刊 </a> </li>
        </ul>
        <ul   style="display:   none;">
                <li   class="mainmenufloatleft"> <a   href='http://prj.csdn.net/'   target='_blank'> 外包首页 </a>   ¦   </li>
                <li   class="mainmenufloatleft"> <a   href='http://prj.csdn.net/developer/default.aspx'   target='_blank'> 我的外包中心 </a>   ¦   </li>
                <li   class="mainmenufloatleft"> <a   href='http://prj.csdn.net/developer/projectlist.aspx'   target='_blank'> 我申请的项目 </a>   ¦   </li>
                <li   class="mainmenufloatleft"> <a   href='http://prj.csdn.net/developer/itemlist.aspx'   target='_blank'> 我的案例 </a>   ¦   </li>
                <li   class="mainmenufloatleft"> <a   href='http://prj.csdn.net/developer/myadditem.aspx'   target='_blank'> 添加新案例 </a> </li>
        </ul>
        <ul   style="display:   none;">
                <li   class="mainmenufloatleft"> <a   href='http://passport.csdn.net/newpassword.aspx'   target='_blank'> 新设密码 </a>   ¦   </li>
                <li   class="mainmenufloatleft"> <a   href='http://passport.csdn.net/modifyqa.aspx'   target='_blank'> 修改问题答案 </a>   ¦   </li>
                <li   class="mainmenufloatleft"> <a   href='http://passport.csdn.net/modifyemail.aspx'   target='_blank'> 修改email </a>   ¦   </li>
                <li   class="mainmenufloatleft"> <a   href='http://passport.csdn.net/protocol.aspx'   target='_blank'> 注册条款 </a> </li>  
        </ul>
<!--   这个ul给上面"main0"的ul作定位用   -->
<ul> </ul>
</div>
</td>
</tr>
</table>

  </body>
</html>
发表于：2007-10-17 11:03:177楼 得分:0
楼上的是用到了css的浮动（float）原理与标记 <ul> <li> 来做的功能。把标记 <li> 的每个元素都浮动到左边形成一行来实现

css   float是网页设计最强大的灵活性功能之一。
任何元素   element   都可以被浮动。段落、div、list、tables,以及图像都可以被浮动，事实上即使是像   span   和   strong   这样的行内置元素也可以很好地进行浮动。
任何申明为   float   的元素自动被设置为一个"块级元素",   这表示它可以具有申明的"width"和"height"属性。事实上，floats当前被要求具有一个申明的宽度，但这不是现代浏览器制造者的思路，w3c以及开始同意这样的作法。现在大多数人的意见是没有指定宽度的float应当伸缩包装到浮动内容的宽度。因此，内部带有图片的一个float将和图片一样宽，带有文本的一个浮动将与该浮动内的最长文本行一样宽。
浮动"从流程中被移除出来",   但是与绝对位置的元素（层次）不同，浮动是在他们前面的最后一个块元素之后直接被显示出来（就像块盒一样）。如果该浮动是在一个“行块”中，该浮动的上边界被放置在行块顶部的水平上。当除此以外，浮动与绝对元素相似，原先的块盒会完全忽略浮动和ap元素。那些静态的块盒知识保持一个接一个地”跟随“，就好像没有浮动不在那里一样。

发表于：2007-10-23 16:46:278楼 得分:0
一个好看一点的：

<html>
  <head>
    <title>   横向菜单   </title>  
    <style>
    .mainmenufloatleft{float:left;height:30;margin-top:10px}
    .mainstyle{background-color:   #efefd0;}
    </style>
  </head>

  <body>
    <script   type="text/javascript">
function   settab（m,n){
var   tli=document.getelementbyid（"menu"+m).getelementsbytagname（"li");
var   mli=document.getelementbyid（"main"+m).getelementsbytagname（"ul");
for（i=0;i <tli.length;i++){
tli[i].classname=i==n?"mainstyle":"";
mli[i].style.display=i==n?"block":"none";
}
}
</script>
<table   cellpadding="0"   align="center"   border="0"   cellspacing="0">
<tr>
<td   bgcolor="#f4f4ef">
<div>
        <ul   id="menu0">
                <!--   这里的样式一定要用"style"格式，不能用"class="格式。不然移动mouse时不能定住浮动成一行的样式   -->
                <li   style="float:left;width:   80px;text-align:   center"> <a   href="#"> <span> <font   color="black"> 我要 </font> </span> </a> </li>
                <li   style="float:left;width:   80px;text-align:   center"   onmouseover="settab（0,1)"> <a   href="#"> <span> <font   color="black"> 去社区 </font> </span> </a> </li>
                <li   style="float:left;width:   80px;text-align:   center"   onmouseover="settab（0,2)"> <a   href="#"> <span> <font   color="black"> 写博客 </font> </span> </a> </li>
                <li   style="float:left;width:   80px;text-align:   center"   onmouseover="settab（0,3)"> <a   href="#"> <span> <font   color="black"> 看图书 </font> </span> </a> </li>
                <li   style="float:left;width:   80px;text-align:   center"   onmouseover="settab（0,4)"> <a   href="#"> <span> <font   color="black"> 下资源 </font> </span> </a> </li>
                <li   style="float:left;width:   80px;text-align:   center"   onmouseover="settab（0,5)"> <a   href="#"> <span> <font   color="black"> 去群组 </font> </span> </a> </li>
                <li   style="float:left;width:   80px;text-align:   center"   onmouseover="settab（0,6)"> <a   href="#"> <span> <font   color="black"> 找工作 </font> </span> </a> </li>
                <li   style="float:left;width:   80px;text-align:   center"   onmouseover="settab（0,7)"> <a   href="#"> <span> <font   color="black"> 接项目 </font> </span> </a> </li>
                <li   style="float:left;width:   80px;text-align:   center"   onmouseover="settab（0,8)"> <a   href="#"> <span> <font   color="black"> csdn控制台 </font> </span> </a> </li>
        </ul>
</div>
</td>
</tr>
<tr>
<td   bgcolor="#efefd0"   style="vertical-align:   middle;">
<div   id="main0">
        <!--   这个ul给上面"menu0"的ul作定位用   -->
        <ul>                
</ul>
        <ul>
                <li   class="mainmenufloatleft"> <a   href='http://community.csdn.net/'   target='_blank'> 社区首页 </a>   ¦   </li>  
                <li   class="mainmenufloatleft"> <a   href='http://community.csdn.net/expert/member/myforum.asp?typenum=1'   target='_blank'> 我的问题 </a>   ¦   </li>
                <li   class="mainmenufloatleft"> <a   href='http://community.csdn.net/expert/member/myforum.asp?typenum=3'   target='_blank'> 我的得分问题 </a>   ¦   </li>
                <li   class="mainmenufloatleft"> <a   href='http://community.csdn.net/expert/member/myforum.asp?typenum=2'   target='_blank'> 我参与的问题 </a>   ¦   </li>
                <li   class="mainmenufloatleft"> <a   href='http://message.csdn.net/listmessage.aspx'   target='_blank'> 我的短消息 </a> </li>
</ul>
        <ul   style="display:   none;">
                <li   class="mainmenufloatleft"> <a   href='http://blog.csdn.net/'   target='_blank'> 博客首页 </a>   ¦   </li>
                <li   class="mainmenufloatleft"> <a   href='http://blog.csdn.net/latestentry.aspx'   target='_blank'> 最新文章 </a>   ¦   </li>
                <li   class="mainmenufloatleft"> <a   href='http://writeblog.csdn.net/postedit.aspx'   target='_blank'> 发表新文章 </a>   ¦   </li>
                <li   class="mainmenufloatleft"> <a   href='http://writeblog.csdn.net/postlist.aspx'   target='_blank'> 管理我的文章 </a>   ¦   </li>
                <li   class="mainmenufloatleft"> <a   href='http://writeblog.csdn.net/feedback.aspx'   target='_blank'> 我的评论 </a> </li>
        </ul>
        <ul   style="display:   none;">
                <li   class="mainmenufloatleft"> <a   href='http://book.csdn.net/'   target='_blank'> 图书首页 </a>   ¦   </li>
                <li   class="mainmenufloatleft"> <a   href='http://www.dearbook.com.cn/'   target='_blank'> 我要买书 </a>   ¦   </li>
                <li   class="mainmenufloatleft"> <a   href='http://club.book.csdn.net/people/myclub.aspx'   target='_blank'> 我的书友会 </a>   ¦   </li>
                <li   class="mainmenufloatleft"> <a   href='http://bank.csdn.net/'   target='_blank'> 我的社区银行 </a> </li>
        </ul>
        <ul   style="display:   none;">
                <li   class="mainmenufloatleft"> <a   href='http://download.csdn.net/'   target='_blank'> 资源首页 </a>   ¦   </li>
                <li   class="mainmenufloatleft"> <a   href='http://download.csdn.net/sort/new/all'   target='_blank'> 最新资源 </a>   ¦   </li>
                <li   class="mainmenufloatleft"> <a   href='http://download.csdn.net/sort/hot/all'   target='_blank'> 热门资源 </a>   ¦   </li>
                <li   class="mainmenufloatleft"> <a   href='http://download.csdn.net/upfile/'   target='_blank'> 发布新资源 </a> </li>
        </ul>
        <ul   style="display:   none;">
                <li   class="mainmenufloatleft"> <a   href='http://group.csdn.net/all'   target='_blank'> 群组首页 </a>   ¦   </li>
                <li   class="mainmenufloatleft"> <a   href='http://groups.csdn.net/mygroups'   target='_blank'> 我的群组 </a>   ¦   </li>
                <li   class="mainmenufloatleft"> <a   href='http://groups.csdn.net/ijoined'   target='_blank'> 我参与的群组 </a>   ¦   </li>
                <li   class="mainmenufloatleft"> <a   href='http://groups.csdn.net/exgroups'   target='_blank'> 推荐群组 </a>   ¦   </li>
                <li   class="mainmenufloatleft"> <a   href='http://groups.csdn.net/create'   target='_blank'> 创建新群组 </a>   ¦   </li>
                <li   class="mainmenufloatleft"> <a   href='http://groups.csdn.net/group/subscribeservices.aspx'   target='_blank'> 订阅群组 </a> </li>
        </ul>
        <ul   style="display:   none;">
                <li   class="mainmenufloatleft"> <a   href='http://job.csdn.net/'   target='_blank'> 人才首页 </a>   ¦   </li>
                <li   class="mainmenufloatleft"> <a   href='http://job.csdn.net/con002_userinfo/portal/login_user.aspx'   target='_blank'> 我的简历 </a>   ¦   </li>
                <li   class="mainmenufloatleft"> <a   href='http://job.csdn.net/con002_userinfo/portal/login_ent.aspx'   target='_blank'> 我要招聘人才 </a>   ¦   </li>
                <li   class="mainmenufloatleft"> <a   href='http://job.csdn.net/emag/default.aspx'   target='_blank'> 订阅人才周刊 </a> </li>
        </ul>
        <ul   style="display:   none;">
                <li   class="mainmenufloatleft"> <a   href='http://prj.csdn.net/'   target='_blank'> 外包首页 </a>   ¦   </li>
                <li   class="mainmenufloatleft"> <a   href='http://prj.csdn.net/developer/default.aspx'   target='_blank'> 我的外包中心 </a>   ¦   </li>
                <li   class="mainmenufloatleft"> <a   href='http://prj.csdn.net/developer/projectlist.aspx'   target='_blank'> 我申请的项目 </a>   ¦   </li>
                <li   class="mainmenufloatleft"> <a   href='http://prj.csdn.net/developer/itemlist.aspx'   target='_blank'> 我的案例 </a>   ¦   </li>
                <li   class="mainmenufloatleft"> <a   href='http://prj.csdn.net/developer/myadditem.aspx'   target='_blank'> 添加新案例 </a> </li>
        </ul>
        <ul   style="display:   none;">
                <li   class="mainmenufloatleft"> <a   href='http://passport.csdn.net/newpassword.aspx'   target='_blank'> 新设密码 </a>   ¦   </li>
                <li   class="mainmenufloatleft"> <a   href='http://passport.csdn.net/modifyqa.aspx'   target='_blank'> 修改问题答案 </a>   ¦   </li>
                <li   class="mainmenufloatleft"> <a   href='http://passport.csdn.net/modifyemail.aspx'   target='_blank'> 修改email </a>   ¦   </li>
                <li   class="mainmenufloatleft"> <a   href='http://passport.csdn.net/protocol.aspx'   target='_blank'> 注册条款 </a> </li>  
        </ul>
<!--   这个ul给上面"main0"的ul作定位用   -->
<ul> </ul>
</div>
</td>
</tr>
</table>

  </body>
</html>
发表于：2007-10-29 09:19:129楼 得分:0
上面的代码正确，但显示会不正常。把“> ”的标记变成半角就正常了

相关文章
其他资讯

快速检索
分类导航标签a

最新资讯
热门点击