jquery左侧导航滑动网页定位效果

作者 2021-05-4 459

jquery 左侧导航滑动网页定位效果

专业PHP网站开发多年经验

ZUAN YE PHP WEBSITE KAIFA DUO NIAN JIN NIAN

专业PHP网站开发

高效的WordPress建站仿站

GAO XIAO DE WORDPRESS JIAN ZHAN FANG ZHAN

WordPress仿站

拥有多年网站定制开发经验

YONG YOU DUO NIAN WANG ZHAN DING ZI KAI FA JIN NIAN

WordPress主题开发

<!DOCTYPE HTML> <html style="padding-bottom: 54px;"> <head> <meta charset="utf-8"> <meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests"> <meta name="viewport" content="width=device-width, initial-scale=1"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="renderer" content="webkit"> <title>jquery左侧导航滑动网页定位效果</title> <meta name="description" content="jquery左侧导航滑动网页定位效果https://www.jq22.com/jquery-info692" /> <meta name="keywords" content="左侧导航滑动网页定位效果,导航,定位,jquery导航定位" /> <link rel="Shortcut icon" href="//www.jq22.com/favicon.ico" /> <link href="css/demo.css?v4" rel="stylesheet" media="all" />  <style> .fdad a{color:#000;display:inline-block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}.fdad{top:66px;}.xgcj li{font-size:14px;line-height:20px;list-style-type:none;transition:all 1s ease 0s;border-radius:5px;}.xgcj li:hover{background-color:#e4e4e4;}.xgcj{background-color:rgba(255,255,255,.3);overflow-x:hidden;}.xgcj ul{padding:10px}.xgcj h3{line-height:30px;}.xgcj p{padding-left:20px;font-size:13px;display:none;}.xgcj span{font-family:"宋体";}.xgcj li:hover p{display:block;} </style> <script type="text/javascript"> var txt = "https://www.jq22.com/demo/jqueryNav-141024111843"; window.g1 = txt.substr(0, 3); window.g2 = txt.substr(0, 19); </script> <script src="js/pace.min.js" charset="gbk"></script> <link href="css/pace-theme-barber-shop.css" rel="stylesheet" /> <script src="https://www.jq22.com/jquery/jquery-1.7.1.js"></script> <script src="js/jquery.qrcode.min.js"></script> <script type="text/javascript"> var dqfl = "导航"; var theme_list_open = false; $(document).ready(function () { function fixHeight() { var headerHeight = $("#switcher").height(); $("#iframe").attr("height", $(window).height() - 54 + "px"); } $(window).resize(function () { fixHeight(); }).resize(); $('.icon-monitor').addClass('active'); $(".icon-mobile-3").click(function () { $("#by").css("overflow-y", "auto"); $('#iframe-wrap').removeClass().addClass('mobile-width-3'); $('.icon-tablet,.icon-mobile-1,.icon-monitor,.icon-mobile-2,.icon-mobile-3').removeClass('active'); $(this).addClass('active'); return false; }); $(".icon-mobile-2").click(function () { $("#by").css("overflow-y", "auto"); $('#iframe-wrap').removeClass().addClass('mobile-width-2'); $('.icon-tablet,.icon-mobile-1,.icon-monitor,.icon-mobile-2,.icon-mobile-3').removeClass('active'); $(this).addClass('active'); return false; }); $(".icon-mobile-1").click(function () { $("#by").css("overflow-y", "auto"); $('#iframe-wrap').removeClass().addClass('mobile-width'); $('.icon-tablet,.icon-mobile,.icon-monitor,.icon-mobile-2,.icon-mobile-3').removeClass('active'); $(this).addClass('active'); return false; }); $(".icon-tablet").click(function () { $("#by").css("overflow-y", "auto"); $('#iframe-wrap').removeClass().addClass('tablet-width'); $('.icon-tablet,.icon-mobile-1,.icon-monitor,.icon-mobile-2,.icon-mobile-3').removeClass('active'); $(this).addClass('active'); return false; }); $(".icon-monitor").click(function () { $("#by").css("overflow-y", "hidden"); $('#iframe-wrap').removeClass().addClass('full-width'); $('.icon-tablet,.icon-mobile-1,.icon-monitor,.icon-mobile-2,.icon-mobile-3').removeClass('active'); $(this).addClass('active'); return false; }); if (dqfl.indexOf("APP模板") != -1) { $("#by").css("overflow-y", "auto"); $('#iframe-wrap').removeClass().addClass('mobile-width-2'); $('.icon-tablet,.icon-mobile-1,.icon-monitor,.icon-mobile-2,.icon-mobile-3').removeClass('active'); $(this).addClass('active'); return false; } }); </script> <script type="text/javascript"> function Responsive($a) { if ($a == true) $("#Device").css("opacity", "100"); if ($a == false) $("#Device").css("opacity", "0"); $('#iframe-wrap').removeClass().addClass('full-width'); $('.icon-tablet,.icon-mobile-1,.icon-monitor,.icon-mobile-2,.icon-mobile-3').removeClass('active'); $(this).addClass('active'); return false; }; </script> </head> <body id="by" style="overflow-y: hidden"> <div id="switcher"> <div class="center"> <ul> <li class="logoTop" id="sj2"><a href="https://www.jq22.com/jquery-info692">jquery左侧导航滑动网页定位效果</a></li> </ul> </div> </div> <div id="iframe-wrap"> <iframe id="iframe" src="https://www.jq22.com/demo/jqueryNav-141024111843" frameborder="0" width="100%"></iframe> </div> <div class="fdad"> <div class="fdl">Advertisement</div> <div class="fdr">x</div> <div class="fdadnr"> <script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>  <ins class="adsbygoogle" style="display:inline-block;width:336px;height:280px" data-ad-client="ca-pub-2935286260943234" data-ad-slot="6063645905"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> <div class="xgcj"> <ul> <div style="width:100%"> <div style="float:left"><h3>相关插件</h3></div> <div style="clear: left;"></div> </div> <li> <a href="https://www.jq22.com/jquery-info9082"><span>></span> jQuery后台左侧菜单导航</a> <p>jQuery导航菜单适用于后台网站侧边多级下拉导航菜单</p> </li> <li> <a href="https://www.jq22.com/jquery-info15109"><span>></span> Css多级侧边栏导航</a> <p>纯Css多级侧边栏导航</p> </li> <li> <a href="https://www.jq22.com/jquery-info14594"><span>></span> jQuery垂直四级导航</a> <p>jQuery垂直下拉多级菜单</p> </li> <li> <a href="https://www.jq22.com/jquery-info710"><span>></span> 基于jQuery的垂直菜单特效</a> <p>网站上常用的到的垂直菜单，基于jQuery的垂直菜单特效</p> </li> <li> <a href="https://www.jq22.com/jquery-info692"><span>></span> jquery左侧导航滑动网页定位效果</a> <p>jquery左侧导航滑动网页定位效果</p> </li> </ul> </div> </div> <script type="text/javascript"> $(document).ready(function () { $(".fdr").click(function () { $(".fdad").hide(); }); }); </script> </body> </html>

Tips:You can change the code before run.