ホームページ >ウェブフロントエンド >htmlチュートリアル >ナビゲーション メニューの下部スライダーは、effect_html/css_WEB-ITnose に続きます
ナビゲーション メニューの下部スライダーは、effect_html/css_WEB-ITnose に続きます
- WBOYオリジナル
- 2016-06-21 08:57:531509ブラウズ
昨日オンラインでナビゲーションバーの効果を学び、今日手動で実装しました。とても満足しています。 。 。
Cuihua、これがレンダリングです!
実装コードは次のとおりです (アイデアについてはコードを参照してください)。
<!DOCTYPE html><html><head> <meta name="viewport" content="width=device-width" /> <title>navdemo1</title> <style> /* 1.位置属性(position, top, right, z-index, display, float等) 2.大小(width, height, padding, margin) 3.文字系列(font, line-height, letter-spacing, color- text-align等) 4.背景(background, border等) 5.其他(animation, transition等) */ * { padding: 0; margin: 0; font-family: 'Microsoft YaHei'; } a{text-decoration:none;} li{list-style:none;} .nav-wrap{position:relative;background-color:#000;} .nav-wrap .nav{width:1000px;margin:0 auto; overflow:hidden;} .nav-wrap .nav li{float:left;} .nav-wrap .nav li a{display:block; height:50px;padding:0 50px;line-height:50px;color:#fff;transition:background-color 0.3s linear;} .nav-wrap .nav li a:hover,.nav-wrap .nav li a.active{background-color:#484646;} .nav-wrap .line{display:block;position:absolute;bottom:0;width:50px;height:2px;background-color:#ff6a00;} </style> <script src="~/Scripts/jquery-1.8.2.js"></script> <script src="~/Scripts/jquery.easing.1.3.js"></script> <script> $(function () { navdeal(); }); //导航条效果处理 //思路： //1.下滑条绝对定位到导航条模块的底部 //2.js控制下滑条 宽度=当前菜单项的宽度 左边距=当前菜单项相对父元素（.nav-wrap）的左偏移 //3.加上easing.js中的弹性效果 var navdeal = function () { var $item_active = $('.nav-wrap .nav li a.active'); var $nav_line = $('.nav-wrap .line'); var item_width = $item_active.outerWidth(); var item_position_left = $item_active.position().left; $nav_line.css({ 'width': item_width, 'margin-left': item_position_left }); //菜单项鼠标移入，移出事件绑定 $('.nav-wrap .nav li a').bind({ mouseover: function () { var item_width = $(this).outerWidth(); var item_position_left = $(this).position().left; $nav_line.stop().animate({ 'width': item_width, 'margin-left': item_position_left }, 800, 'easeOutBounce'); }, mouseout: function () { $nav_line.stop().animate({ 'width': item_width, 'margin-left': item_position_left }, 800, 'easeOutBounce'); } }); } </script></head><body> <div class="nav-wrap"> <ul class="nav"> <li><a href="#" class="active">首页</a></li> <li><a href="#">我的订单</a></li> <li><a href="#">我的购物车</a></li> <li><a href="#">退出</a></li> </ul> <span class="line"></span> </div></body></html> 声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。