Template:Caltech Menubar

From 2012.igem.org

(Difference between revisions)
Line 109: Line 109:
http://www.onextrapixel.com/2011/06/03/how-to-create-a-horizontal-dropdown-menu-with-html-css-and-jquery/,
http://www.onextrapixel.com/2011/06/03/how-to-create-a-horizontal-dropdown-menu-with-html-css-and-jquery/,
and the comment sections */
and the comment sections */
-
#nav {
+
#nav,
-
  /* clear:both; */
+
-
  float:left;
+
-
  margin:0;
+
-
  padding:0;
+
-
  border-bottom:1px solid #000; /* black line below menu */
+
-
  width: auto;
+
-
  /* width:100%; */
+
-
  /* font-family: Verdana, Geneva, sans-serif;  Menu font */
+
-
  /* font-size:100%;  Menu text size */
+
-
  z-index:1000; /* This makes the dropdown menus appear above the page content below */
+
-
  position:relative;
+
-
}
+
-
 
+
-
/* Top menu items */
+
#nav ul {
#nav ul {
-
  margin:0;
+
    list-style: none;
-
  padding:0;
+
-
  list-style:none;
+
-
  float:right;
+
-
  position:relative;
+
-
  right:50%;
+
}
}
-
#nav ul li {
+
#nav {
-
  margin:0 0 0 5px;
+
    float: left;
-
  padding:0;
+
-
  float:left;
+
-
  position:relative;
+
-
  left:50%;
+
-
  top:1px;
+
-
  display: block;
+
}
}
-
#nav ul li a {
+
#nav > li {
-
  display:block;
+
    float: left;
-
  margin:0;
+
-
  padding:.6em .5em .4em;
+
-
  /* font-size:1em; */
+
-
  line-height:1em;
+
-
  /* background:#A9A9A9;
+
-
  text-decoration:none;
+
-
  color:##E56717;
+
-
  font-weight:bold; */
+
-
  background: #000000;
+
-
  border-bottom:1px solid #000;
+
-
  width: auto;
+
}
}
-
#nav ul li.active a {
+
#nav li a {
-
  color:#fff;
+
display: block;
-
  background:#000;
+
    height: 2em;
 +
    line-height: 2em;
 +
    padding: 0 1.5em;
 +
    text-decoration: none;
}
}
-
#nav ul li a:hover {
+
#nav ul {
-
  background:#36f; /* Top menu items background colour */
+
    position: absolute;
-
  color:#fff;
+
    display: none;
-
  border-bottom:1px solid #03f;
+
z-index: 999;
}
}
-
#nav ul li:hover a,
+
#nav ul li a {
-
#nav ul li.hover a { /* This line is required for IE 6 and below */
+
    width: 80px;
-
  background:#36f; /* Top menu items background colour */
+
-
  color:#fff;
+
-
  border-bottom:1px solid #03f;
+
-
}
+
-
 
+
-
/* Submenu items */
+
-
#nav ul ul {
+
-
  display:none; /* Sub menus are hiden by default */
+
-
  position:absolute;
+
-
  top:2em;
+
-
  left:0;
+
-
  right:auto; /*resets the right:50% on the parent ul */
+
-
  width:auto /* 10em */; /* width of the drop-down menus */
+
-
}
+
-
#nav ul ul li {
+
-
  left:auto;  /*resets the left:50% on the parent li */
+
-
  margin:0; /* Reset the 1px margin from the top menu */
+
-
  clear:left;
+
-
  width:100%;
+
-
}
+
-
#nav ul ul li a,
+
-
#nav ul li.active li a,
+
-
#nav ul li:hover ul li a,
+
-
#nav ul li.hover ul li a { /* This line is required for IE 6 and below */
+
-
  /*font-size:.8em; .8em; */
+
-
  font-weight:normal; /* resets the bold set for the top level menu items */
+
-
  background:#eee;
+
-
  color:#444;
+
-
  line-height:1.4em; /* overwrite line-height value from top menu */
+
-
  border-bottom:1px solid #ddd; /* sub menu item horizontal lines */
+
-
}
+
-
#nav ul ul li a:hover,
+
-
#nav ul li.active ul li a:hover,
+
-
#nav ul li:hover ul li a:hover,
+
-
#nav ul li.hover ul li a:hover { /* This line is required for IE 6 and below */
+
-
  background:#36f; /* Sub menu items background colour */
+
-
  color:#fff;
+
-
}
+
-
 
+
-
/* Flip the last submenu so it stays within the page */
+
-
#nav ul ul.last {
+
-
  left:auto; /* reset left:0; value */
+
-
  right:0; /* Set right value instead */
+
}
}
-
 
+
#nav li:hover ul {
-
/* Make the sub menus appear on hover */
+
    display: block;
-
#nav ul li:hover ul,
+
-
#nav ul li.hover ul { /* This line is required for IE 6 and below */
+
-
  display:block; /* Show the sub menus */
+
}
}

Revision as of 16:55, 28 September 2012

Retrieved from "http://2012.igem.org/Template:Caltech_Menubar"