[JavaScript 实例] 导航栏几种常见样式

这里记录下导航栏几种常见的样式,仅供大家参考。

导航栏1 (原生 JS 代码)

比较常见也比较简单的导航栏 ,用的 JavaScript 原生代码,大致思路是通过改变 li 元素的 className 实现鼠标移动切换 tab 时改变其背景色及文字颜色,同时切换显示 tab 对应内容。

nav-1.gif


  
    
    导航栏1-JS原生版
    
    
  
  
    
  

导航栏1(jQuery 代码)

还是第一种导航栏样式,通过 jQuery 实现,思路不变。



  
    
    导航栏2
    
    
    
  
  
    
  

导航栏2

使用 jQuery 代码,思路与第一种一样,通过改变 li 元素的 className 实现,只是不改变 tab 的背景色而只改变字体颜色,也是比较常见的导航栏样式之一。为了更好的显示效果,顺便给切换标签时字体颜色的改变加了渐变效果。

nav-2.gif


  
    
    导航栏2
    
    
    
  
  
    
  

导航栏3

使用 jQuery 代码,鼠标移动切换标签时 tab 背景色会通过滑动的方式切换至目标位置。实现思路是在之前导航栏样式基础上多加了个 li 标签,指定该 li 元素的定位类型为 absolute,同时还需设置其父元素为 relative 定位。然后在 JS 代码中修改上述 li 标签的 left 属性值,并且指定其文本内容(可获取当前 tab 的文本内容)。当然,最重要的是给该 li 标签添加过渡属性,否则 tab 切换就没有滑动效果了。

nav-3.gif


  
    
    导航栏3
    
    
    
  
  
    
  

导航栏4

使用 jQuery 代码,与上一种导航栏样式实现思路大致相同,只是把新添加的 li 更换为 div,同样设置好该 div 及其父元素的定位类型,并根据 tab 的高度自行调整 div 的高度及 top 属性值。除了该 div 无需设置文本内容外,还加入了 tab 切换时改变字体颜色,其他部分则上一种样式基本一致。

nav-4.gif


  
    
    导航栏4
    
    
    
  
  
    
  

你可能感兴趣的:([JavaScript 实例] 导航栏几种常见样式)