uikit实现一个响应式带导航菜单和抽屉菜单的首页代码

代码语言:html

所属分类:响应式

代码描述:uikit实现一个响应式带导航菜单和抽屉菜单的首页代码,包含二级菜单和返回顶部效果。

代码标签: uikit 响应式 首页

下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <!-- UIkit CSS -->
    <link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/uikit.min.css">

    <!-- UIkit JS -->
    <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/uikit.min.js"></script>
    <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/uikit-icons.min.js"></script>

    <style>
        /* 
        one from one: 
        add background transition when you roll up and the navbar change back to transperenty */
        .uk-navbar-container{
          transition: background-color 0.5s ease;
        }
    </style>


</head>

<body>

    <!-- Sticky navbar -->
    <div class="uk-position-top" id="top">
        <nav class="uk-navbar-container uk-navbar-transparent uk-light" data-uk-navbar="dropbar: false;" data-uk-sticky="animation: uk-animation-slide-top; 
                       sel-target: .uk-navbar-container; 
                       cls-active: uk-navbar-sticky; 
                       cls-inactive: uk-navbar-transparent uk-light; top: 0">
            <!-- LEFT -->
            <div class="uk-navbar-left">
                <a class="uk-navbar-item uk-logo" href="#">Logo</a>
              
                <ul class="uk-navbar-nav uk-visible@m">
                    <li class="uk-active"><a href="#">Active</a></li>
                    <li>
                        <a href="#">Parent</a>
                        <div class="uk-navbar-dropdown">
                            <ul class="uk-nav uk-navbar-dropdown-nav">
                                <li class="uk-active"><a href="#">Active</a></li>
                                <li><a href="#">Item</a></li>
                                <li><a href="#">Item</a></li>
                            </ul>
                        </div>
                    </li>
                    <li><a href="#">Item</a></li>
                    <li>
                        <a href="#">
                            <span class="uk-icon uk-margin-small-right" uk-icon="icon: star"></span> Features
                        </a>
                    </li>
                </ul>
            </div>
            <!-- social icons - hide on mobile -->
            <div class="uk-navbar-right">
                <div class="uk-navbar-item  uk-visible@m">
                    <a title="Twitter" href="" class="uk-icon-button uk-margin-small-right" uk-icon="twitter"></a>
                    <a uk-tooltip="title: Facebook; pos: bottom-center" title="Facebook" href="" class="uk-icon-button  uk-margin-small-right" uk-icon="facebook"></a>
                    <a title="Google Plus" href="" class="uk-icon-button" uk-icon="google-plus"></a>
                </div>
            </div>
            <!-- search input -->
            <div id="search" class="uk-navbar-item uk-visible@m">
                <form action="javascript:void(0)">
                    <div class="uk-inline">
                        <a class="uk-form-icon uk-form-icon-flip" uk-icon="icon: search"></a>
                        <input class="uk-input uk-form-width-medium" type="text" placeholder="Search...">
                    </div>
                </form>
            </div>
            <!--off-canvas trigger hamburger btn. show only on mobile -->
            <a class="uk-navbar-toggle uk-hidden@m" href="#" data-uk-toggle="target: #offcanvas-nav-primary">
                <span uk-navbar-toggle-icon></span> <span class="uk-margin-small-left">Menu</span>
            </a>
        </nav>
    </div>


    <!-- OFF-CANVAS NAVBAR (Trigger by hamburger btn)
modes: push / slide / reveal /none 
-->
    <nav id="offcanvas-nav-primary" data-uk-offcanvas="overlay: true; mode: push; flip: true">
        <!-- offcanvas setting  -->
        <div class="uk-offcanvas-bar uk-flex uk-flex-column">
            <!-- navbar content her -->
            <!-- A - logo -->
            <a class="uk-align-left uk-logo" href="#">Logo - offcanvas</a>
            <!-- B - nav -->
            <ul class="uk-nav-default uk-nav-parent-icon" uk-nav>
                <li class="uk-active"><a href="#">Active - offcanvas</a></li>
                <li class="uk-parent">
                    <a href="#">Parent - offcanvas</a>
                    <ul class="uk-nav-sub">
                        <li><a href="#">Child one - offcanvas</a></li>
                        <li><a href="#">Child two - offcanvas</a></li>
                    </ul>
                </li>
                <li class=""><a href="#">ITEM - offcanvas</a></li>
            </ul>
            <!--C- contact us -->
            <footer class="uk-margin-large-top">
                <hr>
                <span uk-icon="icon: phone"><.........完整代码请登录后点击上方下载按钮下载查看

网友评论0