Skip to content

Commit

Permalink
Add multilevel submenu
Browse files Browse the repository at this point in the history 
Add multilevel submenu
  • Loading branch information
@puikinsh
puikinsh committed Apr 22, 2016
2 parents 8dff60b + 8a97898 commit e0ce81a
Show file tree
Hide file tree
Showing 37 changed files with 1,053 additions and 153 deletions.
20 changes: 18 additions & 2 deletions production/calendar.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -169,10 +169,26 @@ <h3>Live On</h3>
</li>
<li><a href="pricing_tables.html">Pricing Tables</a>
</li>

</ul>
</li>
<li><a><i class="fa fa-laptop"></i> Landing Page <span class="label label-success pull-right">Coming Soon</span></a>
<li><a><i class="fa fa-sitemap"></i> Multilevel Menu <span class="fa fa-chevron-down"></span></a>
<ul class="nav child_menu" style="display: none">
<li><a href="#level1_1">Level One</a>
<li><a>Level One<span class="fa fa-chevron-down"></span></a>
<ul class="nav child_menu" style="display: none">
<li class="sub_menu"><a href="level2.html">Level Two</a>
</li>
<li><a href="#level2_1">Level Two</a>
</li>
<li><a href="#level2_2">Level Two</a>
</li>
</ul>
</li>
<li><a href="#level1_2">Level One</a>
</li>
</ul>
</li>
<li><a href="javascript:void(0)"><i class="fa fa-laptop"></i> Landing Page <span class="label label-success pull-right">Coming Soon</span></a>
</li>
</ul>
</div>
Expand Down
21 changes: 18 additions & 3 deletions production/chartjs.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -150,7 +150,6 @@ <h3>Live On</h3>
</li>
<li><a href="real_estate.html">Real Estate</a>
</li>

</ul>
</li>
<li><a><i class="fa fa-windows"></i> Extras <span class="fa fa-chevron-down"></span></a>
Expand All @@ -165,10 +164,26 @@ <h3>Live On</h3>
</li>
<li><a href="pricing_tables.html">Pricing Tables</a>
</li>

</ul>
</li>
<li><a><i class="fa fa-laptop"></i> Landing Page <span class="label label-success pull-right">Coming Soon</span></a>
<li><a><i class="fa fa-sitemap"></i> Multilevel Menu <span class="fa fa-chevron-down"></span></a>
<ul class="nav child_menu" style="display: none">
<li><a href="#level1_1">Level One</a>
<li><a>Level One<span class="fa fa-chevron-down"></span></a>
<ul class="nav child_menu" style="display: none">
<li class="sub_menu"><a href="level2.html">Level Two</a>
</li>
<li><a href="#level2_1">Level Two</a>
</li>
<li><a href="#level2_2">Level Two</a>
</li>
</ul>
</li>
<li><a href="#level1_2">Level One</a>
</li>
</ul>
</li>
<li><a href="javascript:void(0)"><i class="fa fa-laptop"></i> Landing Page <span class="label label-success pull-right">Coming Soon</span></a>
</li>
</ul>
</div>
Expand Down
20 changes: 18 additions & 2 deletions production/chartjs2.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -161,10 +161,26 @@ <h3>Live On</h3>
</li>
<li><a href="pricing_tables.html">Pricing Tables</a>
</li>

</ul>
</li>
<li><a><i class="fa fa-laptop"></i> Landing Page <span class="label label-success pull-right">Coming Soon</span></a>
<li><a><i class="fa fa-sitemap"></i> Multilevel Menu <span class="fa fa-chevron-down"></span></a>
<ul class="nav child_menu" style="display: none">
<li><a href="#level1_1">Level One</a>
<li><a>Level One<span class="fa fa-chevron-down"></span></a>
<ul class="nav child_menu" style="display: none">
<li class="sub_menu"><a href="level2.html">Level Two</a>
</li>
<li><a href="#level2_1">Level Two</a>
</li>
<li><a href="#level2_2">Level Two</a>
</li>
</ul>
</li>
<li><a href="#level1_2">Level One</a>
</li>
</ul>
</li>
<li><a href="javascript:void(0)"><i class="fa fa-laptop"></i> Landing Page <span class="label label-success pull-right">Coming Soon</span></a>
</li>
</ul>
</div>
Expand Down
20 changes: 18 additions & 2 deletions production/contacts.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -163,10 +163,26 @@ <h3>Live On</h3>
</li>
<li><a href="pricing_tables.html">Pricing Tables</a>
</li>

