jQuery實現導航樣式布局操作示例【可自定義樣式布局】

2019-11-19 13:25:46

字體：大中小

來源：轉載

供稿：網友

本文實例講述了jQuery實現導航樣式布局操作。分享給大家供大家參考，具體如下：

1. 導航Html

<!DOCTYPE html><html lang="en"><head>  <meta charset="UTF-8">  <title>www.49028c.com 導航樣式布局</title>  <link rel="stylesheet" href="style.css" rel="external nofollow" >  <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>  <script src="nav.js"></script>  <script>    $(function () {      $('.list').eq(0).nav('yellow','19px');    })  </script></head><body><ul class="list">  <li>導航列表    <ul class="nav">      <li>導航列表1</li>      <li>導航列表1</li>      <li>導航列表1</li>      <li>導航列表1</li>      <li>導航列表1</li>    </ul>  </li>  <li>導航列表    <ul class="nav">      <li>導航列表2</li>      <li>導航列表2</li>      <li>導航列表2</li>      <li>導航列表2</li>      <li>導航列表2</li>    </ul>  </li>  <li>導航列表    <ul class="nav">      <li>導航列表3</li>      <li>導航列表3</li>      <li>導航列表3</li>      <li>導航列表3</li>      <li>導航列表3</li>    </ul>  </li>  <li>導航列表    <ul class="nav">      <li>導航列表4</li>      <li>導航列表4</li>      <li>導航列表4</li>      <li>導航列表4</li>      <li>導航列表4</li>    </ul>  </li>  <li>導航列表    <ul class="nav">      <li>導航列表5</li>      <li>導航列表5</li>      <li>導航列表5</li>      <li>導航列表5</li>      <li>導航列表5</li>    </ul>  </li></ul></body></html>

2. 導航css布局代碼

@charset "utf-8";body{  margin: 0;}.list{  list-style-type:none;  margin: 0;  padding: 0;  font-size: 14px;  color: #fff;  width: 500px;  margin:50px auto;}.list li{  float: left;  width: 100px;  height: 30px;  line-height: 30px;  text-align: center;  background-color: #333333;  cursor: pointer;}.nav{  /*list-style:none;*/  margin:0;  padding:0;  display:none;/*color:color ;*/  /*background-color: ;*/}

3. 導航js自定義布局代碼

/** * Created by Administrator on 2016/5/23. */;(function ($) {  $.fn.extend(    {     'nav':function (color,fonts) {     $(this).find('.nav').css({          'list-style':'none',          'margin':0,          'padding':0,          'display':'none',          'color':color,          'font-size':fonts        });        $(this).find('.nav').parent('li').hover(function () {          $(this).find('.nav').slideDown('normal');        },function () {          $(this).find('.nav').stop().slideUp('normal');        })        return this;      }    }  );})(jQuery);

使用在線HTML/CSS/JavaScript代碼運行工具：http://tools.VeVB.COm/code/HtmlJsRun測試，效果如下：