css 带切换器的下拉菜单
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了css 带切换器的下拉菜单相关的知识，希望对你有一定的参考价值。
.container
nav.navbar-default.uk-navbar
ul.uk-navbar-nav
li.uk-parent(data-uk-dropdown='')
a About
.uk-dropdown.uk-dropdown-navbar
ul.uk-nav.uk-nav-navbar
li
a About us
li
a News
li.uk-parent(data-uk-dropdown='')
a Services
.uk-dropdown.uk-dropdown-navbar.uk-dropdown-width-4
.uk-grid.uk-dropdown-grid.uk-grid-small
.uk-width-medium-2-6
ul.uk-nav(data-uk-switcher="{connect:'#menu-categories'}")
li.active
a Lorem ipsum
li
a Etiam sit
.uk-width-medium-4-6
ul#menu-categories.uk-switcher
li
ul.uk-nav.uk-grid.uk-grid-width-1-2.uk-grid-collapse
li
a Lorem ipsum
li
a Etiam id dolor
li
a Cras vestibulum
li
ul.uk-nav.uk-grid.uk-grid-width-1-2.uk-grid-collapse
li
a Donec at
li
a Praesent dictum
li
a Donec a sodales
li
a Class aptent
li
a Contacts
<meta property="og:title" content="Share Buttons" />
<meta property="og:description" content="Share buttons. " />
<meta property="og:image" content="https://uikitplay.com/assets/img/logo-dark.png" />
<meta property="og:url" content="https://uikitplay.com/plays/FXsu" />
<meta property="og:site_name" content="UIkitPlay - UIkit playground for everyone." />
<div class="container uk-text-center">
<h2>Inline view</h2>
<button class="uk-button uk-margin-small-bottom uk-button-facebook" data-action="share" data-type="fb" data-uk-tooltip title="Facebook">
<i class="uk-icon-justify uk-icon-facebook"></i>
</button>
<button class="uk-button uk-margin-small-bottom uk-button-google-plus" data-action="share" data-type="gg" data-uk-tooltip title="Google+">
<i class="uk-icon-justify uk-icon-google-plus"></i>
</button>
<button class="uk-button uk-margin-small-bottom uk-button-twitter" data-action="share" data-type="tw" data-uk-tooltip title="Twitter">
<i class="uk-icon-justify uk-icon-twitter"></i>
</button>
<button class="uk-button uk-margin-small-bottom uk-button-vk" data-action="share" data-type="vk" data-uk-tooltip title="VK">
<i class="uk-icon-justify uk-icon-vk"></i>
</button>
<button class="uk-button uk-margin-small-bottom uk-button-ok" data-action="share" data-type="ok" data-uk-tooltip title="Odnoklassniki">
<i class="uk-icon-justify uk-icon-odnoklassniki"></i>
</button>
<button class="uk-button uk-margin-small-bottom uk-button-livejournal" data-action="share" data-type="lj" data-uk-tooltip title="Livejournal">
<i class="uk-icon-justify uk-icon-pencil"></i>
</button>
<button class="uk-button uk-margin-small-bottom uk-button-mail-ru" data-action="share" data-type="mr" data-uk-tooltip title="Mail.ru">
<i class="uk-icon-justify uk-icon-at"></i>
</button>
<button class="uk-button uk-margin-small-bottom uk-button-linkedin" data-action="share" data-type="li" data-uk-tooltip title="Linkedin">
<i class="uk-icon-justify uk-icon-linkedin"></i>
</button>
<div class="uk-margin-top">
<h2>Dropdown button view</h2>
<div class="uk-button-dropdown" data-uk-dropdown>
<button class="uk-button text-blue"><i class="uk-icon-share-alt"></i> Share this on...</button>
<div class="uk-dropdown uk-dropdown-navbar uk-dropdown-bottom uk-text-center">
<button class="uk-button uk-margin-small-bottom uk-button-facebook" data-action="share" data-type="fb" data-uk-tooltip title="Facebook">
<i class="uk-icon-justify uk-icon-facebook"></i>
</button>
<button class="uk-button uk-margin-small-bottom uk-button-google-plus" data-action="share" data-type="gg" data-uk-tooltip title="Google+">
<i class="uk-icon-justify uk-icon-google-plus"></i>
</button>
<button class="uk-button uk-margin-small-bottom uk-button-twitter" data-action="share" data-type="tw" data-uk-tooltip title="Twitter">
<i class="uk-icon-justify uk-icon-twitter"></i>
</button>
<button class="uk-button uk-margin-small-bottom uk-button-vk" data-action="share" data-type="vk" data-uk-tooltip title="VK">
<i class="uk-icon-justify uk-icon-vk"></i>
</button>
<button class="uk-button uk-margin-small-bottom uk-button-ok" data-action="share" data-type="ok" data-uk-tooltip title="Odnoklassniki">
<i class="uk-icon-justify uk-icon-odnoklassniki"></i>
</button>
<button class="uk-button uk-margin-small-bottom uk-button-livejournal" data-action="share" data-type="lj" data-uk-tooltip title="Livejournal">
<i class="uk-icon-justify uk-icon-pencil"></i>
</button>
<button class="uk-button uk-margin-small-bottom uk-button-mail-ru" data-action="share" data-type="mr" data-uk-tooltip title="Mail.ru">
<i class="uk-icon-justify uk-icon-at"></i>
</button>
<button class="uk-button uk-margin-small-bottom uk-button-linkedin" data-action="share" data-type="li" data-uk-tooltip title="Linkedin">
<i class="uk-icon-justify uk-icon-linkedin"></i>
</button>
</div>
</div>
</div>
</div>
.container {
padding: 50px 20px 20px 20px;
min-height: 260px;
}
/* Navbar
-------------------------------------------------------------- */
.uk-navbar .uk-navbar-content,
.uk-navbar .uk-navbar-brand {
height: 50px;
}
.uk-navbar .uk-navbar-nav > li > a {
font-weight: 500;
text-transform: uppercase;
height: 50px;
line-height: 50px;
}
.uk-navbar .uk-navbar-nav > li:hover > a,
.uk-navbar .uk-navbar-nav > li > a:focus,
.uk-navbar .uk-navbar-nav > li.uk-open > a {
color: #000;
}
.navbar-default .uk-navbar-nav > li > a i {
font-size: 14px;
}
.navbar-default .uk-dropdown {
font-size: 13px;
font-weight: 500;
background-color: #FFFFFF;
border-top: 2px solid #2196f3;
box-shadow: 0 6px 12px rgba(0, 0, 0, 0.176);
padding: 10px;
}
.navbar-default .uk-dropdown .uk-nav {
margin: 0;
}
.navbar-default .uk-dropdown .uk-nav > li {
margin-bottom: 3px;
}
.navbar-default .uk-dropdown .uk-nav > li.uk-nav-divider {
margin: 5px 0px;
}
.navbar-default .uk-dropdown .uk-nav > li > a {
color: #444444;
}
.navbar-default .uk-dropdown .uk-nav > li > a:hover,
.navbar-default .uk-dropdown .uk-nav > li > a:focus {
background: #2196f3;
color: #ffffff;
outline: none;
}
.navbar-default .uk-dropdown .uk-nav > li.uk-active > a {
background: #2196f3;
color: #ffffff;
}
.navbar-default .uk-dropdown .uk-nav > li > a > i {
margin-right: 5px;
}
.navbar-default .uk-dropdown .uk-nav > li > a > img {
position: relative;
top: -1px;
height: 25px;
margin-right: 15px;
}
.navbar-default .category {
background: rgba(236, 64, 122, 0.176);
}
.navbar-mobile {
margin-left: -10px;
margin-right: -10px;
}
.navbar-mobile .uk-navbar-nav > li > a {
width: 50px;
text-align: center;
}
以上是关于css 带切换器的下拉菜单的主要内容，如果未能解决你的问题，请参考以下文章