帝国模板之家为广大用户提供专业、一站式建站服务。

网页特效

网页特效栏目收集了最全最新的前端网页插件,包括最流行的jQuery,Bootstrap,Js,Css,Vue等主流特效插件。

当前位置:首页 > 资源 > 网页特效 > 正文

CSS响应式全屏菜单切换导航栏特效代码

帝国模板之家 2020-11-16 网页特效 评论

这是一款HTML和CSS/CSS3编写的灵敏的导航条,它能将导航子菜单转换成一个全宽菜单,并带有一个汉堡切换按钮。点击汉堡按钮将从屏幕左侧滑出画布外菜单。

使用方法:

1.修改CSS变量(颜色、转换、断点)以适合您的设计。

// main.scss
$breakpoint_tablet: 680px;
$breakpoint_desktop: 1040px;
$max_header_width: 1200px;
$color_background: #FAFAFA;
$color_background_alt: #e0e5eb;
$color_text: #121212;
$color_text_alt: #36bae6;
$color_border: #e0e5eb;
$transition_link: .14s ease-in-out;
$transition_anim: .22s ease-in-out;

2.编译main.scss到主.css .

sass /path/to/main.scss /path/to/main.css

3.在文件中加载main.css

<link rel="stylesheet" href="main.css" />

4.创建响应式导航栏HTML结构。

<header>
  <div class="container">
    <div class="logo">
      CSSScript
    </div>
    <input class="hamburger-button" type="checkbox" id="hamburger-button" />
    <label for="hamburger-button">
      <div></div>
    </label>
    <div class="menu">
      <nav>
        <ul>
            <li><a href="#">Home</a></li>
            <li><a href="#">About</a></li>
            <li><a href="#">Work</a></li>
            <li><a href="#">Contact</a></li>
        </ul>
      </nav>
      <div class="buttons">
        <a href="#" class="button primary">Login</a>
        <a href="#" class="button">Settings</a>
      </div>
    </div>
  </div>
</header>

会员登陆后即可下载资源文件。更多好用网站特效插件,请关注帝国模板之家

这世上无忧无虑的人,反而相对寿命会长点。

已有 位小伙伴发表了看法

欢迎 发表评论

  • 匿名发表

关于

帝国cms模板

网页插件

帝国模板之家 | www.moyouyouw.cn

本站所有模板/文章除标明原创外,均来自网络转载,版权归原作者所有,如果有侵犯到您的权益,请联系站长删除,谢谢! 寻找帝国cms模板首选帝国模板之家,用心做站,上线至今广受好评,值得信赖!

  • 交流群1:帝国cms交流群1
  • 交流群2:帝国cms交流群2
在线QQ 给我留言