导航:首页 > 万维百科 > 网页设计如何添加下拉栏

网页设计如何添加下拉栏

 发布时间：2020-10-13 14:57:41

1、网页设计中如何在导航图片上加入弹出下拉菜单？

下个网页魔法菜单

2、网页下拉菜单怎么制作

<!DOCTYPE html PUBliC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="zh-CN">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>css菜单演示</title>

<style type="text/css">
<!--

*{margin:0;padding:0;border:0;}
body {
font-family: arial, 宋体, serif;
font-size:12px;
}

#nav {
line-height: 24px; list-style-type: none; background:#666;
}

#nav a {
display: block; width: 80px; text-align:center;
}

#nav a:link {
color:#666; text-decoration:none;
}
#nav a:visited {
color:#666;text-decoration:none;
}
#nav a:hover {
color:#FFF;text-decoration:none;font-weight:bold;
}

#nav li {
float: left; width: 80px; background:#CCC;
}
#nav li a:hover{
background:#999;
}
#nav li ul {
line-height: 27px; list-style-type: none;text-align:left;
left: -999em; width: 180px; position: absolute;
}
#nav li ul li{
float: left; width: 180px;
background: #F6F6F6;
}

#nav li ul a{
display: block; width: 180px;w\idth: 156px;text-align:left;padding-left:24px;
}

#nav li ul a:link {
color:#666; text-decoration:none;
}
#nav li ul a:visited {
color:#666;text-decoration:none;
}
#nav li ul a:hover {
color:#F3F3F3;text-decoration:none;font-weight:normal;
background:#C00;
}

#nav li:hover ul {
left: auto;
}
#nav li.sfhover ul {
left: auto;
}
#content {
clear: left;
}

-->
</style>

<script type=text/javascript><!--//--><![CDATA[//><!--
function menuFix() {
var sfEls = document.getElementById("nav").getElementsByTagName("li");
for (var i=0; i<sfEls.length; i++) {
sfEls[i].onmouseover=function() {
this.className+=(this.className.length>0? " ": "") + "sfhover";
}
sfEls[i].onMouseDown=function() {
this.className+=(this.className.length>0? " ": "") + "sfhover";
}
sfEls[i].onMouseUp=function() {
this.className+=(this.className.length>0? " ": "") + "sfhover";
}
sfEls[i].onmouseout=function() {
this.className=this.className.replace(new RegExp("( ?|^)sfhover\\b"),

"");
}
}
}
window.onload=menuFix;

//--><!]]></script>

</head>
<body>

<ul id="nav">
<li><a href="#">产品介绍</a>
<ul>
<li><a href="#">产品一</a></li>
<li><a href="#">产品一</a></li>
<li><a href="#">产品一</a></li>
<li><a href="#">产品一</a></li>
<li><a href="#">产品一</a></li>
<li><a href="#">产品一</a></li>
</ul>
</li>
<li><a href="#">服务介绍</a>
<ul>
<li><a href="#">服务二</a></li>
<li><a href="#">服务二</a></li>
<li><a href="#">服务二</a></li>
<li><a href="#">服务二服务二</a></li>
<li><a href="#">服务二服务二服务二</a></li>
<li><a href="#">服务二</a></li>
</ul>
</li>
<li><a href="#">成功案例</a>
<ul>
<li><a href="#">案例三</a></li>
<li><a href="#">案例</a></li>
<li><a href="#">案例三案例三</a></li>
<li><a href="#">案例三案例三案例三</a></li>
</ul>
</li>
<li><a href="#">关于我们</a>
<ul>
<li><a href="#">我们四</a></li>
<li><a href="#">我们四</a></li>
<li><a href="#">我们四</a></li>
<li><a href="#">我们四111</a></li>
</ul>
</li>

<li><a href="#">在线演示</a>
<ul>
<li><a href="#">演示</a></li>
<li><a href="#">演示</a></li>
<li><a href="#">演示</a></li>
<li><a href="#">演示演示演示</a></li>
<li><a href="#">演示演示演示</a></li>
<li><a href="#">演示演示</a></li>
<li><a href="#">演示演示演示</a></li>
<li><a href="#">演示演示演示演示演示</a></li>
</ul>
</li>
<li><a href="#">联系我们</a>
<ul>
<li><a href="#">联系联系联系联系联系</a></li>
<li><a href="#">联系联系联系</a></li>
<li><a href="#">联系</a></li>
<li><a href="#">联系联系</a></li>
<li><a href="#">联系联系</a></li>
<li><a href="#">联系联系联系</a></li>
<li><a href="#">联系联系联系</a></li>
</ul>
</li>