</ul>
</li>
<li><a><i class="fa fa-laptop"></i> Landing Page <span class="label label-success pull-right">Coming Soon</span></a>
<li><a><i class="fa fa-sitemap"></i> Multilevel Menu <span class="fa fa-chevron-down"></span></a>
<ul class="nav child_menu" style="display: none">
<li><a href="#level1_1">Level One</a>
<li><a>Level One<span class="fa fa-chevron-down"></span></a>
<ul class="nav child_menu" style="display: none">
<li class="sub_menu"><a href="level2.html">Level Two</a>
</li>
<li><a href="#level2_1">Level Two</a>
</li>
<li><a href="#level2_2">Level Two</a>
</li>
</ul>
</li>
<li><a href="#level1_2">Level One</a>
</li>
</ul>
</li>
<li><a href="javascript:void(0)"><i class="fa fa-laptop"></i> Landing Page <span class="label label-success pull-right">Coming Soon</span></a>
</li>
</ul>
</div>
Expand Down
108 changes: 64 additions & 44 deletions production/css/custom.css
View file
Original file line number Diff line number Diff line change
@@ -1,22 +1,24 @@
body.nav-sm .container.body .left_col {
.nav-sm .container.body .left_col {
width: 70px;
padding: 0;
z-index: 200;
z-index: 9999;
position: absolute;
}

body.nav-sm .container.body .right_col {
.nav-sm .hidden-small {
visibility: hidden;
}
.nav-sm .container.body .right_col {
padding: 10px 20px;
margin-left: 70px;
z-index: 2;
}
body.nav-sm .navbar.nav_title {
.nav-sm .navbar.nav_title {
width: 70px;
}
body.nav-sm .navbar.nav_title a span {
.nav-sm .navbar.nav_title a span {
display: none;
}
body.nav-sm .navbar.nav_title a i {
.nav-sm .navbar.nav_title a i {
font-size: 27px;
margin: 13px 0 0 3px;
}
Expand All @@ -25,49 +27,55 @@ body.nav-sm .navbar.nav_title a i {
padding: 5px 6px;
border-radius: 50%;
}
body.nav-sm .main_container .top_nav {
.nav-sm .main_container .top_nav {
display: block;
margin-left: 70px;
z-index: 2;
}
body.nav-sm .nav.side-menu li a {
.nav-sm .nav.side-menu li a {
text-align: center !important;
font-weight: 400;
font-size: 10px;
padding: 10px 5px;
}
body.nav-sm .nav.side-menu li.active-sm {
.nav-sm .nav.child_menu li.active,
.nav-sm .nav.side-menu li.active-sm {
border-right: 5px solid #1ABB9C;
}
body.nav-sm > .nav.side-menu > li.active-sm > a {
.nav-sm ul.nav.child_menu ul,
.nav-sm .nav.side-menu li.active-sm ul ul {
position: static;
width: 200px;
background: none;
}
.nav-sm > .nav.side-menu > li.active-sm > a {
color: #1ABB9C !important;
}
body.nav-sm .nav.side-menu li a i.toggle-up {
.nav-sm .nav.side-menu li a i.toggle-up {
display: none !important;
}
body.nav-sm .nav.side-menu li a i {
.nav-sm .nav.side-menu li a i {
font-size: 25px !important;
text-align: center;
width: 100% !important;
margin-bottom: 5px;
}
body.nav-sm ul.nav.child_menu {
.nav-sm ul.nav.child_menu {
left: 100%;
position: absolute;
top: 0;
padding: 10px;
width: 210px;
z-index: 4000;
background: #3E5367;
display: none;
}
body.nav-sm ul.nav.child_menu li {
padding-left: 0;
.nav-sm ul.nav.child_menu li {
padding: 0 10px;
}
body.nav-sm ul.nav.child_menu li a {
.nav-sm ul.nav.child_menu li a {
text-align: left !important;
}
body.nav-sm .profile {
.nav-sm .profile {
display: none;
}
.menu_section {
Expand Down Expand Up @@ -133,23 +141,27 @@ body.nav-sm .profile {
margin-bottom: 10px;
float: left;
}
#sidebar-menu span.fa {
.main_menu span.fa {
float: right;
text-align: center;
margin-top: 5px;
font-size: 10px !important;
font-size: 10px;
min-width: inherit;
color: #C4CFDA;
}
.active a span.fa {
text-align: right !important;
margin-right: 4px;
}
body.nav-sm .menu_section {
.nav-sm .menu_section {
margin: 0;
}
body.nav-sm span.fa, body.nav-sm .menu_section h3 {
display: none !important;
.nav-sm span.fa,
.nav-sm .menu_section h3 {
display: none;
}
.nav-sm li li span.fa {
display: inline-block;
}
.nav_menu {
float: left;
Expand All @@ -164,7 +176,7 @@ body.nav-sm span.fa, body.nav-sm .menu_section h3 {
position: static;
}
}
body.nav-md .container.body .col-md-3.left_col {
.nav-md .container.body .col-md-3.left_col {
width: 230px;
padding: 0;
position: absolute;
Expand All @@ -173,7 +185,7 @@ body.nav-md .container.body .col-md-3.left_col {
body .container.body .right_col {
background: #F7F7F7;
}
body.nav-md .container.body .right_col {
.nav-md .container.body .right_col {
padding: 10px 20px 0;
margin-left: 230px;
}
Expand All @@ -185,14 +197,14 @@ body.nav-md .container.body .right_col {
height: 57px;
}
@media (max-width: 991px) {
body.nav-md .container.body .right_col, body.nav-md .container.body .top_nav {
.nav-md .container.body .right_col, .nav-md .container.body .top_nav {
width: 100%;
margin: 0;
}
body.nav-md .container.body .col-md-3.left_col {
.nav-md .container.body .col-md-3.left_col {
display: none;
}
body.nav-md .container.body .right_col {
.nav-md .container.body .right_col {
width: 100%;
padding-right: 0
}
Expand Down Expand Up @@ -401,9 +413,6 @@ table.no-margin .progress {
}
}
@media (min-width: 192px) and (max-width: 1270px) {
.hidden-small {
display: none !important;
}
table.tile_info span.right {
margin-right: 7px;
float: left;
Expand Down Expand Up @@ -502,13 +511,14 @@ a:hover, a:focus {
text-decoration: none;
background: transparent;
}
.nav.child_menu li:hover {
.nav.child_menu li:hover,
.nav.child_menu li.active {
background-color: rgba(255, 255, 255, 0.06);
}
.nav.child_menu li {
padding-left: 36px
padding-left: 36px;
}
body.nav-md ul.nav.child_menu li:before {
.nav-md ul.nav.child_menu li:before {
background: #425668;
bottom: auto;
content: "";
Expand All @@ -523,7 +533,7 @@ body.nav-md ul.nav.child_menu li:before {
-moz-border-radius: 50%;
border-radius: 50%;
}
body.nav-md ul.nav.child_menu li:after {
.nav-md ul.nav.child_menu li:after {
border-left: 1px solid #425668;
bottom: 0;
content: "";
Expand All @@ -532,9 +542,17 @@ body.nav-md ul.nav.child_menu li:after {
top: 0;
}
.nav.side-menu>li>a, .nav.child_menu>li>a {
color: #E7E7E7 !important;
color: #E7E7E7;
font-weight: 500;
}
.nav.child_menu li li:hover,
.nav.child_menu li li.active {
background: none;
}
.nav.child_menu li li a:hover,
.nav.child_menu li li a.active {
color: #fff;
}
.nav>li>a {
position: relative;
display: block;
Expand All @@ -543,11 +561,16 @@ body.nav-md ul.nav.child_menu li:after {
.nav.side-menu> li.current-page, .nav.side-menu> li.active {
border-right: 5px solid #1ABB9C;
}
li.current-page {
.nav li.current-page {
background: rgba(255, 255, 255, 0.05);
}
.nav li li li.current-page {
background: none;
}
.nav li li.current-page a {
color: #fff;
}
.nav.side-menu> li.active > a {
color: #ff0000;
text-shadow: rgba(0, 0, 0, 0.25) 0 -1px 0;
background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #5b6479), color-stop(100%, #4c5566)), #686e78;
background: -webkit-linear-gradient(#334556, #2C4257), #2A3F54;
Expand All @@ -558,9 +581,6 @@ li.current-page {
-moz-box-shadow: rgba(0, 0, 0, 0.25) 0 1px 0, inset rgba(255, 255, 255, 0.16) 0 1px 0;
box-shadow: rgba(0, 0, 0, 0.25) 0 1px 0, inset rgba(255, 255, 255, 0.16) 0 1px 0;
}
li.current-page a {
color: #1ABB9C !important
}
.navbar-brand, .navbar-nav>li>a {
font-weight: 500;
color: #ECF0F1 !important;
Expand Down Expand Up @@ -633,7 +653,7 @@ li.current-page a {
font-size: 26px;
}
.nav.child_menu > li > a {
color: rgba(255, 255, 255, 0.75) !important;
color: rgba(255, 255, 255, 0.75);
font-size: 12px;
padding: 9px;
}
Expand Down Expand Up @@ -1648,7 +1668,7 @@ h4.graph_title {
text-align: right;
margin-right: 10px;
}
#sidebar-menu .fa {
.main_menu .fa {
width: 26px;
opacity: .99;
display: inline-block;
Expand Down

0 comments on commit e0ce81a

Please sign in to comment.