Mirrors/tabler
1
0
Fork 0
mirror of https://github.com/tabler/tabler.git synced 2026-08-02 08:25:32 +04:00
Code Issues Projects Releases Wiki Activity

top menu dropdowns

Browse Source
This commit is contained in:
codecalm
2020-01-07 22:39:40 +01:00
parent 446ef17b2c
commit 391c12fb0a
10 changed files with 81 additions and 46 deletions
Download Patch File Download Diff File Expand all files Collapse all files
pages/_includes/layout/layouts-list.html
+1 -1
View File
@@ -3,7 +3,7 @@
<div class="col-{% if include.wide %}12{% else %}6{% endif %} mb-{% if include.wide %}5{% else %}6{% endif %}{% if layout.soon %} opacity-25{% endif %}">
<div class="row">
<div class="col-auto">
<a href="{{ site.base }}/{{ layout.page }}">
<a href="{{ site.base }}/{{ layout.page }}" class="position-relative">
{% include parts/demo-layout.html topmenu=layout.config.topmenu topmenu-dark=layout.config.topmenu-dark sidebar=layout.config.sidebar sidebar-narrow=layout.config.sidebar-narrow sidebar-right=layout.config.sidebar-right sidebar-dark=layout.config.sidebar-dark hide-topnav=layout.config.hide-topnav %}
</a>
</div>
pages/_includes/layout/menu.html
+12 -10
View File
@@ -23,10 +23,10 @@
</a>
{% if level-1[1].children %}
<div class="dropdown-menu">
<ul class="dropdown-menu">
{% for level-2 in level-1[1].children %}
<div class="dropright">
<a class="dropdown-item" {% if level-2[1].children %}href="#sidebar-{{ level-2[0] }}" data-toggle="dropdown" role="button" aria-expanded="false" {% else %}href="{{ site.base }}/{{ level-2[1].url }}" {% endif %}>
<li {% if level-2[1].children %}class="dropright"{% endif %}>
<a class="dropdown-item{% if level-2[1].children %} dropdown-toggle{% endif %}{% if level-1[0] == current-page[0] and level-2[0] == current-page[1] and current-page.size == 2 %} active{% endif %}" {% if level-2[1].children %}href="#sidebar-{{ level-2[0] }}" data-toggle="dropdown" role="button" aria-expanded="false" {% else %}href="{{ site.base }}/{{ level-2[1].url }}" {% endif %}>
<span class="nav-text">
{{ level-2[1].title }}
{% if level-2[1].label %}
@@ -34,15 +34,17 @@
{% endif %}
</span>
</a>
</div>
<ul class="dropdown-menu">
<li><a href="">AA</a></li>
<li><a href="">BB</a></li>
<li><a href="">CC</a></li>
</ul>
{% if level-2[1].children %}
<div class="dropdown-menu">
{% for level-3 in level-2[1].children %}
<a href="{{ site.base }}/{{ level-3[1].url }}" class="dropdown-item">{{ level-3[1].title }}</a>
{% endfor %}
</div>
{% endif %}
</li>
{% endfor %}
</div>
</ul>
{% endif %}
</li>
{% endfor %}
pages/_includes/layout/topmenu.html
+1 -1
View File
@@ -1,4 +1,4 @@
<header class="topnav topbar">
<header class="topnav">
<div class="navbar navbar-expand-lg {% if include.dark %}navbar-dark{% else %}navbar-light{% endif %}">
<div class="container{% if include.fluid %}-fluid{% endif %}">
{% include layout/menu.html top=true %}
pages/_includes/layout/topnav.html
+1 -1
View File
@@ -1,4 +1,4 @@
<header class="topnav topbar">
<header class="topnav">
<div class="container{% if include.fluid %}-fluid{% endif %}">
<div class="navbar navbar-expand-lg {% if include.dark %}navbar-dark bg-dark text-white{% else %}navbar-light{% endif %}{% if include.sticky %} navbar-sticky{% endif %}">
{% include layout/navbar.html search=true menu-layout=page.menu-layout %}
scss/_variables.scss
+5
View File
@@ -49,6 +49,7 @@ $white: #ffffff !default;
$text-muted: $gray-700 !default;
$border-color: $gray-400 !default;
$hover-bg: $gray-200 !default;
$active-bg: rgba($blue, .06) !default;
$primary: $blue !default;
$secondary: $text-muted !default;
@@ -231,6 +232,7 @@ $card-group-margin: 1.5rem !default;
$card-shadow: rgba($dark, .04) 0 2px 4px 0 !default;
$card-shadow-hover: rgba($dark, .16) 0 2px 16px 0 !default;
//close
$close-font-weight: 400 !default;
$close-font-size: 1.5rem !default;
@@ -244,6 +246,9 @@ $dropdown-link-hover-bg: $hover-bg !default;
$dropdown-link-hover-color: inherit !default;
$dropdown-spacer: 1px !default;
$dropdown-link-active-color: $primary !default;
$dropdown-link-active-bg: $active-bg !default;
//grid
$grid-gutter-width: 1.5rem !default;
scss/layout/_layout.scss
+39 -26
View File
@@ -116,12 +116,27 @@ $sidenav-folded-item-height: 3.5rem;
/**
Topnav
Top nav
*/
.topnav {
border-bottom: 1px solid;
background-color: $navbar-bg;
border-color: $navbar-border-color;
position: absolute;
top: 0;
right: 0;
left: 0;
padding: 0 .5rem;
z-index: $zindex-sticky;
min-height: $navbar-height;
& + & {
top: add($navbar-height, 1px);
}
& + & + & {
top: add($navbar-height * 2, 2px);
}
@media print {
display: none;
@@ -133,6 +148,25 @@ Topnav
min-height: $navbar-height;
}
.nav-link {
height: $navbar-height;
}
.nav-item {
&.active {
position: relative;
&:after {
content: '';
position: absolute;
bottom: -1px;
left: 2px;
right: 2px;
border-bottom: 1px solid $primary;
}
}
}
.navbar-brand-logo {
&-sm {
display: none;
@@ -148,27 +182,6 @@ Topnav
}
}
}
}
/**
Topbar
*/
.topbar {
position: absolute;
top: 0;
right: 0;
left: 0;
padding: 0 .5rem;
z-index: $zindex-sticky;
min-height: $navbar-height;
& + & {
top: add($navbar-height, 1px);
}
& + & + & {
top: add($navbar-height * 2, 2px);
}
.sidebar + .content & {
left: $sidenav-width;
@@ -186,7 +199,7 @@ Topbar
}
}
.topbar-fixed {
.topnav-fixed {
position: fixed;
z-index: $zindex-fixed;
}
@@ -235,15 +248,15 @@ Content
padding-top: 0 !important;
}
.topbar + & {
.topnav + & {
padding-top: add($navbar-height, 1px);
}
.topbar + .topbar + & {
.topnav + .topnav + & {
padding-top: add($navbar-height * 2, 2px);
}
.topbar + .topbar + .topbar + & {
.topnav + .topnav + .topnav + & {
padding-top: add($navbar-height * 3, 3px);
}
}
scss/layout/_navbar.scss
+13 -4
View File
@@ -20,11 +20,20 @@ Navbar logo
padding-right: $navbar-nav-link-padding-x;
}
.nav-item {
.nav-item:hover,
.dropright:hover {
> .dropdown-menu {
display: block;
}
}
&:hover {
.dropdown-menu {
display: block;
.dropdown-menu {
margin-top: 0;
.dropdown,
.dropright {
.dropdown-toggle:after {
margin-left: auto;
}
}
}
scss/ui/_cards.scss
+1 -1
View File
@@ -77,7 +77,7 @@
&:hover {
text-decoration: none;
background: rgba($primary, .06);
background: $active-bg;
}
}
scss/ui/_dropdowns.scss
+7 -1
View File
@@ -25,7 +25,6 @@
overflow-x: hidden;
}
.dropdown-item {
color: inherit;
display: flex;
@@ -60,3 +59,10 @@
}
}
}
.dropright {
>.dropdown-menu {
margin-top: subtract(-$dropdown-padding-y, 1px);
margin-left: 0;
}
}
scss/ui/_lists.scss
+1 -1
View File
@@ -157,7 +157,7 @@
&.active {
font-weight: $font-weight-bold;
color: inherit;
background: rgba($primary, .06);
background: $active-bg;
.icon {
color: inherit;