</ul>

</body>
</html>

3、怎么用Dreamweaver制作网页网站下拉菜单

如果是用开源程序做的网站，比如dede的，可以直接把以下代码放到底部模板，然后上传一个合适的图片文件就可以了。
<script type='text/javascript' src='{dede:global.cfg_cmsurl/}/images/js/dropdown.js'></script>
{dede:channelartlist typeid='top' cacheid='channelsonlist'}
<ul id="dropmenu{dede:field.typeid/}" class="dropMenu">
{dede:channel type='son' noself='yes'}
<li><a href="[field:typelink/]">[field:typename/]</a></li>
{/dede:channel}</ul>
{/dede:channelartlist}
<script type="text/javascript">cssdropdown.startchrome("navMenu")</script>
如果是使用dreamdvear来直接写的话，可以参考下面制作下拉菜单的详细步骤来完成：
http://jingyan.baidu.com/article/9113f81b0e3fec2b3214c7ac.html

4、网页制作，慢慢下拉的菜单怎么做？

这个效果你可以通过2中途径实现，使用框架或者是使用JavaScript代码。

1.使用框架：查找框架中的二级菜单组建，如Bootstrap中的导航条中的二级菜单。下面的是一个二级下拉菜单的例子


<nav class="navbar navbar-default">
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
      <ul class="nav navbar-nav">
        <li class="active"><a href="#">Link <span class="sr-only">(current)</span></a></li>
        <li><a href="#">Link</a></li>
        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
          <ul class="dropdown-menu">
            <li><a href="#">Action</a></li>
            <li><a href="#">Another action</a></li>
            <li><a href="#">Something else here</a></li>
            <li role="separator" class="divider"></li>
            <li><a href="#">Separated link</a></li>
            <li role="separator" class="divider"></li>
            <li><a href="#">One more separated link</a></li>
          </ul>
        </li>
      </ul>
      
    </div><!-- /.navbar-collapse -->
  </div><!-- /.container-fluid -->
</nav>

详细内容参见http://v3.bootcss.com/components/#navbar

2.使用JavaScript代码。使用jQuery的动画实现，如slideToggle()可使元素上下滑动，并且可以使用参数控制快慢。

<script>
//ID menu是点击的以及菜单，触发的是点击事件，当然可以换成hover事件，ID submenu是二级菜单层。
$("#menu").click(function(){
    $("#submenu").slideToggle();
});
</script>

slideToggle()请参考http://www.w3school.com.cn/jquery/jquery_slide.asp

5、网页制作~如何修改下拉菜单的内容。。。

目前网上有最好的答案！我之前看到过，网址我忘记了！也是在百度收索的。

它有多重方式下拉！全部是JS调用！很轻松！

6、网页中的按钮怎么制作下拉菜单啊?

在flash里面直接做好连接
1、建一个元件，比如命名为“按钮链接”
2、将“按钮链接”导入FLASH舞台中你设计的位置；
3、点击“按钮链接”一下哦，然后点击动作菜单/全函数/“浏览器/网络”/双击getURL
在脚本编辑栏中会出现getURL();
在括弧中输入"http://地址"，注意一定要加" " 哦，否则语法错误；
然后写入:
on(release) {
getURL("http://地址");
}
最后面给一个连接，可以参考下。有解释getURL()得具体用法。有问题欢迎留言交流，因为这里的修改次数是有限的，经常有的问题修改几次就不让在改答案了。

跳转的地址可以在本地测试,前提是网页最好在flash同目录里面,直接引用
on(release) {
getURL("网页.htm");
}

7、如何在 HTML 页面中创建简单的下拉列表框

select标签可以创建下拉列表，列入

  <select>
    <option value="1">我是下拉项目1</option>
    <option value="2">我是下拉项目2</option>
    <option value="3">我是下拉项目3</option>
    <option value="4">我是下拉项目4</option>
  </select>

8、网页制作中如何做下拉菜单

在Dreamweaver中轻松实现滑动折叠菜单-太平洋电脑网
http://www.pconline.com.cn/pce/sj/wz/dreamweaver/0603/776492_2.html

Dreamweaver MX 2004简体中文版进阶教程(三)之弹出菜单-中华网科技频道
http://tech.china.com/zh_cn/netschool/homepage/dreamweaver/develop/2005061503.html

蓝色理想 - 下拉菜单全攻略
http://www.blueidea.com/tech/web/2003/301.asp

与网页设计如何添加下拉栏相关的知识