Created dropdown navigation items for navbar.

This commit is contained in:
Kaelin Hooper
2016-06-07 11:32:19 -07:00
parent e0b71ca54b
commit e6b62b6509
2 changed files with 90 additions and 15 deletions
+57 -7
View File
@@ -11,8 +11,8 @@
document.getElementById("main").style.height = recalculateMainSize();
})
$( window ).resize(function() {
$( "#main" ).css("height", recalculateMainSize());
$(window).resize(function() {
$("#main").css("height", recalculateMainSize());
});
function recalculateMainSize() {
@@ -31,11 +31,61 @@
<body>
<div class="nav">
<ul class="navItems" id="dropdownNav">
<li><a href="#">File</a></li>
<li><a href="#">Collect</a></li>
<li><a href="#">Memory</a></li>
<li><a href="#">Help</a></li>
<ul class="navItems top-level-dropdown">
<li>
<a href="#">File</a>
<ul class="second-level-dropdown">
<li><a href="#">Help</a></li>
<li><a href="#">Clear Temp Files</a></li>
<li><a href="#">Clear User Config</a></li>
<li><a href="#">Set Symbol Path</a></li>
<li><a href="#">User Command</a></li>
<li><a href="#">Exit</a></li>
</ul>
</li>
<li>
<a href="#">Collect</a>
<ul class="second-level-dropdown">
<li><a href="#">Run</a></li>
<li><a href="#">Collect</a></li>
<li><a href="#">Abort</a></li>
<li><a href="#">Merge</a></li>
</ul>
</li>
<li>
<a href="#">Memory</a>
<ul class="second-level-dropdown">
<li><a href="#">Take Heap Snapshot</a></li>
<li><a href="#">Take Heap Snapshot From Dump</a></li>
</ul>
</li>
<li>
<a href="#">Size</a>
<ul class="second-level-dropdown">
<li><a href="#">Directory Size</a></li>
<li><a href="#">Image Size</a></li>
</ul>
</li>
<li>
<a href="#">Help</a>
<ul class="second-level-dropdown">
<li><a href="#">Help on Main View</a></li>
<li><a href="#">Users Guide</a></li>
<li><a href="#">Getting Started Videos</a></li>
<li><a href="#">Get the Latest Version</a></li>
<li><a href="#">Give Feedback or Ask a Question</a></li>
<li><a href="#">Reference Guide</a></li>
<li><a href="#">Command Line Help</a></li>
<li><a href="#">User Command Help</a></li>
<li><a href="#">Multi-Scenarios Analysis</a></li>
<li><a href="#">Extending Perfview</a></li>
<li><a href="#">Viewing Linux Data</a></li>
<li><a href="#">Viewing External Data</a></li>
<li><a href="#">Using EventSources</a></li>
<li><a href="#">Release Notes</a></li>
<li><a href="#">About</a></li>
</ul>
</li>
</ul>
<ul class="navItems" id="helpfulLinks">
+33 -8
View File
@@ -21,7 +21,7 @@ Nav Bar Views
display: flex;
}
/* Wrapper for dropdownNav and helpfulLinks */
/* Wrapper for Dropdown Navbar and Helpful Links */
.nav .navItems {
margin: 0;
list-style: none;
@@ -32,28 +32,53 @@ Nav Bar Views
flex-flow: row nowrap;
}
.nav #dropdownNav {
.nav .top-level-dropdown {
margin: 0;
padding: 0;
list-style: none;
flex-grow: 1;
justify-content: flex-start;
}
.nav #helpfulLinks {
margin: 0;
justify-content: flex-end;
}
.nav ul {
padding-left: .2em;
}
.nav #dropdownNav li a, .nav #helpfulLinks li a {
.nav .top-level-dropdown a, .nav #helpfulLinks a {
margin: 0;
text-decoration: none;
white-space: nowrap;
font-family: Helvetica, sans-serif;
display: block;
padding: .7em;
color: white;
display: block;
}
.nav .top-level-dropdown a:hover { color: #000000; }
.nav .top-level-dropdown > li:hover { background: #CCCCCC; }
.nav .top-level-dropdown li:hover > ul {
display: inline;
}
.nav .second-level-dropdown {
margin: 0;
padding: 0;
list-style: none;
display: none;
position: fixed;
}
.nav .second-level-dropdown > li {
background: #999999;
}
.nav .second-level-dropdown > li:hover { background: #CCCCCC; }
.nav #helpfulLinks {
margin: 0;
justify-content: flex-end;
}
/*------------*/