JQuery implements simple sliding navigation code (mobile terminal) and jquery sliding
1.1 App navigation
Note: In this example, there are only two options for implementing a navigation Mountain.
1. Suitable for mobile terminals.
2. the slider length is the length of the Option content.
1.1.1.
1.1.2. Html
<! DOCTYPE html>
1.1.3. Css
<style type="text/css"> body,div,p{ margin:0; padding:0; } ul.slid{ display: block; position:fixed; top: 10px; left:0px; right:0px; height:60px; background: #f2f2f2; overflow: height; } ul.slid li{ display: inline-block; width: 49%; height: 40px; margin-top: 10px; float: left; text-align: center; overflow: hidden; } ul.slid li:first-child{ border-right: 1px solid red; } ul.slid li a{ display: inline-block; width: 120px; text-decoration:none; height:37px; line-height: 37px; color: #898989; overflow: hidden; } ul.slid li a:hover{ color: red; } #navLine{ height:2px; background-color:red; position:absolute; bottom:7px; width:0px; left:0px; display:none; overflow:hidden; } </style>
1.1.4. jQuery
<Script type = "text/javascript" >$ (function () {navSlid () ;}); // sliding navigation var navSlid = function () {var nline = $ ('# navline'); var lia = $ ('ul. slid li A'); // initialize the slider nline.css ({'width': lia. width (), 'left': parseInt (lia. position (). left)}); $ ('ul. slid li '). mouseenter (function () {// display the slider if(nline.css ('display') = 'None') {nline. show () ;}; // move the slider nline. stop (). animate ({width: $ (this ). width (), left: parseInt ($ (this ). position (). left) }, 300) ;};}; </script>