主页 > 其它问答 > > (dw中横向下拉导航栏怎么做)下拉横向菜单用CSS怎
最佳回答 最佳答案

本回答由网友推荐

袖拥

JavaScript下拉菜单*{padding:0;margin:0;}body{font-family:verdana,sans-serif;font-size:small;}#navigation,#navigationliul{list-style-type:none;}#navigation{margin:20px;}#navigationli{float:left;text-align:center;position:relative;}#navigationlia:link,#navigationlia:visited{display:block;text-decoration:none;color:#000;width:120px;height:40px;line-height:40px;border:1pxsolid#fff;border-width:1px1px00;background:#c5dbf2;padding-left:10px;}#navigationlia:hover{color:#fff;background:#2687eb;}#navigationliullia:hover{color:#fff;background:#6b839c;}#navigationliul{display:none;position:absolute;top:40px;left:0;margin-top:1px;width:120px;}#navigationliulliul{display:none;position:absolute;top:0px;left:130px;margin-top:0;margin-left:1px;width:120px;}functiondisplaySubMenu(li){varsubMenu=("ul")[0];subMenustyledisplay="block";}functionhideSubMenu(li){varsubMenu=("ul")[0];subMenustyledisplay="none";}栏目1

  • 栏目1->菜单1
  • 栏目1->菜单2
  • 栏目1->菜单3
  • 栏目1->菜单4
栏目2
  • 栏目2->菜单1
  • 栏目2->菜单2
  • 栏目2->菜单3
  • 栏目2->菜单4
  • 栏目2->菜单5
栏目3
    栏目3->菜单1
    • 菜单1->子菜单1
    • 菜单1->子菜单2
    • 菜单1->子菜单3
    • 菜单1->子菜单4
  • 栏目3->菜单2
  • 栏目3->菜单3
    • 菜单3->子菜单1
    • 菜单3->子菜单2
    • 菜单3->子菜单3
这是一个下啦菜单的代码你是懂代码一看就会你要是新手可以照着模仿

赞同 (64416)

反对 (467)

其它回答
百般娇宠

