最终效果如上,手机端(左)、电脑端(右)
使用的jQuery,所以只要你的页面引用了一次jQuery,那么代码量真的是相当少,两三段就实现了js控制,那么,粗暴一点,直接贴代码吧。
HTML框架:
<header id="header">
<nav class="navs">
<a href="#" class="logo">iDevs</a>
<div id="switch">Menu</div>
<ul class="menu case_menu">
<li class="current"><a href="#header">Home</a></li>
<li><a href="#title">Service</a></li>
<li><a href="#about">About</a></li>
<li><a href="#maps">Contact</a></li>
</ul>
</nav>
</header>
<script type="text/javascript" src="//cdn.bootcss.com/jquery/3.0.0-beta1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#switch").click(function(){
$(".case_menu").toggle(300);
});
});
</script>
CSS:
#header{width:100%;height:2000px;}
#header .navs{background:#5c7;height: 80px;width: 100%;line-height:80px;}
#header .navs .logo{float:left;display: block;margin: 0 10px;color: #fff;font-size: 30px;}
#header #switch{display:none;}
#header .navs .menu{float: right;}
#header .navs .menu li{display: inline;}
#header .navs .menu li a{color: #fff;padding: 0 10px;font-size:20px;text-decoration:none;transition:.2s;}
#header .navs .menu li a:hover{text-shadow:1px 1px 1px #295}
#header .navs .menu li.current a{text-shadow:0 0 10px #fff, 0 0 20px #fff, 0 0 30px #fff}
@media(max-width:700px){
#header #switch{display:block;float:right;color:#fff;padding:0 10px;margin: 0 10px 0 0; font-size:20px;background:#3a5;cursor: pointer;}
#header .navs .menu{position:absolute;right:10px;top:80px;display:none;background:#3a5;height:200px;width:180px;text-align:center;}
#header .navs .menu li{line-height:50px;}
#header .navs .menu li a{display:block;font-size:16px;width:100%;padding:0}
#header .navs .menu li a:hover,#header .navs .menu li.current a{background: #295}
}
Demo效果
嗯,大概就是这样,上面代码的Demo效果如下:
自行修改代码美化吧,就不继续贴代码了。
你好,能不能做一个登录注册地弹窗控件放在首页,谢谢了
@Itcat
个性化功能不免费提供,你可以自行DIY
你文章底部的打赏入口icon为什么不用「赏」字,而是用了一个「打」字。。。
@小雨
原意是打赏,所有人都用赏,我用打难道不很有趣嘛。哈哈
感觉很炫,我的网站需要弄弄了
我试试评论
感谢,正在使用你的主题
你学写代码的过程是怎样的,用啥工具调试呢
@穹庐 瞎写,有什么问题就搜索啊
我用的是你的主题,网站http://www.sjk5.top,麻烦帮看下!
博主你好,我问下,为什么我的首页有些文章的时间显示不出来呢?谢谢!
@收集控 下个版本会推送更新
@Tokin 呵呵,在你新年红包中这篇文章评论中找到答案了!好简洁的主题,代码文件就这个,爽!
学习了
你好,用了你的主题,但是出现两个问题。一是标题栏只显示网址,不显示title,可能是缺少header.asp。二是,用了baidu-sitemaps插件,生成了http://域名/sitemap.html,打开是404,请教。
@刚哥笔记
不了解,你试试其他主题是否可以
@Tokin 但是你的可以显示title,同样的源码,奇怪
@刚哥笔记
我访问你博客是正常的啊