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

怎么制作手机移动端网站下拉菜单

傅汉松 技术教程

汉松出品|资源介绍

傅汉松本次为大家分享的是怎么制作手机移动端网站下拉菜单

傅汉松

手机移动端网站由于版面宽度很小,很难像PC网站一样将网站的导航菜单全部展现出来,通过的做法就是使用下拉菜单,点击后展现出来,再点击就再次隐藏。如下图:

做这种手机移动端网站下拉菜单在学做网站论坛的手机网站制作课程里也讲解了制作方法。那么在我们自己做网站时,怎么制作出这样的手机移动端网站下拉菜单呢?下面再介绍一下制作步骤。

方法/步骤

首先将手机站菜单写在一个DIV里,并且设置这个DIV为隐藏状态;例如WordPress程序可以这样写:

<div class="wapnavlist">
<?php wp_nav_menu( array( 'theme_location' =>'topmenu','container' => '','
menu_class' => 'topnav','menu_id' => 'topmeau','depth' => 1, ) ); ?>
</div>

在CSS里添加设置手机站菜单样式的代码;(先设置菜单为隐藏状态,并且设置菜单为绝对定位,以及菜单的宽度)

<style>
.wapnavlist{display:none;background:#fff;position:absolute;top:47px;right:0;width:36%;}
.wapnavlist li{padding:10px 0;text-align:center;}
</style>

在网页的底部标签上面放上JS代码,用于点击时显示菜单,再点击时隐藏菜单。

<script>
$(".wapnavbtn").click(
function(){
$(".wapnavlist").slideToggle();
});
</script>

这样就可以制作出一个具有点击显示/隐藏效果的手机移动端网站下拉菜单了。


标签: 暂无标签

免责声明:

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

同类推荐
评论列表

技术教程 怎么制作手机移动端网站下拉菜单
手机移动端网站由于版面宽度很小,很难像PC网站一样将网站的导航菜单全部展现出来,通过的做法就是使用下拉菜单,点击后展现出来,再点击就再次隐藏。如下图:做这种手机...
扫描二维码阅读原文
QQ娱乐网 January, 01
生成社交图 ×
    79.94ms