善恶资源网专注优秀技术教程分享网-傅汉松!

制作手机网站隐藏式下拉导航的方法

傅汉松 技术教程

汉松出品|资源介绍

傅汉松本次为大家分享的是制作手机网站隐藏式下拉导航的方法

傅汉松

我们现在建网站,都会建一个手机网站。手机网站与PC网站有一些不同,例如导航制作就有很大的区别。下面教大家制作手机网站隐藏式下拉导航的方法。

先看下手机网站隐藏式下拉导航的效果图:

制作方法/步骤

将手机网站导航的所有HTML代码使用以下的代码进行替换;

<header class="header">
<a href="#" class="logo"><img src="images/logo.png"></a>
<a href="#" class="search"><span>目的地搜索</span></a>
<a href="#" class="user-icon"><span>用户中心</span></a>
<div id="dl-menu" class="dl-menuwrapper">
<button id="dl-menu-button">Open Menu</button>
<ul class="dl-menu">
<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="Line">自由行</a>
<ul class="dl-submenu">
<li class="dl-back"><a href="#">返回上一级</a></li>
<li><a href="#">线路</a></li>
<li><a href="#">签证</a></li>
<li><a href="#">门票</a></li>
</ul>
</li>
</ul>
</div>
</header>

使用以下的CSS样式来控制手机网站隐藏式下拉导航。可以将以下的CSS样式放到自己的CSS文件代码里;

@charset "UTF-8";
.header{position:relative;height:50px;background:#006fe2}
.header .logo{display:block;width:130px;height:30px;padding:10px 0 0 10px}
.header .logo img{display:block;width:100%}
.header .search{position:absolute;top:0;right:35px;z-index:1000;display:block;width:50px;height:50px;text-indent:-9999em;background:url(../images/icon-search.png) no-repeat center center;background-size:40%}
.header .search:hover{background-color:#0067d2}
.header .search span{display:none}
.header .user-icon{position:absolute;top:0;right:70px;z-index:1000;display:block;width:50px;height:50px;text-indent:-9999em;background:url(../images/icon-user.png) no-repeat center center;background-size:40%}
.header .user-icon span{display:none}
.header .user-icon:hover{background-color:#0067d2}
.header .back{position:absolute;top:0;left:0;display:block;width:50px;height:50px;text-indent:-9999em;background:url(../images/icon-back.png) no-repeat center center;background-size:12px 20px}
@media(min-width:641px){body{width:640px;margin:auto}
}

下载手机网站隐藏式下拉导航制作必须的CSS文件【component.css】,下载地址:链接: https://pan.baidu.com/s/1wcuF5nM71ZcnQovF6qMY5A 提取码: p6k4

将【component.css】传到自己的文件目录下,使用以下的代码进行调用:(路径自行修改)

<link href="css/component.css" rel="stylesheet" type="text/css" />

下载手机网站隐藏式下拉导航制作必须的JS文件,下载地址:链接: https://pan.baidu.com/s/1zuFXZ1C0tdxpSLWNAQcfhg 提取码: mgxf

将JS文件上传到到自己的JS文件夹下,并使用以下的代码进行调用:

<script type="text/Javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/modernizr.custom.js"></script>
<script type="text/javascript" src="js/jquery.dlmenu.js"></script>

这样就可以制作好一个漂亮的手机网站隐藏式下拉导航了。

下面是整个手机网站隐藏式下拉导航的文件包,学习建网站的学员可以自己下载研究一下。下载地址:https://pan.baidu.com/s/1DIgzsRuk4m9uk81FZc7kAw 提取码: w8ff


标签: 暂无标签

免责声明:

本站提供的资源,都来自网络,版权争议与本站无关,所有内容及软件的文章仅限用于学习和研究目的。不得将上述内容用于商业或者非法用途,否则,一切后果请用户自负,我们不保证内容的长久可用性,通过使用本站内容随之而来的风险与本站无关,您必须在下载后的24个小时之内,从您的电脑/手机中彻底删除上述内容。如果您喜欢该程序,请支持正版软件,购买注册,得到更好的正版服务。侵删请致信E-mail:321976193@qq.com

同类推荐
评论列表

技术教程 制作手机网站隐藏式下拉导航的方法
我们现在建网站,都会建一个手机网站。手机网站与PC网站有一些不同,例如导航制作就有很大的区别。下面教大家制作手机网站隐藏式下拉导航的方法。先看下手机网站隐藏式下...
扫描二维码阅读原文
QQ娱乐网 January, 01
生成社交图 ×
    86.90ms