手机版底部导航弹窗效果的一种简单的实现方式
最近在做一个DZ手机版Z整合项目,估计着难度不高就开工,中途看到admin的建站笔记,有收获,有失败。逐渐琢磨出对DZ的初步理解。
长话短说,上代码。
<div id="czfooter" style="z-index: 999;">//可以根据显示效果,修改数字:999 置顶呈现悬浮窗,DZ手机版自带的悬浮一般最高是1002左右,为了不重复管理功能的悬浮,设置为999
<!--<nav> -->
<ul id="czfooter_list">
<li class="list_li home active"><a href="forum.php" class="newth">{lang mobilehome}</a>//读取手机版自带首页</li>
<li class="list_li mall" ><a href="#" class="newth">商城</a></li>
<li class="list_li new" >
<p><a href = "JavaScript:void(0)"><b class="newth">+</b></a></p>
<div id="light" class="white_content">
<a href = "javascript:void(0)" onclick"document.getElementById('light').style.display='none';document.getElementById('fade').style.display='none'"><span class="newth"> 关闭</span></a>
<a href="#">//根据需要写上链接<span class="newth">发帖子</span></a>
<a href="#">//根据需要写上链接<span class="newth">发圈子</span></a><a href="search.php?mod=forum">//调用搜索功能<span class="newth">{lang search}</span>//调用搜索名称</a>
</div>
</li>
<li class="list_li find"><a href="#" class="newth">发现</a></li>
<li class="list_li profile">
<a href="<!--{if $_G[uid]}-->home.php?mod=space&uid=$_G[uid]&do=profile&mycenter=1<!--{else}-->member.php?mod=logging&action=login<!--{/if}-->" class="newth">我的</a><!--{if $_G[member][newpm]}-->//读取用户信息页面<span class="icon_msg"></span><!--{/if}-->//此项目去掉对显示样式会有意外的事情发生,这里就不去掉了,解决的办法没测试出来,希望知道的大神说下,这个干吗用的蒙圈中。
</li>
</ul>
<!-- </nav> -->
</div>
相对简单,只有一个DIV,五个小块,可以根据自己的需要写CSS。为了能尽量控制,每一个元素都加了CLASS,不需要的同学可以去掉。
长话短说,上代码。
<div id="czfooter" style="z-index: 999;">//可以根据显示效果,修改数字:999 置顶呈现悬浮窗,DZ手机版自带的悬浮一般最高是1002左右,为了不重复管理功能的悬浮,设置为999
<!--<nav> -->
<ul id="czfooter_list">
<li class="list_li home active"><a href="forum.php" class="newth">{lang mobilehome}</a>//读取手机版自带首页</li>
<li class="list_li mall" ><a href="#" class="newth">商城</a></li>
<li class="list_li new" >
<p><a href = "JavaScript:void(0)"><b class="newth">+</b></a></p>
<div id="light" class="white_content">
<a href = "javascript:void(0)" onclick"document.getElementById('light').style.display='none';document.getElementById('fade').style.display='none'"><span class="newth"> 关闭</span></a>
<a href="#">//根据需要写上链接<span class="newth">发帖子</span></a>
<a href="#">//根据需要写上链接<span class="newth">发圈子</span></a><a href="search.php?mod=forum">//调用搜索功能<span class="newth">{lang search}</span>//调用搜索名称</a>
</div>
</li>
<li class="list_li find"><a href="#" class="newth">发现</a></li>
<li class="list_li profile">
<a href="<!--{if $_G[uid]}-->home.php?mod=space&uid=$_G[uid]&do=profile&mycenter=1<!--{else}-->member.php?mod=logging&action=login<!--{/if}-->" class="newth">我的</a><!--{if $_G[member][newpm]}-->//读取用户信息页面<span class="icon_msg"></span><!--{/if}-->//此项目去掉对显示样式会有意外的事情发生,这里就不去掉了,解决的办法没测试出来,希望知道的大神说下,这个干吗用的蒙圈中。
</li>
</ul>
<!-- </nav> -->
</div>
相对简单,只有一个DIV,五个小块,可以根据自己的需要写CSS。为了能尽量控制,每一个元素都加了CLASS,不需要的同学可以去掉。
免责声明:本站所有文章和图片均来自用户分享和网络收集,文章和图片版权归原作者及原出处所有,仅供学习与参考,请勿用于商业用途,如果损害了您的权利,请联系网站客服处理。
热门教程
discuz电脑版、手机版去除标题title中的PoweredbyDisc2018-12-27
Discuz 触屏手机版支持视频播放的方法2018-12-27
discuz手机版支持视频播放的修改方法2018-12-27
Discuz! 程序 X3.2、X3.3升级3.4教程2018-12-27
discuz X3以及X3.4论坛搬家完美详细教程2019-01-02
怎么开启手机版2018-12-25
去掉Discuz论坛底部的Powered 等版权信息2018-12-27
discuz! x3.4插件位置DZ论坛X3版本插件在哪个文件夹?2018-12-26
Mysql修改端口号后织梦dedecms的修改方法2018-12-27
Discuz!X3.2论坛实现全站HTTPS终极方法教程2018-12-28