我之所以没有把代码沾上来,是因为我看到你说到“我不会程序,可以直接告诉我键盘和鼠标操作吗?”说实话,我真的不会在设计视图里面用键盘和鼠标去做div标记,记得在学校的时候老师也有教过,但是我就没有学,我就专牛角尖,我偏要用自己的双手一个代码一个代码敲出来,所以我不会设计视图做div框架,希望你能懂我说的真正的含义……一下图片是你要的效果代码,你可以把图片另存为,然后自己去代码视图敲代码,慢慢来,忘掉鼠标和键盘的操作吧。
我写了一个例子,你看看<!doctypehtmlpublic"-//w3c//dtdxhtml10transitional//en""http://wwww3org/tr/xhtml1/dtd/xhtml1-transitionaldtd"><htmlxmlns="http://wwww3org/1999/xhtml"><head><metahttp-equiv="content-type"content="text/html;charset=utf-8"/><title>无标题文档</title></head><styletype="text/css">body,ul{padding:0px;margin:0px;}ulli{list-style:none;}nav{width:200px;height:auto;}navulli{width:200px;height:24px;float:left;line-height:24px;text-align:center;font-size:12px;margin-top:1px;}navullia{width:200px;height:24px;background-color:#eeeeee;color:#000;text-decoration:none;display:block;}navullia:hover{width:200px;height:24px;background-color:#ccc;}</style><body><divclass="nav"><ul><li><ahref="#">home</a></li><li><ahref="#">product</a></li><li><ahref="#">aboutus</a></li></ul></div></body></html>

赞同 (44705)

反对 (502)

且共从容

不知道你用的DW几,我是在DW8下操作的,其它的版本应该类似:

1、打开DW后(设计视图),在工具栏上点“常用”,在下拉表中选择“表单”,在右面的工具里点表单图标,因为下拉菜单是表单项,须放在表单里面。

2、在右面的项目中接着找“列表/菜单”,点击即可插入一列表或菜单。

3、在设计窗口中双击插好的菜单,会自动打开属性,默认类型是“菜单”,这个可以不改,在靠右边有个列表值,单击打开,点加号添加项目标签(也就是那一项在网页中显示出来的名字),在后面填值单击确定即可。
无标题文档如果你要跳转的话还没做完,你先不要在值里填东西,
4、在DW的菜单栏里选择“行为”,打开行为面板。

5、在视图里点击选中下拉菜单,在行为面板里点—“”,选“跳转菜单”。

6、弹出了一个跳转菜单让你填,你选中某一个项,在下的转到的URL中填写你要转的链接就行了。
123不过现在一般都不用DW做这个了,这个菜单不太灵活,一般都是用JS做,比这做的好看多了,也灵活多了,要不用层做也行,同样通过行为来进行跳转。
行为在窗口菜单里,你点窗口就会弹出一个下拉菜单,你在里面找找。

赞同 (88523)

反对 (198)

去自经年

创建导航条如果不使用框架,可以在每个页面设置导航条,导航条设一组链接按钮,供浏览者选择使用。
按钮有多种形式,下边介绍由鼠标经过图像变换按钮的组成的导航条制作:
(导航条在页面顶部)“鼠标经过图像”是当访问者用鼠标指针指向该图像时,该图像发生变化。
“鼠标经过图像”由两个图片组成:
页面最初载入时显示的原始图像,访问者将鼠标指针移到原始图像上时显示另一幅图像。
提示:
事先您要制作好按钮图像,确保每个按钮的图像都具有相同的宽度和高度(以像素为单位)。
请执行以下操作:
打开主页(indexhtm)在“文档”窗口中,将插入点放置在要显示导航条的位置。
一般在导航条上边要放置一个横幅图像(logo),导航条就安排在logo下边的位置。
选择“插入”>“图像对象”>“导航条”。
弹出对话框如下:
在“插入导航条”对话框中,单击顶部加号“+”按钮,按照上图所示①②③④⑤对应的文本框,填入相应的文件。
即完成了一个按钮的添加。
然后,单击页面顶部的加号“+”按钮,添加另一个按钮。
重复以上步骤,直至您所需的按钮添加完毕。
勾选“预先载入图像”,在对话框底部的“插入”菜单中,选中“水平”。
勾选“使用表格”。
单击“确定”关闭该对话框,成功创建了导航条。
保存页面。
按F12,预览一下你的导航条,如果满意了,可以将该页面多次“另存为”其它页面,分别指定不同的名称。
比如:p1htm、p2htm等。
保存多少次视您的按钮数量而定。
然后,分别打开其它页面进行编辑。
【注】:
鼠标指针经过按钮,图像变化,只能在浏览器中看到效果

赞同 (18555)

反对 (69)

城市天际线

问题:前提是不是一下拉导航栏就移动,而是导航栏碰到顶端时才开始一起移动
百度导航栏固定特效,就能找到各种类型的方法了。
可以去懒人图库搜下下拉式导航条代码,找到自己中意的效果把代码复制下来就ok一、打开Dreamweaver,点击文件-新建菜单,创建一个HTML文件,输入网站导航栏文字,并选中输入的文字,在下面的属性栏链接处加一个空链接:
#。
然后保存该网页文件。
二、点击窗口-行为菜单,打开行为面板。
三、选中第一步输入的文字,点行为面板上的+号,在弹出的菜单中选-显示弹出式菜单。
四、在弹出的对话框中勾选Don’tshowmethismessageagain(不要再次向我提示此信息),再点继续。
五、在下列对话框分别设置内容、外观、高级、位置选项。
在内容选项中,点+号可以添加菜单项,-号可以删除菜单项,缩进项可以自动生成二级菜单。
六、各项都设置好后,按F12,在浏览器中预览网页效果如下:
此时你会发现和网页同级的目录多了两个文件,分别是:
arrowsgifmm_menujs。
请勿修改、移动位置,这是弹出式菜单必须的图片、JS文件。
如需修改下拉菜单,可以选中文字,点击行为面板的显示弹出式菜单即可。
如果下拉菜单下面有Flash,为了不影响下拉菜单的正常效果和层次,需要给Flash添加透明代码:
,还需在embed标签中加入代码:
wmode="transparent"。
我的QQ你加上给你发

赞同 (41911)

反对 (925)

吹散思绪

问题:用Dreamweaver8做网页时,下拉横向菜单用CSS怎么写?像这个网站的菜单一下的效果。
不想用JS写。
很简单啊,你知道用无序列表吗?
如果不知道的话,你就这样吧,你给导航条中的“中国”设置个事件onmouseover,一到你鼠标悬停到上面就显示那个下拉菜单,那个下拉菜单用个层来控制,这个要用到层的显示与隐藏!用个JS写层的展示影藏效果因为css只为几个伪选择支持变化;可以给你一点思路;div{overflow:hidden;}div:hove{overflow:visible;}你可以根据实际情况自己研究下;不过如上面的所说用js实现是最好的这里面有所有教程、而且很详细!

赞同 (3574)

反对 (873)

玖歌

问题:一定要用80版本的越详细越好了啦……
在dreamweaver80是不能做的,要做可以,那需要技术很高的编程一定要在Fireworks8中做好,然后导出网页形式在这里我打比方,你导出的HTML格式的文件名字为ahtm那么你再到dreamweaver80,在你需要插入下拉菜单的导航处,"插出",选择"图像对象",然后选择"FireworksHTML",选择"ahtm"这个文件,就可以了!不明白啊==!

赞同 (32815)

反对 (682)

草莓糯米糍

不知道你是用的DIV+CSS还是DW里自带的那种变换鼠标经过有一个鼠标事件HOVE的两图不能叠加的只能先放一张做背景然后鼠标移上去之后背景换成有效果的那张具体你可以在网上查询一下只能给你说一个大概的~~这种效果网上有很多的还有一种方法就是DW里自带的一种不过现在很少人用因为代码太多不像用DIV+CSS的代码很少效果都是在CSS里完成的~

赞同 (11058)

反对 (616)

喜爱弄人

问题:当鼠标点击导航菜单时,在此菜单下怎样才能出现下一级菜单
仔细看看,打开dreamweaver一步一步跟着做,我也是这么做的,现在我会做下拉菜单的导航条了,祝你成功!
你用层做显示隐藏层结合鼠标事件图文教程这有个下拉菜单,不知道你能用不。
可以用CSS做出来具体代码这里就不好演示了哈

赞同 (32387)

反对 (168)

4冄⒈9號

借用:
我觉得还是DIV+CSS来做比较好、还有就是利用ps来做的,最好自己买一本css来用,对自己会比较好。

赞同 (52577)

反对 (402)

相关百科

(油豆腐酿肉怎么做)油豆付酿肉怎么做好吃

内馅可以放入牛肉泥或猪肉泥,加入适量葱花,鸡蛋清,水,淀料,剁碎孛荠。依自己口味加入调料顺一个方向搅拌上劲。这样吃起来肉质嫩滑,加入了碎...全文

等你回答

换一换