Skip to content

Commit

Permalink
Made dropdown menu in navbar display under the menu item
Browse files Browse the repository at this point in the history
  • Loading branch information
@Spiderpig86
Spiderpig86 committed Aug 4, 2017
1 parent 6ef5259 commit 6907a64
Show file tree
Hide file tree
Showing 5 changed files with 77 additions and 44 deletions.
10 changes: 8 additions & 2 deletions dist/cirrus.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2148,15 +2148,21 @@ input[type].input-contains-icon-right.input-xlarge ~ .icon.icon-right {
position: absolute;
}

/* Allow for the dropdown menus to tile in a column if dropdown menu present */
.header-item.has-sub {
flex-direction: column;
}

.header-item.has-sub .dropdown-menu.dropdown-shown {
margin-top: 0;
position: relative;
float: left;
margin-left: 20px;
border: none;
border-radius: 0;
box-shadow: none;
display: block;
padding-top: 1rem;
margin-top: 1rem;
width: 100%;
}

.header-item.has-sub .dropdown-menu.dropdown-dark {
Expand Down
2 changes: 1 addition & 1 deletion dist/cirrus.min.css
View file

Large diffs are not rendered by default.

95 changes: 58 additions & 37 deletions docs/footer/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,45 +20,66 @@
</head>

<body>
<div id="header" class="header unselectable header-fixed header-fill level no-transition">
<div class="header-left hide-overflow">
<div class="header-item no-hover">
<a href="../../">
<h6 class="title">Cirrus</h6>
</a>
</div>
<div id="header" class="header-container header-fill unselectable header-fixed level no-transition">
<div class="header-brand">
<a href="../../" class="header-item">
<h6 class="title">Cirrus</h6>
</a>
</div>
<div class="header-center">
<div class="header-item">
<a href="https://github.com/Spiderpig86/Cirrus">
<span class="icon">
<i class="fa fa-github"></i>
</span>
</a>
</div>
<div class="header-item">
<a href="#">
<span class="icon white">
<i class="fa fa-twitter"></i>
</span>
</a>
<div class="header">
<div class="header-left hide-overflow">
<div class="header-item no-hover">
<div class="header-item">
<a href="https://github.com/Spiderpig86/Cirrus">
<span class="icon">
<i class="fa fa-github"></i>
</span>
</a>
</div>
<div class="header-item">
<a href="#">
<span class="icon white">
<i class="fa fa-twitter"></i>
</span>
</a>
</div>
</div>
</div>
<div class="header-item header-btn" id="header-btn">
<span></span>
<span></span>
<span></span>
</div>


<div class="header-right header-menu nav-animated" id="header-menu">
<div class="header-item">
<a href="../../index.html" class="smoothScroll">Home</a>
</div>
<div class="header-item">
<a href="#started" class="smoothScroll">Top</a>
</div>
<div class="header-item has-sub" id="dropdown">
<a>Docs</a>
<span class="caret"></span>
<ul class="dropdown-menu dropdown-dark" role="menu">
<li role="menu-item"><a href="#animations" class="smoothScroll">Animations</a></li>
<li role="menu-item"><a href="#buttons" class="smoothScroll">Buttons</a></li>
<li role="menu-item"><a href="#cards" class="smoothScroll">Card</a></li>
<li role="menu-item"><a href="#code" class="smoothScroll">Code</a></li>
<li role="menu-item"><a href="#font" class="smoothScroll">Font</a></li>
<li role="menu-item"><a href="#footer" class="smoothScroll">Footer</a></li>
<li role="menu-item"><a href="#forms" class="smoothScroll">Forms</a></li>
<li role="menu-item"><a href="#head" class="smoothScroll">Header</a></li>
<li role="menu-item"><a href="#layout" class="smoothScroll">Layout</a></li>
<li role="menu-item"><a href="#links" class="smoothScroll">Links</a></li>
<li role="menu-item"><a href="#lists" class="smoothScroll">Lists</a></li>
<li role="menu-item"><a href="#table" class="smoothScroll">Tables</a></li>
<li role="menu-item"><a href="#utils" class="smoothScroll">Utils</a></li>
</ul>
</div>
</div>
</div>
</div>
<div class="header-item header-btn" id="header-btn">
<span></span>
<span></span>
<span></span>
</div>


<div class="header-right header-menu nav-animated" id="header-menu">
<div class="header-item">
<a href="../../index.html" class="smoothScroll">Home</a>
</div>
<div class="header-item">
<a href="#started" class="smoothScroll">Top</a>
</div>
</div>
</div>

<space class="large"></space>
Expand Down
4 changes: 2 additions & 2 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -59,8 +59,8 @@
</div>-->

<div class="header-item has-sub" id="dropdown">
Docs
<span class="caret"></span>
<a>Docs <span class="caret"></span></a>

<ul class="dropdown-menu dropdown-dark" role="menu">
<li role="menu-item"><a href="#animations" class="smoothScroll">Animations</a></li>
<li role="menu-item"><a href="#buttons" class="smoothScroll">Buttons</a></li>
Expand Down
10 changes: 8 additions & 2 deletions src/header.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -277,15 +277,21 @@
position: absolute;
}

/* Allow for the dropdown menus to tile in a column if dropdown menu present */
.header-item.has-sub {
flex-direction: column;
}

.header-item.has-sub .dropdown-menu.dropdown-shown {
margin-top: 0;
position: relative;
float: left;
margin-left: 20px;
border: none;
border-radius: 0;
box-shadow: none;
display: block;
padding-top: 1rem;
margin-top: 1rem;
width: 100%;
}

.header-item.has-sub .dropdown-menu.dropdown-dark {
Expand Down

0 comments on commit 6907a64

Please sign in to comment.