Add product dropdown to nav menus

timani · May 9, 2017 · 483b383 · 483b383
1 parent 3f85428
commit 483b383
Show file tree

Hide file tree

Showing 4 changed files with 235 additions and 4 deletions.
diff --git a/_includes/topnav.html b/_includes/topnav.html
@@ -2,7 +2,11 @@
 <nav class="mobile_expanded" role="navigation">
     <a href="{{ "/frequently-asked-questions.html" | prepend:site.baseurl }}" class="menu-item" data-proofer-ignore>FAQ</a>
     <a href="{{ "/" | prepend:site.baseurl }}" class="menu-item" data-proofer-ignore>Docs</a>
-    <a href="https://forum.cockroachlabs.com" class="menu-item" data-proofer-ignore>Forum</a>
+    <div class="mobile-menu-products">
+  		Product
+  		<a href="https://www.cockroachlabs.com/product/cockroachdb-core/" data-proofer-ignore>CockroachDB Core</a>
+  		<a href="https://www.cockroachlabs.com/product/cockroachdb-enterprise/" data-proofer-ignore>CockroachDB Enterprise</a>
+  	</div>
     <a href="https://www.cockroachlabs.com/community/" class="menu-item" data-proofer-ignore>Community</a>
     <a href="https://www.cockroachlabs.com/about/" class="menu-item" data-proofer-ignore>About</a>
     <a href="https://www.cockroachlabs.com/blog/" class="menu-item" data-proofer-ignore>Blog</a>
@@ -20,7 +24,19 @@
             <nav class="desktop" role="navigation">
                 <a href="{{ "/frequently-asked-questions.html" | prepend:site.baseurl }}" class="menu-item {% if page.url == "/frequently-asked-questions.html" %}current-menu-item{% endif %}" data-proofer-ignore>FAQ</a>
                 <a href="{{ "/" | prepend:site.baseurl }}" class="menu-item {% if page.url != "/frequently-asked-questions.html" %}current-menu-item{% endif %}" data-proofer-ignore>Docs</a>
-                <a href="https://forum.cockroachlabs.com" class="menu-item" data-proofer-ignore>Forum</a>
+                <div class="menu-item-products menu-item">
+          				Product
+          				<div class="products-dropdown">
+          					<a href="https://www.cockroachlabs.com/product/cockroachdb-core/" data-proofer-ignore>
+          						<div class="products-dropdown__title">CockroachDB Core</div>
+          						<div class="products-dropdown__info">A scalable SQL database designed to grow with you</div>
+          					</a>
+          					<a href="https://www.cockroachlabs.com/product/cockroachdb-enterprise/" data-proofer-ignore>
+          						<div class="products-dropdown__title">CockroachDB Enterprise</div>
+          						<div class="products-dropdown__info">Run your business on a database built right</div>
+          					</a>
+          				</div>
+          			</div>
                 <a href="https://www.cockroachlabs.com/community/" class="menu-item" data-proofer-ignore>Community</a>
                 <a href="https://www.cockroachlabs.com/about/" class="menu-item" data-proofer-ignore>About</a>
                 <a href="https://www.cockroachlabs.com/blog/" class="menu-item" data-proofer-ignore>Blog</a>

diff --git a/css/customstyles.css b/css/customstyles.css
diff --git a/css/customstyles.css.map b/css/customstyles.css.map
diff --git a/css/layouts/_header.scss b/css/layouts/_header.scss
@@ -64,6 +64,40 @@ nav.mobile_expanded {
 	a.current-menu-item {
 		background: #efefef;
 	}
+
+	.mobile-menu-products {
+		float: left;
+		@include avenir_h(14px);
+		letter-spacing: 1.3px;
+		color: $cl_blue;
+		text-transform: uppercase;
+		padding: 25px 0 30px 20px;
+		border-bottom: 1px solid #DADBE2;
+
+		a {
+			position: relative;
+			display: block;
+			@include avenir_h(12px);
+			line-height: 20px;
+			letter-spacing: normal;
+			text-transform: none;
+			border-bottom: none;
+			padding: 25px 0 0 17px;
+
+			&:before {
+				content: '';
+				display: block;
+				position: relative;
+				max-width: inherit;
+				max-height: inherit;
+				left: -17px;
+				top: 10px;
+				width: 10px;
+				height: 2px;
+				background-color: rgba(19,40,72,0.2);
+			}
+		}
+	}
 }
 
 header {
@@ -123,6 +157,82 @@ header {
 			display:inline-block;
 			float:right;
 		}
+
+		.products-dropdown {
+			// display: none;
+			position: absolute;
+			max-width: 280px;
+			margin-left: -31px;
+			background-color: #ffffff;
+			border-radius: 5px;
+			box-shadow: 0 5px 10px 0 rgba(0, 0, 0, 0.1), 0 10px 20px 0 rgba(0, 0, 0, 0.1);
+			text-transform: none;
+			letter-spacing: normal;
+			opacity: 0;
+			pointer-events: none;
+			transition: opacity 0.4s ease;
+
+			a {
+				padding: 20px 30px;
+				margin: 0;
+
+				&:first-child {
+					padding-right: 50px;
+					border-bottom: solid 2px #e6e6e6;
+				}
+
+				.products-dropdown {
+					&__title {
+						@include adelle(18px);
+						font-weight: bold;
+						line-height: 30px;
+						color: $cl_blue;
+						text-transform: none;
+						letter-spacing: normal;
+						@include groovy(color);
+					}
+
+					&__info {
+						@include avenir_r(14px);
+						line-height: 20px;
+						color: #4d4d4d;
+						text-transform: none;
+						letter-spacing: normal;
+					}
+				}
+
+				&:hover {
+					.products-dropdown__title {
+						color: $cl_green;
+					}
+				}
+			}
+		}
+
+		.menu-item-products {
+			float: left;
+			margin: 0 10px;
+			padding: 0;
+			@include avenir_h(12px);
+			line-height: 40px;
+			letter-spacing: 1.3px;
+			text-transform: uppercase;
+			@include groovy(color);
+
+			&.current-menu-item {
+				color: $cl_green;
+			}
+
+			&:hover {
+				cursor: pointer;
+				color: $cl_green;
+
+				.products-dropdown {
+					opacity: 1;
+					pointer-events: all;
+				}
+			}
+		}
 	}
 
 	nav.mobile {