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="#">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