Add Tab-Based Organizational System

Posted

First we have to add the menu formatting CSS code.  In the blog settings, open Template > Customize > Advanced > Add CSS

Then copy and paste the following HTML code in the Add custom CSS section.  This is where you change colors, fonts, and the visual aspects of the tab layout.  This is much better than setting up pages because you have a lot more control.   You do not need to understand the code, unless you want to start changing the formatting of the tabs.  Feel free to experiment. 

HTML:
.tabs .widget ul, .tabs .widget ul {
overflow: visible!important;
}

#cssmenu ul,
#cssmenu li,
#cssmenu span,
#cssmenu a {
  margin: 0px 0px 0px 0px;
  padding: 0px 0px 0px 0px;
  position: relative;
}
#cssmenu {
  height: 38px;
  border-radius: 5px 5px 0 0;
  -moz-border-radius: 5px 5px 0 0;
  -webkit-border-radius: 5px 5px 0 0;
  background: #fefefe;
  background: -moz-linear-gradient(top, #fefefe 0%, #eee9f0 100%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #fefefe), color-stop(100%, #eee9f0));
  background: -webkit-linear-gradient(top, #fefefe 0%, #eee9f0 100%);
  background: -o-linear-gradient(top, #fefefe 0%, #eee9f0 100%);
  background: -ms-linear-gradient(top, #fefefe 0%, #eee9f0 100%);
  background: linear-gradient(top, #fefefe 0%, #eee9f0 100%);
  border-bottom: 2px solid #ffea00;
  width: 960px;
margin: 0px 0px 0px -40px;
}
#cssmenu:after,
#cssmenu ul:after {
  content: '';
  display: block;
  clear: both;
}
#cssmenu a {
  background: #fefefe;
  background: -moz-linear-gradient(top, #fefefe 0%, #ececec 100%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #fefefe), color-stop(100%, #ececec));
  background: -webkit-linear-gradient(top, #fefefe 0%, #ececec 100%);
  background: -o-linear-gradient(top, #fefefe 0%, #ececec 100%);
  background: -ms-linear-gradient(top, #fefefe 0%, #ececec 100%);
  background: linear-gradient(top, #fefefe 0%, #ececec 100%);
  color: #000;
  display: inline-block;
  font-family: Helvetica, Arial, Verdana, sans-serif;
  font-size: 12px;
  line-height: 38px;
  padding: 0 20px;
  text-decoration: none;
}
#cssmenu ul {
  list-style: none;
}
#cssmenu > ul {
  float: left;
}
#cssmenu > ul > li {
  float: left;
}
#cssmenu > ul > li > a {
  color: #000;
  font-size: 12px;
}
#cssmenu > ul > li:hover:after {
  content: '';
  display: block;
  width: 0;
  height: 0;
  position: absolute;
  left: 50%;
  bottom: 0;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-bottom: 10px solid #ffea00;
  margin-left: -10px;
}
#cssmenu > ul > li:first-child > a {
  border-radius: 5px 0 0 0;
  -moz-border-radius: 5px 0 0 0;
  -webkit-border-radius: 5px 0 0 0;
}
#cssmenu > ul > li.active:after {
  content: '';
  display: block;
  width: 0;
  height: 0;
  position: absolute;
  left: 50%;
  bottom: 0;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-bottom: 10px solid #ffea00;
  margin-left: -10px;
}
#cssmenu > ul > li.active > a {
  -moz-box-shadow: inset 0 0 2px rgba(0, 0, 0, 0.1);
  -webkit-box-shadow: inset 0 0 2px rgba(0, 0, 0, 0.1);
  box-shadow: inset 0 0 2px rgba(0, 0, 0, 0.1);
  background: #ececec;
  background: -moz-linear-gradient(top, #ececec 0%, #ffeeff ef 100%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #ececec), color-stop(100%, #ffeeff ef));
  background: -webkit-linear-gradient(top, #ececec 0%, #ffeeff ef 100%);
  background: -o-linear-gradient(top, #ececec 0%, #ffeeff ef 100%);
  background: -ms-linear-gradient(top, #ececec 0%, #ffeeff ef 100%);
  background: linear-gradient(top, #ececec 0%, #ffeeff ef 100%);
}
#cssmenu > ul > li:hover > a {
  background: #ececec;
  background: -moz-linear-gradient(top, #ececec 0%, #ffeeff ef 100%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #ececec), color-stop(100%, #ffeeff ef));
  background: -webkit-linear-gradient(top, #ececec 0%, #ffeeff ef 100%);
  background: -o-linear-gradient(top, #ececec 0%, #ffeeff ef 100%);
  background: -ms-linear-gradient(top, #ececec 0%, #ffeeff ef 100%);
  background: linear-gradient(top, #ececec 0%, #ffeeff ef 100%);
  -moz-box-shadow: inset 0 0 2px rgba(0, 0, 0, 0.1);
  -webkit-box-shadow: inset 0 0 2px rgba(0, 0, 0, 0.1);
  box-shadow: inset 0 0 2px rgba(0, 0, 0, 0.1);
}
#cssmenu .has-sub {
  z-index: 1;
}
#cssmenu .has-sub:hover > ul {
  display: block;
}
#cssmenu .has-sub ul {
  display: none;
  position: absolute;
  width: 103px;
  top: 100%;
  left: 0;
}
#cssmenu .has-sub ul li {
  *margin-bottom: -1px;
}
#cssmenu .has-sub ul li a {
  background: #fbed13;
  border-bottom: 1px dotted #ffee33;
  width: 90px;
  filter: none;
  font-size: 11px;
  display: block;
  line-height: 120%;
  padding: 10px;
  color: #444444;
}
#cssmenu .has-sub ul li:hover a {
  background: #fdf37f;
}
#cssmenu .has-sub .has-sub:hover > ul {
  display: block;
}
#cssmenu .has-sub .has-sub ul {
  display: none;
  position: absolute;
  left: 100%;
  top: 0;
}
#cssmenu .has-sub .has-sub ul li a {
  background: #ccbb00;
  border-bottom: 1px dotted #ffee33;
}
#cssmenu .has-sub .has-sub ul li a:hover {
  background: #b3a400;
}

 

