Difference between revisions of "Template:GreatBay SCIE/HTML/navbar"

Line 1: Line 1:
−
<!DOCTYPE html>
+
{{GreatBay_SCIE/CSS/navbar}}
 +
<!DOCTYPE html>
 
<html>
 
<html>
 
<head>
 
<head>

Revision as of 12:21, 1 July 2021

@font-face { 

   font-family: 'Chalkduster'; 
   src: url('https://static.igem.org/mediawiki/2021/c/cb/T--GreatBay_SCIE--Chalkduster_Font.ttf');

}

  1. content, html, body{
   background-color: #fde6e6 !important;

}

  1. logo, .logo{
   margin-top: 17px;
   margin-left: 20px;/*8px*/
    z-index: 514 !important;
    left: 0;
   position:fixed;

} /*#logo.stick, .logo.stick{ 

   margin-top:30px;
   top:0;
   margin-left: 10px;
   z-index: 115 !important;
   left: 0;
   position:fixed;

}*/ .team_name{ 

   margin-top: 40.5px;
   margin-left:200px;
   position:fixed;
   top:0;
   z-index:114;
   color:rgb(255, 255, 255);
   font-family:"Courier";
   font-size: 120%;
   font-variant:small-caps;
   font-weight: 700;
   text-decoration:none;

}

  1. navbar, .navbar { 
   text-align: center;

   margin-top: -20px;
   margin-left: -25px;

   position: fixed; 
   margin-top: 14px;
   top:0;
   width:100%;
   z-index: 5;
   /*overflow: hidden;*/

}

  1. navbar.stick{
   margin-top: 14px;
   top:0;
   position: fixed;
   z-index:114;
   width:1300px;

}

  1. top {
   _position: absolute;
   _bottom: auto;
   _top: expression(eval(document.documentElement.scrollTop));

} .navbar ul { 

   width: 100%;
   /*width: 268%;*/
   background-color:#798295;
   /*padding:10px 20px 10px 0px;*/
   padding:10px 30px 10px;
   display:inline-table;
   position:relative;  
   box-shadow:1px 1px 3px rgb(0, 0, 0);
   color:#000;
   list-style: none;
   overflow: visible;
   padding-left: 220px;

} .navbar ul::after { 

   content:"";
   /*display:block; */
   clear:both;

}

.navbar ul li ul { 

   position: absolute;
   max-height: 0px;
   display: block;
   overflow: visible;
   margin-left: 0px;
   margin-top: 0px;
   padding: 0px 10px 0px 10px;
   transition: all 0.2s ease-out;
   overflow: hidden;
   max-height: auto;
   box-shadow: none;
   border-radius:15px;
   width: 400px;

}

.navbar ul li:hover ul{ 

   opacity: 100%;
   max-height: 500px;
   transition: max-height 0.5s ease-in;
   padding: 0px 0px 0px 0px;/*拒绝继承值*/  
   box-shadow:5px 0px 0px 0px rgb(241, 157, 138);/*阴影颜色与位置：深红色，右边*/

}

.navbar ul li { 

   float: left;
   border-radius:15px;
   position: relative; /*这行无论如何都不要动*/
   /*transition: all 0.25s ease-out;*/

} .navbar ul>li:hover {/*悬浮在按钮上的样式*/ 

   background-color:rgb(250, 233, 229); /*鼠标悬浮时按钮的颜色:白色*/
   box-shadow:5px 0px 0px 0px rgb(241, 157, 138); /*阴影颜色与位置：深红色，右边*/
   border-radius:15px; /*按钮圆角，为保证过渡效果而加的*/
   transition:all 0.2s; /*0.2秒的过渡*/

} .navbar ul li a { 

   display:block;
   /*padding:10px 20px;*/
   padding: 18px 25px 15px 25px;
   color:rgb(255, 255, 255);
   text-decoration:none;
   font-family:"Chalkduster";
   font-size: 170%;
   transition: color 0.25s;
   text-align: center;
   list-style: none;
   font-variant:small-caps;
   font-weight: 700;

} .navbar ul li a:hover { 

   list-style: none;
   color:black !important;/*颜色，暂且不变*/

} .navbar ul li:hover ul{ 

   display: block;
   /*opacity: 100%;*/ /*基于透明度的过渡*/
   max-height: 500px; /*基于高度的过渡*/
   transition: max-height 0.5s ease-in;
   padding: 0px 0px 0px 0px;/*拒绝继承值*/  
   box-shadow:5px 0px 0px 0px rgb(241, 157, 138);/*阴影颜色与位置：深红色，右边*/
   width: 400px;

} .navbar ul li ul li a { 

   /*color:rgb(255, 255, 255);*/
   font-size: 140%;
   text-align:center;
   line-height: 33px;
   padding: 0px 0px 0px 25px;

} .navbar ul li ul li:hover a{ 

   color:rgb(0, 0, 0)

} .navbar ul li ul li { 

   float: none;
   border-top:1px solid #798295;
   border-bottom:1px solid #798295; 
   color:#000;   
   height: 40px;
   width: 400px;
   margin-left: 0px;
   padding-right: 0px;
   transition: all 0.2s ease-out;

} .navbar ul li ul li:hover{ /*鼠标悬浮在二级导航栏按钮时*/ 

   padding-top: 5px;
   padding-bottom: 5px;
   padding-left:10px;
   padding-right:10px; /*上下左右padding*/
   box-shadow:none; /*拒绝继承值*/
   border-radius:0px; /*圆角，无*/
   transition: all 0.2s ease-in; /*过渡*/

} .topbar{ 

   margin-top:40.5px;
   margin-left: -25px;
   margin-bottom: -18px;
   height: 8px;
   width: 102.15%;
   /*background-color:#d3e3f0;*/
   position:relative;
   z-index:3;
   /* top:0;*/

} <!DOCTYPE html>