手机移动端可滚动的导航代码

最新推荐文章于 2023-03-31 22:03:16 发布

reg183

最新推荐文章于 2023-03-31 22:03:16 发布

阅读量568

点赞数

分类专栏：前端文章标签： javascript

本文链接：https://blog.csdn.net/chendongpu/article/details/124856900

版权

前端专栏收录该内容

255 篇文章 3 订阅

订阅专栏

请添加图片描述
主要代码如下：

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<meta name="keywords" content="JS代码,菜单导航,JS广告代码,JS特效代码" />
<meta name="description" content="此代码内容为手机移动端可滚动的导航代码" />
<title>手机移动端可滚动的导航代码</title>

	<!--demo展示所用css，不用关心 begin-->
	<link rel="stylesheet" type="text/css" href="css/reset.css" />
	<!--demo展示所用css end-->
	<!--组件依赖css begin-->
	<link rel="stylesheet" type="text/css" href="css/widget/navigator/navigator.css" />
	<link rel="stylesheet" type="text/css" href="css/widget/navigator/navigator.iscroll.css" />
	<link rel="stylesheet" type="text/css" href="css/widget/navigator/navigator.default.css" /><!--皮肤文件，若不使用该皮肤，可以不加载-->
	<link rel="stylesheet" type="text/css" href="css/widget/navigator/navigator.iscroll.default.css" /><!--皮肤文件，若不使用该皮肤，可以不加

载-->
	<!--组件依赖css end-->
	<!--组件依赖js begin-->
	<script type="text/javascript" src="js/zepto.js"></script>
	<script type="text/javascript" src="js/zepto.extend.js"></script>
	<script type="text/javascript" src="js/zepto.ui.js"></script>
	<script type="text/javascript" src="js/zepto.iscroll.js"></script>
	<script type="text/javascript" src="js/widget/navigator.js"></script>
	<script type="text/javascript" src="js/widget/navigator.iscroll.js"></script>
	<!--组件依赖js end-->
    
</head>
<body>
<div id="nav-smartSetup">
    <ul>
        <li><a href="#">要闻</a></li>
        <li><a href="#">国内</a></li>
        <li><a href="#">国际</a></li>
        <li><a href="#">军事</a></li>
        <li><a href="#">社会</a></li>
        <li><a href="#">娱乐</a></li>
        <li><a href="#">女人</a></li>
        <li><a href="#">体育</a></li>
        <li><a href="#">科技</a></li>
        <li><a href="#">互联网</a></li>
        <li><a href="#">教育</a></li>
        <li><a class="cur" href="#">财经</a></li>
        <li><a href="#">房产</a></li>
        <li><a href="#">汽车</a></li>
    </ul>
</div>

<script type="text/javascript">
    (function () {
        /*组件初始化js begin*/
        $('#nav-smartSetup').navigator();    //smart setup方式创建 推荐方式
    })();
</script>


<style type="text/css">
.my_info{ margin:30px;}
.my_info p{ text-align:center; font:normal 12px/30px 'MicroSoft YaHei';}
</style>

</body>
</html>

下载源码

reg183

关注

0
点赞
踩
4

收藏

觉得还不错? 一键收藏
打赏
0
评论
手机移动端可滚动的导航代码

主要代码如下：<!DOCTYPE HTML><html><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><meta name="keywords" content="JS代码,菜单导航,JS广告代码,JS特效代码" /><meta name="description" content="此代码内容为手机移动端可滚动的导航代码".
复制链接

扫一扫