From 3b413cc38a5ad0bb5d08d35a132b88387c3be701 Mon Sep 17 00:00:00 2001 From: DeltaPHC Date: Tue, 4 Jun 2019 10:58:27 -0700 Subject: Cleaned up menu navigation - Bottom border is now a part of the menu div, instead of each item - Hovering no longer causes items to jump around - Added nice hover animation using CSS transitions --- common/main.css | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) (limited to 'common') diff --git a/common/main.css b/common/main.css index d758e64..d51decb 100644 --- a/common/main.css +++ b/common/main.css @@ -38,9 +38,9 @@ p a:hover{text-decoration: none; color:gray;} .list, .list strong {font-family: Courier New, Verdana, Arial!important; font-size: medium; line-height: 200%; } #logo{width:128px; height:128px; float:left; position:relative; background-image:url(img/raylib_logo.png);} -.menu{width:740px; height:39px; text-align:right; right:0px; left:30px; bottom:7px; position:relative; float:left; margin-left:0px; margin-top:10px;} -.menu a{padding:5px 20px; color:black; font-size:12pt; float:left; position:relative; border-bottom:1px solid black;} -.menu a:hover{margin-top:-20px; padding:15px 15px; background: rgb(254,255,255); +.menu{width:740px; height:35px; text-align:right; right:0px; left:30px; bottom:7px; position:relative; float:left; margin-left:0px; margin-top:10px; border-bottom:1px solid black; overflow:hidden;} +.menu a{padding:5px 20px; color:black; font-size:12pt; float:left; position:relative; top:4px; transition:top 0.1s ease-in-out;} +.menu a:hover{padding:5px 20px; background: rgb(254,255,255); top:0px; background: -moz-linear-gradient(top, rgba(245,245,245,1) 0%, rgba(224,224,224,1) 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(245,245,245,1)), color-stop(100%,rgba(224,224,224,1))); background: -webkit-linear-gradient(top, rgba(245,245,245,1) 0%,rgba(224,224,224,1) 100%); @@ -50,8 +50,8 @@ p a:hover{text-decoration: none; color:gray;} filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f5f5f5', endColorstr='#e0e0e0',GradientType=0 ); } #active{ - padding:5px 15px; color:#707070; font-size:12pt; float:left; position:relative; border-bottom:1px solid black; - margin-top:-20px; padding:15px 15px; background: rgb(254,255,255); + padding:5px 20px; color:#707070; font-size:12pt; float:left; position:relative; + margin-top: 0px; background: rgb(254,255,255); background: -moz-linear-gradient(top, rgba(245,245,245,1) 0%, rgba(224,224,224,1) 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(245,245,245,1)), color-stop(100%,rgba(224,224,224,1))); background: -webkit-linear-gradient(top, rgba(245,245,245,1) 0%,rgba(224,224,224,1) 100%); -- cgit v1.2.3