Tiger Bird Webdesign: Stylish Blue Tabs with CSS and JavaScript

Top
About
Privacy Policy

A stylish website needs stylish tabs. Here are some design ideas for tabs. If you rollover the tabs with your mouse pointer they will protrude.

The mouse events onmouseenter and onmouseleave of JavaScript creates this effect.First of all, get the info of each tab with document.getElementById("id") and assign a variable to it. Then assing a mouse event to each variable. In the example, the tabs should protrude if the mouse enters them and return to their initial state if the mouse leaves the tabs which is done with onmouseenter and onmouseleave.
So, what kind of event would you like to create? In my event, the CSS text-shadow and box-shadow property should change therefore I have written the following function: function (){variable.style.textShadow xp xp xp color; variable.style.boxShadow xp xp xp color;}.
Very important: insert the script inside the HTML body elment because if you put it inside the head element nothing will fire.

I will create more stylish tabs.

HTML, CSS and JavaScript Code all in one

<html>
<head>
  
  <style>
    #tab_ul
    {list-style-type:none;}
    
    .tab_li
    {float:left;
    clear:right;
    text-align:center;
    width:150px;
    margin:10px;
    border-color:#005CB8;
    border-radius:20px;
    -webkit-border-radius:20px;
    -moz-border-radius:20px;
    border-style:solid;
    border-width:1px;
    /*text*/
    color:#FFFF99;
    font-weight:bold;
    font-size:120%;
    padding:20px;
    text-shadow:0px 1px 0px #CCCC7A;
    /*box*/
    box-shadow:0px 1px 10px #00248F;
    background-color:#0099FF;
    padding:10px;}
    
    </style>

</head>
  
<body>
     
 <div>
     <ul id="tab_ul">
<li class="tab_li" id="top">Top</li>
<li class="tab_li" id="about">About</li>
<li class="tab_li" id="privacy">Privacy Policy</li>
</ul>
</div>
<script>
var a = document.getElementById("top");
var b = document.getElementById("about");
var c = document.getElementById("privacy");
 
a.onmouseenter = function (){a.style.textShadow=
"0px 1px 0px #CCCC7A,0px 2px 0px #CCCC7A,0px 3px 0px #CCCC7A,0px 4px 0px #CCCC7A,0px 5px 5px #CCCC7A";
a.style.boxShadow=
"0px 1px 0px #00248F,0px 2px 0px #00248F,0px 3px 2px #00248F,0px 4px 3px #00248F,0px 5px 4px #00248F";}

a.onmouseleave = function (){a.style.textShadow="0px 1px 0px #CCCC7A";
a.style.boxShadow="0px 1px 10px #00248F";}

b.onmouseenter = function(){
b.style.textShadow=
"0px 1px 0px #CCCC7A,0px 2px 0px #CCCC7A,0px 3px 0px #CCCC7A,0px 4px 0px #CCCC7A,0px 5px 0px #CCCC7A";
b.style.boxShadow=
"0px 1px 0px #00248F,0px 2px 0px #00248F,0px 3px 2px #00248F,0px 4px 3px #00248F,0px 5px 4px #00248F";}

b.onmouseleave = function(){b.style.textShadow="0px 1px 0px #CCCC7A";
b.style.boxShadow="0px 1px 10px #00248F";}

c.onmouseenter =function(){
c.style.textShadow=
"0px 1px 0px #CCCC7A,0px 2px 0px #CCCC7A,0px 3px 0px #CCCC7A,0px 4px 0px #CCCC7A,0px 5px 0px #CCCC7A";
c.style.boxShadow=
"0px 1px 0px #00248F,0px 2px 0px #00248F,0px 3px 2px #00248F,0px 4px 3px #00248F,0px 5px 4px #00248F";}

c.onmouseleave = function(){c.style.textShadow="0px 1px 0px #CCCC7A";
c.style.boxShadow="0px 1px 10px #00248F";}
</script>

</body>
</html>

Tiger Bird Webdesign

Tuesday, 13 January 2015

Stylish Blue Tabs with CSS and JavaScript

HTML, CSS and JavaScript Code all in one

No comments:

Post a Comment