This navigation menu features a hover and fader effect to it, which has that Matrix movie feel to it. You can check out a demo version of the menu HERE.
If you would like to try it out on your own site, read and follow the instructions below:
- Head over to the “Template” section over at the “Design” page of your Blogger dashboard.
- Click on “Edit HTML” and then “Proceed”.
- By pressing “Ctrl+F”, look for ]]></b:skin>.
- Copy/paste the code below right before it:
#page_paramsInspector-shell .tabShell {
width:480px;
}
#page_paramsInspector-shell .tabShell {
width:480px;
}
#page_paramsInspector_settings {
width:400px;
height:286px;
font-size:12px;
}
#page_paramsInspector_preview {
width:466px;
}
.menuLinks {
position:relative;
width:200px;
background:#364040;
padding:10px;
padding-bottom:5px;
}
.menuLink, .menuLink:link, .menuLink:visited, .menuLink:hover, .menuLink:active {
display:block;
font-size:12px;
text-transform:uppercase;
font-weight:bold;
text-align:center;
letter-spacing:4px;
color:#bbb;
background:#000;
border:2px solid #000;
width:182px;
padding:5px 7px;
margin-bottom:5px;
text-decoration:none;
overflow:hidden;
}
- Now look for the <head> tag and copy/paste the following code below right after it:
<script src='https://dl.dropbox.com/u/24344387/How%20Do%20Blog/UIZE-JavaScript-Framework/js/Uize.js' type='text/javascript'/> - Save your template.
- Now go to the “Layout” section of Blogger’s “Design” page
- Click on “Add a Gadget” and then scroll down to select “HTML/JavaScript”
- Copy/paste the code below:
<script type="text/javascript">
Uize.module ({
required:[
'UizeDotCom.Page.Example.library',
'UizeDotCom.Page.Example',
'Uize.Widget.HoverFader',
'Uize.Curve.Rubber',
'Uize.Fx.xShadows'
],
builder:function () {
/*** create the example page widget ***/
var page = window.page = UizeDotCom.Page.Example ();
/*** create the hover fader instance ***/
page.addChild (
'hoverFader',
Uize.Widget.HoverFader,
{
nodes:{className:/\bmenuLink\b/},
defaultStyle:{marginLeft:0,marginTop:0,
color:'f',borderColor:'#9F9797',
backgroundColor:'044',
textShadow:'-3 0 3 #0,3 0 3 #0,#0ff -30 0 .5em,#0ff 30 0 .5em,#0f0 -20 0 1em,#0f0 20 0 1em'
},
hoverStyle:{marginLeft:5,marginTop:5,borderColor:'0',
color:'8',
backgroundColor:'000',
textShadow:'0 0 3 #0,0 0 3 #0,#0 0 0 .5em,#0 0 0 .5em,#0 -30 0 1em,#0 30 0 1em'
},
fadeIn:{duration:350},
fadeOut:{duration:1000}
}
);
/*** wire up the page widget ***/
page.wireUi ();
}
});
</script>
<table border="0" cellspacing="0" cellpadding="4" style="margin:auto;">
<tr valign="top">
<td>
<div>
<div style="left:20px; top:0px;">
<a href=" YOUR_PAGE_URL " style="
textShadow:0 0 3 #0,0 0 3 #0,#0 0 0 .5em,#0 0 0 .5em,#0 -30 0 1em,#0 30 0 1em;">About Us</a>
</div>
<div style="left:77px; top:93px;">
<a href=" YOUR_PAGE_URL " style="background:#0;">Products</a>
</div>
<div style="left:176px; top:17px;">
<a href=" YOUR_PAGE_URL " style="background:#0;">Services</a>
</div>
<div style="left:232px; top:158px;">
<a href=" YOUR_PAGE_URL " style="background:#0;">Technology</a>
</div>
<div style="left:319px; top:-8px;">
<a href=" YOUR_PAGE_URL " style="background:#0;">Solutions</a>
</div>
<div style="left:390px; top:73px;">
<a href=" YOUR_PAGE_URL " style="background:#0;">My Account</a>
</div>
<div style="left:506px; top:-3px;">
<a href=" YOUR_PAGE_URL " style="background:#0;">Store Locator</a>
</div>
<div style="left:559px; top:90px;">
<a href=" YOUR_PAGE_URL " style="background:#0;">Investors</a>
</div>
<div style="left:42px; top:176px;">
<a href=" YOUR_PAGE_URL " style="background:#0;">Support</a>
</div>
<div style="left:447px; top:176px;">
<a href="YOUR_PAGE_URL" style="background:#0;">Contact Us</a>
</div>
</div>
</td>
<td id="page_paramsInspector-shell"></td>
</tr>
</table>
- Replace YOUR_PAGE_URL with your own actual URLs.
- Save.
0 comments:
Post a Comment