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

网友评论0