Add a Gadget > HTML/JavaScript

Do not title it.

Then copy and paste the following HTML code in the Gadget.

 

HTML:

<div id='cssmenu'>
<ul>
<li><a href='http://    YOUR BLOG ADDRESSS     .blogspot.com/search/label/Investigate'><span>INVESTIGATE</span></a></li>
<li><a href='http://    YOUR BLOG ADDRESSS     .blogspot.com/search/label/InvestigationJournal'><span>INVESTIGATION JOURNAL</span></a></li>
<li><a href='http://    YOUR BLOG ADDRESSS     .blogspot.com/search/label/Design'><span>DESIGN</span></a></li>
<li><a href='http://    YOUR BLOG ADDRESSS     .blogspot.com/search/label/Plan'><span>PLAN</span></a></li>
<li><a href='http://    YOUR BLOG ADDRESSS     .blogspot.com/search/label/Create'><span>CREATE</span></a></li>
<li><a href='http://    YOUR BLOG ADDRESSS     .blogspot.com/search/label/Evaluate'><span>EVALUATE</span></a></li>
<li><a href='http://    YOUR BLOG ADDRESSS     .blogspot.com/search/label/FinalProduct'><span>FINAL PRODUCT</span></a></li>
</ul></div>



 

*If you want to add sub categories, use this code:

 

HTML:

<div id='cssmenu'>
<ul>

<li class='has-sub last'><a href='#'><span>EXAMPLE</span></a>
      <ul>
         <li><a href='http://   YOUR BLOG ADDRESSS     .blogspot.com/search/label/Example1'><span>EXAMPLE 1</span></a></li>
         <li><a href='http://   YOUR BLOG ADDRESSS     .blogspot.com/search/label/Example2'><span>EXAMPLE 2</span></a></li>
         <li><a href='http://   YOUR BLOG ADDRESSS     .blogspot.com/search/label/Example3'><span>EXAMPLE 3</span></a></li>
         <li><a href='http://   YOUR BLOG ADDRESSS     .blogspot.com/search/label/Example4'><span>EXAMPLE 4</span></a></li>
         <li class='last'><a href='http://   YOUR BLOG ADDRESSS     .blogspot.com/search/label/Example5><span>EXAMPLE 5</span></a></li>
      </ul>


</ul>

 

 

 
 

0 Response to "Add Tab-Based Organizational System"