1. 爱易网页
  2. 页面UI设计
  3. 网页菜单详解_DreamWeaver应用实例_DreamWeaver教程

网页菜单详解_DreamWeaver应用实例_DreamWeaver教程

日期：2014-03-30　 浏览次数：20673 次

首先看这下面的例子（鼠标移上去）：

 Link 1
 Link 2
 Link 3
 
 Link N
菜单实例

　　类似这样的仿Windows下拉菜单，在网上是比较常见的，最初出现在微软网站上，之后被大量效仿。 事实上制作这样一个模拟菜单也并不是一件很困难的事，比如上面的例子代码如下： ------------------------------------------- <!-- 样式部分 --> <!-- 实现部分 --> &nbsp;Link 1<br> &nbsp;Link 2<br> &nbsp;Link 3<br> &nbsp;<br> &nbsp;Link N<br> 菜单实例 -----------------------------------　　那么下面我们就由浅入深的对这种模拟菜单进行分析讲解。

　　在讲解之前，有一点需要说明的是：笔者在后面讲解的代码都基于当前的主流浏览器Microsoft Internet Explorer（即我们通常所说的IE）下的。笔者进行调试的浏览器是IE 5.01。另外，这样一个菜单体现的是HTML/CSS/javascript的综合应用，这里并不对一些细节进行详细的讲解，所以你至少应该有一点这方面的基础。


　　基本原理

　　其实，这个菜单实现的原理简单的说就是：设置页面元素的CSS属性，对其进行定位并设置其是否可见，然后通过激发一定的事件，用javascript来动态的改变这些属性。

　　看下面几个CSS属性：

　　position：定位类型，取值static/absolute/relative，其代表的含义简单的说即无定位/绝对定位/相对定位；
　　left：距离左侧的位置（具体的参照物与position的设置有关），单位为px或%；
　　top：距离顶部的位置（具体的参照物与position的设置有关），单位为px或%。
　　display：页面元素的显示状态，如取值block表示做为块状元素显示，none则为不显示，还有其他一些取值（如inline等）这里就不做详解。

　　比如上例中的“div id=myMenu style="position:absolute;left:-10px;top:18px;display:none...”就是使用了这几个属性。

　　下面我们来看看如何用javascript来控制页面元素的CSS属性。

　　对HTML有一定了解的朋友一定清楚，几乎所有的标记都有一个style属性，通过设置这个属性来设置该标记的CSS属性（即CSS的内联用法）。在javascript中，每一个标记都被视为Document对象的一个子对象，而该标记的每一个HTML属性也都是这个对象的属性或子对象，style就是其中一个，通过用javascript控制style的属性，就达到了动态改变页面元素CSS属性的目的。如上例中的“onmouseover="myMenu.style.display='block'"”就是一个很普通的用法，其中myMenu即我们所看到的“菜单”的ID，它原来的display为none，即不显示，当鼠标移上去时，变为block，即块状显示。

　　另外要提的是：前面只说了如何实现定位、如何动态控制，那么定位的、控制的是什么元素呢？原则上来讲，大部分块状元素（如div、table）都可以，而在IE中，div标记（注意，在一些非IE浏览器中，并不支持div标记）因其使用的灵活性和方便性而做为我们的首选。上例使用的就是div标记。

　　好啦，基本的过程，上面大致已经说完了，在下一章，我们将看到使用上面提到的技术来实现一个简单的菜单。  
模拟网页下拉菜单中有几个比较关键的CSS属性：position、left、top、display，同时，他们也是style对象的属性,今天我们就用这几个基本属性来实现一个简单的网页菜单。

　　首先请大家看笔者已经做好的一个实例，然后我们对这个例子进行详细代码讲解。

　　为大家阅读方便，这里采用在代码中加注释的方式，红色部分为注释。




　　代码如下：

------------------------------------------------------

<HTML>

<head>

<title>菜单实例</title>

<style type=text/CSS>

td,div  { font: normal 12px 宋体; }

</style>

</head>

<body style="margin-left:12px;margin-top:16px;">

<table cellpadding=0 cellspacing=0 width=90% height=20 bgcolor=#CCCCCC>

  <tr>

    <td width=10> </td>

    <td width=80 align=center onmouseover="menuShow(menu01)"

    onmouseout="menuHide(menu01)">菜单实例</td>

    <!--

      上两行为菜单中显示的文字，注意这里面的事件触发：

      onmouseover="menuShow(menu01)"　鼠标经过时显示菜单；

      onmouseout="menuHide(menu01)"　鼠标移走时隐藏菜单。

      参数menu01即要显示的菜单的id，将在接下来的代码中看到。

      menuShow与menuHide分别为显示、隐藏菜单方法，将在后面定义。

    -->

    <td> </td>

  </tr>

</table>

<div style="position:absolute;top:36px;left:20px;display:none;

width:80px;height:100px;background-color:#DDDDDD;" id=menu01

onmouseover="menuShow(this)" onmouseout="menuHide(this)">

<!--

  以上三行，定义了菜单的一些属性，注意“id=menu01”，前面提到过。

  position、top、left、display四个CSS属性即上一章讲过的；

  width、height、background-color分别为宽度、高度、背景色。

  这里再一次出现onmouseover="menuShow(this)" onmouseout="menuHide(this)"，

  就是说当鼠标从菜单按钮上移开，如果是移到了菜单上，菜单仍然显示。

  注意这里参数是this而不是menu01，this即对象本身，在这里就是指menu01，所以结果相同。

  在这里笔者有意使用this，只是想告诉大家一个技巧，这在很多时候非常方便。

-->

  <br>   菜单内容

</div>

<script language=javascript>

function menuShow(menu) //定义显示


                        

                    
                    


                    

                    



    

        
相关资料更多>

    

    

        
    

            
                  
    
                      
  1. 
                        电子商务网站B2C的6个大数据
    2. 
                   
                
                  
    
                      
  2. 
                        视觉设计任务如何保证更高效？
    3. 
                   
                
                  
    
                      
  3. 
                        设计之处:交流沟通之关于讨教的效果
    4. 
                   
                
                  
    
                      
  4. 
                        Frontpage中网页字体的美化
    5. 
                   
                
                  
    
                      
  5. 
                        PHOTOSHOP小技巧(6)
    6. 
                   
                
                  
    
                      
  6. 
                        Dreamweaver运用13条技巧
    7. 
                   
                
                  
    
                      
  7. 
                        用FrontPage 2000创立网页动画
    8. 
                   
                
                  
    
                      
  8. 
                        设计思想:老板对用户体验细节的关注
    9. 
                   
                
                  
    
                      
  9. 
                        Dreamweaver MX 2004视频宝典教程(91)
    10.