导航样式布局(自定义样式布局)

导航样式布局(自定义样式布局)

1.导航Html

• 导航列表
  • 导航列表1
  • 导航列表1
  • 导航列表1
  • 导航列表1
  • 导航列表1
• 导航列表
  • 导航列表2
  • 导航列表2
  • 导航列表2
  • 导航列表2
  • 导航列表2
• 导航列表
  • 导航列表3
  • 导航列表3
  • 导航列表3
  • 导航列表3
  • 导航列表3
• 导航列表
  • 导航列表4
  • 导航列表4
  • 导航列表4
  • 导航列表4
  • 导航列表4
• 导航列表
  • 导航列表5
  • 导航列表5
  • 导航列表5
  • 导航列表5
  • 导航列表5

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);

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。