仿掘金项目顶部导航

作者: 蛋炒饭_By | 来源:发表于2018-04-09 14:56 被阅读19次

仿掘金项目顶部导航
Android
仿网易新闻的顶部导航指示器
Android 仿微信底部渐变颜色导航栏
iOS隐藏导航条的坑
跟着广告滚动变色navbar
完整项目 - 收藏集 - 掘金
仿掘金项目首页制作
TabLayout+ViewPager+Fragment
Android精选完整源码之控件指示器视频压缩日历源码！

顶部导航之网站logo

   <header>
        <div class="uk-container uk-container-center">
            <nav class="uk-navbar">
                <a class="uk-navbar-brand" href="#" title="掘金">
                    <img src="https://gold-cdn.xitu.io/v3/static/img/logo.a7995ad.svg" alt="掘金" width="60" height="60">
                </a>
            </nav>
        </div>
    </header>

image

添加导航菜单

    <header>
        <div class="uk-container uk-container-center">
            <nav class="uk-navbar">
                <a class="uk-navbar-brand" href="#" title="掘金">
                    <img src="https://gold-cdn.xitu.io/v3/static/img/logo.a7995ad.svg" alt="掘金" width="60" height="60">
                </a>
                <ul class="uk-navbar-nav">
                    <li>
                        <a href="#">首页</a>
                    </li>
                    <li>
                        <a href="#">开源库</a>
                    </li>
                    <li>
                        <a href="#">标签</a>
                    </li>
                </ul>
            </nav>
        </div>
    </header>

image

导航栏右侧登录注册按钮

   <header>
        <div class="uk-container uk-container-center">
            <nav class="uk-navbar">
                <a class="uk-navbar-brand" href="#" title="掘金">
                    <img src="https://gold-cdn.xitu.io/v3/static/img/logo.a7995ad.svg" alt="掘金" width="60" height="60">
                </a>
                <ul class="uk-navbar-nav">
                    <li>
                        <a href="#">首页</a>
                    </li>
                    <li>
                        <a href="#">开源库</a>
                    </li>
                    <li>
                        <a href="#">标签</a>
                    </li>
                </ul>

                <div class="uk-navbar-content uk-navbar-flip">
                    <div class="uk-button-group">
                        <a class="uk-button uk-button-primary uk-margin-right" href="#">免费注册</a>
                        <a class="uk-button uk-button-primary" href="#">立即登录</a>
                    </div>
                </div>
            </nav>
        </div>
    </header>

image

头部美化

 <header id="app-header">
        <div class="uk-container uk-container-center">
            <nav class="uk-navbar app-nav">
                <a class="uk-navbar-brand" href="#" title="掘金">
                    <img src="https://gold-cdn.xitu.io/v3/static/img/logo.a7995ad.svg" alt="掘金" width="60" height="60">
                </a>
                <ul class="uk-navbar-nav">
                    <li>
                        <a href="#">首页</a>
                    </li>
                    <li>
                        <a href="#">开源库</a>
                    </li>
                    <li>
                        <a href="#">标签</a>
                    </li>
                </ul>

                <div class="uk-navbar-content uk-navbar-flip">
                    <div class="uk-button-group">
                        <a class="uk-button uk-button-primary uk-margin-right" href="#">免费注册</a>
                        <a class="uk-button uk-button-primary" href="#">立即登录</a>
                    </div>
                </div>
            </nav>
        </div>
    </header>

自定义样式

 #app-header {
              background: #fff;
              height: 58px;
              border-bottom: 1px solid #ccc;
              width: 100%;
              position: fixed;
              z-index: 999999;
              top:0px;
          }
          .app-nav
          {
              background: 0;
              border: 0;
          }

          #app-header .uk-navbar-brand, #app-header .uk-navbar-content{
              height: 58px;
          }

          #app-header .uk-navbar-nav > li > a {
              height: 58px;
              line-height: 58px;
              font-family: "Microsoft Yahei";
              font-size: 16px;
              padding: 0 11px;
          }

image.png