如何用dreamweaver制作动态导航效果

就是QQ空间里面有的导航是动态的,能不能用dreamweaver制作啊,我不太会用计算机语言编写,一般我是直接在效果页面制作的

1.首先打开dreamweaver创建新页面。如图:

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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>百度知道</title>
<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script type="text/javascript"> 
$(document).ready(function(){
  $(".flip").mouseover(function(){
    $(this).next("div").slideDown(500);
  });
  $(".content").mouseleave(function(){
    $(this).children("div").slideUp(500);
  });
});
</script>
   
<style type="text/css"> 
div.panel,p.flip
{
  
margin:0px;
padding:5px;
text-align:center;

border:solid 1px #c3c3c3;
}
div.panel
{
  
height:120px;
display:none;
}
</style>
   
<body>
 <div class="content" style="float:left;display:block;width:300px;">
<p class="flip">滑过这里</p>
<div class="panel">
<p>11111111111111111</p>
<p>2222222222222222222222</p>
</div>
 </div>
<div class="content" style="float:left;display:block;width:300px;">
<p class="flip">滑过这里</p>
<div class="panel">
<p>百度芝麻酱</p>
<p>百度行家团</p>
</div>
 </div>
</body>
</html>

3.输入完成后运行代码查看效果,如图:

温馨提示:内容为网友见解,仅供参考
第1个回答  2013-08-13
动态导航制作,DW,可以实现,需要加入一些JS代码.图片切换,显示,隐藏!都可以,!不是有个行为面板吧!
第2个回答  推荐于2017-12-15
那些一般都是FLASH做的..
DW唯一能作的就是鼠标经过图片..你也可以引用很多网站提供下载的JS导航!
为你找了一个很酷的,你可以看看,希望对你有帮助!
http://d.lanrentuku.com/down/js/daohang-734/本回答被网友采纳
第3个回答  2013-08-13
dreamweaver可以的 用 js 写!你也可以找个 JQuery的 滚动条插件 可以叫我QQ

如何用dreamweaver制作动态导航效果
1.首先打开dreamweaver创建新页面。如图:2.创建完成后输入以下代码,如图:<!DOCTYPE html PUBLIC "-\/\/W3C\/\/DTD XHTML 1.0 Transitional\/\/EN" "http:\/\/www.w3.org\/TR\/xhtml1\/DTD\/xhtml1-transitional.dtd">百度知道 $(document).ready(function(){ $(".flip").mouseover(function(){ $...

怎样在Dreamweaver设置导航条?
1.打开Dreamweaver软件应用程序,这里用的是cs6版本。2.打开“文件”菜单,在下拉中找到“新建(N)”,或者用快捷键"ctrl+n"来直接新建一个html文档。3.在新建的html文件上,我点开的是“拆分”模式,所以左侧显示的是代码,右边是效果,这样可以在左边写代码,右边预览。4.在Dreamweavercs6中已经没有...

动态网站中用Dreamweaver怎么实现点击了左边栏,右边的窗体固定显示,而...
链接方法是:首先选择左列导航条文字,给它添加链接,然后在目标那里选择要打开的位置应该选择mainframe(主窗体),这就是打开链接时所选的框架页面。

有没有人知道在Dreamweaver中怎么制作下图中的导航,不会做求大侠帮帮 ...
公司简介 发展历程 荣耀 关于山水 下拉列表本来是隐藏的,当鼠标指上的时候的属性就是onmouseover把style变成block就可以显示了。当鼠标移开的方法是onmouseout,把style改成none就可以了。

怎样用dreamweaver制作导航条
导航条制作方法:移动光标到需要导航条的地方,单击主菜单栏的“Insert\\Navigation Bar”子命令,或直接单击Objects面板上的图标,弹出“Insert Navigation Bar”对话框,此时我们可以进行各种设置来实现上述功能:在“Element Name”项后的文本框填入这个部位的命名,也可以不填,这时Dreamweaver 3将自动给它...

怎样用Dreamweaver做出背景不动,内容动的效果
呵呵,上面的都不对。在你的CSS里加了背景的地方加入background-attachment:fixed;这样就可以背景不动了。也可以这样加的background:url(01.jpg) no-repeat fixed;

Dreamweaver动态站点怎么设置?
第一步:打开dw,选择菜单“站点”---“新建”---“站点”;第二步:填写站点名称;服务器地址:http:\/\/localhost;第三步:选择服务器技术php,asp,asp.net,jsp,这里选择php;第四步:选择网站的地址;第五步:选择测试网络---本地网络,文件存储在服务器端的位置:\\;第六步:询问使用什么地址...

dw导航栏跳转不同主页
1、在dreamweaver中打开网站文件。2、选择要添加导航栏的页面,是网站的首页。3、在页面上添加一个导航栏,可以使用html代码和使用dreamweaver的可视化界面来创建导航栏。4、为每个导航栏项添加链接,在html代码中,可以使用标签来创建链接。5、对于其他导航栏项,可以重复步骤4,为每个项添加相应的链接。

淘宝导航动态制作方法,主图可以用动态图嘛?
淘宝导航动态制作方法:淘宝动态导航是通过代码来实现的,也就是说商家在装修店铺的时候,将动态导航的密码粘贴到代码页面,就可以实现动态的效果了。一般情况下,淘宝动态导航的代码可以去网上找一下,多测试几个,总会看到有效果的。具体设置方法如下:1、先设计店铺导航,打开ps软件,新建一个1920X150的...

DREAMWEAVER做导航条的问题。
50px;background:url(images\/bg.gif) repeat-y;} ul li{display:block;width:100px;height:50px;float:left;} ul li a{display:block;width:100px;height:50px;background-color:red;} ul li a:hover{background-color:blue;} 方法就这样,细节你再用调整。能不用js就不用,js不安全 ...

相似回答
大家正在搜