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

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

代码语言：html

所属分类：响应式

代码描述：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=".........完整代码请登录后点击上方下载按钮下载查看