Blogspot Vision: menu

Showing posts with label menu. Show all posts

Sunday, February 27, 2011

CSS3 Vertical Sliding Photo Info for Blogger

CSS Code Snippet
This section code should be inserted before the closing head tag.

.wrap a {display:block; width:220px; height:330px; text-decoration:none; color:#000;}
.wrap {width:220px; height:330px; position:relative; overflow:hidden; font-family:arial, sans-serif; border:0; margin:0 10px; float:left; display:inline;}
.wrap img {border:0;}
.wrap i {display:block; width:220px; height:330px; position:absolute; left:0; top:300px; z-index:1; background:#000; filter: alpha(opacity=40);
 filter: progid:DXImageTransform.Microsoft.Alpha(opacity=40); opacity:0.40;
 -webkit-transition: all 0.6s ease-in-out; 
 -moz-transition: all 0.6s ease-in-out; 
 -o-transition: all 0.6s ease-in-out; 
transition: all 0.6s ease-in-out; 
 }
.wrap p {display:block; width:220px; height:330px; position:absolute; left:0; top:300px; z-index:1; background:transparent; font-size:12px; color:#fff; padding:0; margin:0; line-height:16px;
-webkit-transition: all 0.6s ease-in-out;
-moz-transition: all 0.6s ease-in-out;
-o-transition: all 0.6s ease-in-out;
transition: all 0.6s ease-in-out;
}
.wrap p b {display:block; font-size:22px; color:#fc0; text-align:center; margin:0; padding:0; line-height:30px;}
.wrap p span {display:block; padding:10px; line-height:20px;}

.wrap a:hover {direction:ltr;}
.wrap a:hover i {top:0;}
.wrap a:hover p {top:0;}

.clear {clear:left;}

</style>

HTML Code Snippet
This section code should be inserted where you want the output to appear.

<div class="wrap">
<a href="#x">
 <img src='http://www.blogspotvision.info/css/photo-info/frog.jpg' alt='' />
 <i></i>
 <p>
  <b>Red Eye Frog</b>
  <span>Red-eyed tree frogs, as their name states, have bold red eyes with vertically narrowed pupils, a vibrant green body with yellow and blue striped sides, and orange toes. There is a great deal of regional variation in flank and thigh coloration.<br /><br /> 
  Although it has been suggested that A. callidryas' bright colors function as aposematic or sexual signals, neither of these hypotheses have been confirmed.</span>

</p>
</a>
</div>

<div class="wrap">
<a href="#x">
 <img src='http://www.blogspotvision.info/css/photo-info/emperor.jpg' alt='' />
 <i></i>
 <p>
  <b>Emperor Penguin</b>

<span>The Emperor Penguin (Aptenodytes forsteri) is the tallest and heaviest of all living penguin species and is endemic to Antarctica.<br /><br /> 
  The male and female are similar in plumage and size, reaching 122 cm (48 in) in height and weighing anywhere from 22.37 kg (48.82 lb). The dorsal parts are black and sharply delineated from the white belly, pale-yellow breast and bright-yellow ear patches.
  </span>
 </p>
</a>
</div>

<p>
  <b>Pelicans</b>
  <span>A pelican is a large water bird with a distinctive pouch under the beak, belonging to the bird family Pelecanidae.<br /><br /> 
  Along with the darters, cormorants, gannets, boobies, frigatebirds, and tropicbirds, pelicans make up the order Pelecaniformes. Modern pelicans are found on all continents except Antarctica.
  </span>
 </p>
</a>
</div> 
<br class="clear" />

Saturday, February 26, 2011

The Future Now - CSS3 Exploding Menu for Blogger

CSS Code Snippet
This section code should be inserted before the closing head tag.

/* ================================================================ 
This copyright notice must be untouched at all times.

The original version of this stylesheet and the associated (x)html
is available at http://www.cssplay.co.uk/menus/css3-explode.html
Copyright (c) 2005-2011 Stu Nicholls. All rights reserved.
This stylesheet and the associated (x)html may be modified in any 
way to fit your requirements. BLOGGERIZED BY BLOGSPOTVISION.COM
=================================================================== */

.menu, .menu ul {padding:0; margin:0; list-style:none; display:block; text-align:center; width:140px; height:50px;}
.menu {width:150px; height:60px; margin:0 auto; position:relative; border-top:1px solid transparent;} /* required for non-IE browsers */

.menu li.topLi {width:150px; height:60px; line-height:50px; position:relative; z-index:100;
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
transition-delay: 0.5s;
-o-transition-delay: 0.5s;
-moz-transition-delay: 0.5s;
-ms-transition-delay: 0.5s;
-webkit-transition-delay: 0.5s;
}
.menu li.close {position:absolute; top:0; left:-9999px; opacity:0; z-index:100;
-webkit-transition: opacity 0.5s ease-in-out;
-moz-transition: opacity 0.5s ease-in-out;
-o-transition: opacity 0.5s ease-in-out;
transition: opacity 0.5s ease-in-out;
transition-delay: 1.5s;
-o-transition-delay: 1.5s;
-moz-transition-delay: 1.5s;
-ms-transition-delay: 1.5s;
-webkit-transition-delay: 1.5s;
}
.menu li.topLi > a {display:block; width:150px; height:60px; background:url(http://www.blogspotvision.info/scripts/cssplay4/nav.png) no-repeat center center}
.menu ul li a {display:block; width:140px; height:50px; opacity:0.6; float:left;
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
}

.menu li a b {position:absolute; left:-9999px;}

.menu li.topLi ul li.p1 a {background:url(http://www.blogspotvision.info/scripts/cssplay4/hi5.png);}
.menu li.topLi ul li.p2 a {background:url(http://www.blogspotvision.info/scripts/cssplay4/bebo.png);}
.menu li.topLi ul li.p3 a {background:url(http://www.blogspotvision.info/scripts/cssplay4/reddit.png);}
.menu li.topLi ul li.p4 a {background:url(http://www.blogspotvision.info/scripts/cssplay4/heart.png);}
.menu li.topLi ul li.p5 a {background:url(http://www.blogspotvision.info/scripts/cssplay4/live.png);}

.menu li ul {z-index:-1; position:absolute; top:0; left:0; border:5px solid #acb;
-o-border-radius: 30px;
-msl-border-radius: 30px;
-moz-border-radius: 30px;
-webkit-border-radius: 30px;
border-radius: 30px;

-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
transition: all0.5s ease-in-out;
transition-delay: 0.5s;
-o-transition-delay: 0.5s;
-moz-transition-delay: 0.5s;
-ms-transition-delay: 0.5s;
-webkit-transition-delay: 0.5s;
}
.menu li ul li {position:absolute; left:0; top:0; width:150px; height:50px;
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
transition-delay: 0.5s;
-o-transition-delay: 0.5s;
-moz-transition-delay: 0.5s;
-ms-transition-delay: 0.5s;
-webkit-transition-delay: 0.5s;
}

.menu li.topLi:hover {margin-top:-60px;}
.menu li.topLi:hover ul {top:60px; width:700px; left:-280px;}
.menu li.topLi:hover ul li.p1 {left:0; top:0;}
.menu li.topLi:hover ul li.p2 {left:140px; top:0;}
.menu li.topLi:hover ul li.p3 {left:280px; top:0;}
.menu li.topLi:hover ul li.p4 {left:420px; top:0;}
.menu li.topLi:hover ul li.p5 {left:560px; top:0;}

.menu li a:hover {opacity:1;}

.imageHolder {width:740px; margin:0 auto; height:400px; border:1px solid #ddd; padding-top:60px; background:#fff url(http://www.blogspotvision.info/scripts/cssplay4/back.png) no-repeat 0 0;}

/* for iPhone, iPad and iPod Touch */
.menu li.close a {display:block; width:150px; height:60px; background: url(http://www.blogspotvision.info/scripts/cssplay4/close.png) no-repeat center center;}
.menu li.topLi:hover > a {opacity:0;}
.menu li.topLi:hover + li.close {left:0; top:-60px; opacity:1}

HTML Code Snippet
This section code should be inserted where you want the output to appear.

Sunday, January 30, 2011

How to add an opaque professional any width four level vertical menu to Blogger

CSS Code Snippet

This CSS code should be inserted right before the closing head tag.

The original version of this stylesheet and the associated (x)html
is available at http://www.cssplay.co.uk/menus/anywidth-flyout.html
Copyright (c) 2005-2009 Stu Nicholls. All rights reserved.
This stylesheet and the associated (x)html may be modified in any 
way to fit your requirements. Bloggerized by Blogspot Vision.
=================================================================== */

#menu {width:960px; height:500px; background:url(http://blogspotvision.com/tutorials/menus/anywidth/images/webdesign.jpg) bottom right no-repeat; margin:0 auto; position:relative;}

#menu ul {margin:0; padding:0; list-style:none; white-space:nowrap; text-align:left; background:url(http://blogspotvision.com/tutorials/menus/anywidth/images/opaque.png); padding:1px 1px 0 1px;}

#menu li {margin:0; padding:0; list-style:none;}
#menu li {display:inline-block; display:inline;}
#menu ul {position:absolute; left:-9999px;}
#menu ul.level1 {position:absolute; left:0; top:60px;}

#menu a {display:block; font:normal 11px verdana,arial,sans-serif; color:#000; line-height:22px; text-decoration:none;padding:0 20px 0 10px; border-bottom:1px solid #ddd;}

#menu ul li:hover > ul {visibility:visible; left:100%; margin-top:-24px; margin-left:-1px;}

#menu a:hover ul,
#menu a:hover a:hover ul, 
#menu a:hover a:hover a:hover ul {left:100%; visibility:visible;}
#menu a:hover ul ul, 
#menu a:hover a:hover ul ul {left:-9999px;}

#menu li a:hover {background:#868ea1;} 
#menu li:hover > a {background:#868ea1;}
#menu li a.fly {background: url(http://blogspotvision.com/tutorials/menus/anywidth/images/arrow.gif) no-repeat right top;}
#menu li a.fly:hover {background:#868ea1 url(http://blogspotvision.com/tutorials/menus/anywidth/images/arrow.gif) no-repeat right top;} 
#menu li:hover > a.fly {background:#868ea1 url(http://blogspotvision.com/tutorials/menus/anywidth/images/arrow.gif) no-repeat right top;}

#menu table {position:absolute; left:99%; height:0; width:0; border-collapse:collapse; margin-top:-7px; margin-left:-1px;}

</style>

HTML Code Snippet
This HTML code should be inserted where you want the output to appear.

<div id="menu">
 <ul class="level1">
  <li><a href="#url">Home</a></li>
  <li><a class="fly" href="#url">Contact Us</a>
  
   <ul>
    <li><a href="#url">Email</a></li>
    <li><a href="#url">Telephone</a></li>
    <li><a href="#url">Online Form</a></li>
    <li><a href="#url">Snail Mail Address</a></li>
   </ul>
  
  </li>
  <li><a class="fly" href="#url">Resort</a>
  
   <ul>
    <li><a href="#url">Ski Hire Facilities</a></li>
    <li><a class="fly" href="#url">Main Ski Slopes</a>
    
     <ul>
      <li><a href="#url">Beginners Slopes</a></li>
      <li><a href="#url">Intermediate Slopes</a></li>
      <li><a class="fly" href="#url">Advanced Skill Levels</a>
      
       <ul>
        <li><a href="#url">Local</a></li>
        <li><a href="#url">Nearby</a></li>
        <li><a href="#url">With instructor</a></li>
        <li><a href="#url">Snow boarding</a></li>
       </ul>
      
      </li>
      <li><a href="#url">Expert</a></li>
     </ul>
    
    </li>
    <li><a href="#url">Night Life</a></li>
    <li><a class="fly" href="#url">Restaurants</a>
    
     <ul>
      <li><a href="#url">Snow Hotel</a></li>
      <li><a href="#url">The Snowman</a></li>
      <li><a href="#url">Ice Cavern</a></li>
      <li><a href="#url">Ski Inn</a></li>
     </ul>
    
    </li>
    <li><a class="fly" href="#url">Car Hire</a>
    
     <ul>
      <li><a href="#url">From Airport</a></li>
      <li><a href="#url">In Resort</a></li>
      <li><a href="#url">Multiple Resorts</a></li>
     </ul>
    
    </li>
   </ul>
  
  </li>
  <li><a class="fly" href="#url">Information</a>
  
   <ul>
    <li><a href="#url">Money Exchange</a></li>
    <li><a class="fly" href="#url">Resort Essential Information</a>
    
     <ul>
      <li><a href="#url">Lift Passes</a></li>
      <li><a href="#url">Insurance</a></li>
      <li><a class="fly" href="#url">Gear Rental</a>
      
       <ul>
        <li><a href="#url">Boots</a></li>
        <li><a href="#url">Skis</a></li>
        <li><a href="#url">Ski Wear</a></li>
        <li><a href="#url">Goggles</a></li>
       </ul>
      
      </li>
      <li><a href="#url">Ski Schools</a></li>
      <li><a href="#url">Snow Report</a></li>
     </ul>
    
    </li>
    <li><a class="fly" href="#url">Language</a>
    
     <ul>
      <li><a href="#url">Austrian</a></li>
      <li><a href="#url">German</a></li>
      <li><a href="#url">French</a></li>
      <li><a href="#url">English</a></li>
     </ul>
    
    </li>
    <li><a href="#url">Short Breaks</a></li>
   </ul>
  
  </li>
  <li><a class="fly" href="#url">Surrounding Area</a>
  
   <ul>
    <li><a href="#url">Where to go</a></li>
    <li><a href="#url">What to do</a></li>
    <li><a href="#url">Places of interest</a></li>
    <li><a href="#url">National parks & Museums</a></li>
   </ul>
  
  </li>
  <li><a href="#url">Privacy</a></li>
 </ul>
</div>

Saturday, June 26, 2010

Professional CSS Hover Menu with images

This professional hover menu is designed on pure CSS. For pages that already contains a high volume of code and is already almost surpassing the page speed limit, this hover menu can help you add that featured content without tampering with latency. Like most featured contents, this hover menu also allows you to input keywords that will help you rank better in search engines. Let's get started, but first and foremost, always remember to back-up your current existent template in case it doesn't turn out as expected.

Click here to view a demo

Download the entire zip file
(Zip files include entire codings along with images needed to implement this tutorial.)

CSS SECTION CODE
(Section code below should be placed in the CSS part of your template, located right before your closing head tag.)

<style type="text/css">
#holder {width:750px; height:350px; position:relative; font-family:arial, sans-serif; border:1px solid #004479;z-index:100;}
#holder table {border-collapse:collapse; margin:-1px;}
#holder ul {float:left; padding:0; margin:0; list-style:none;}
#holder ul.sub {margin-bottom:-4px;}
#menuOuter li a.lv1-a {background:blue; zoom:1;}
#menuOuter li a.lv1-a:hover {direction:ltr;}

#holder ul.sub {float:left;}
#holder ul.sub ul {position:absolute; left:-9999px; top:180px;}
#holder ul.sub li.sub-li a img {display:block; position:absolute; left:-9999px; border:0; height:200px; width:750px;}

#holder ul.sub li.sub-li {display:block; float:left; width:150px; height:240px;}
#holder ul.sub li.sub-li a {margin-top:200px; width:110px; display:block; padding:0 20px; height:40px; line-height:40px; color:#fff; text-decoration:none; font-family:arial, sans-serif; font-size:14px;}
#holder ul.sub li.sub-li a.a1 {background:#000000;}
#holder ul.sub li.sub-li a.a2 {background:#000000;}
#holder ul.sub li.sub-li a.a3 {background:#000000;}
#holder ul.sub li.sub-li a.a4 {background:#000000;}
#holder ul.sub li.sub-li a.a5 {background:#000000;}

#menuOuter li:hover ul.sub li.current a {margin-top:200px; height:40px;}
#menuOuter li:hover ul.sub li.current ul {left:-9999px;}
#menuOuter li:hover ul.sub li.current a img {left:-9999px;}

#menuOuter a:hover ul.sub li.current a {margin-top:200px; height:40px;}
#menuOuter a:hover ul.sub li.current ul {left:-9999px;}
#menuOuter a:hover ul.sub li.current a img {left:-9999px;}

#holder ul.sub li.sub-li:hover > a {margin-top:0; height:350px;}
#holder ul.sub li.sub-li a:hover {margin-top:0; height:350px;}

#holder ul.sub li.current a {margin-top:0; height:350px;}
#holder ul.sub li.current a.a1 img {left:0; top:0; z-index:-1;}
#holder ul.sub li.current a.a2 img {left:-150px; top:0; z-index:-1;}
#holder ul.sub li.current a.a3 img {left:-300px; top:0; z-index:-1;}
#holder ul.sub li.current a.a4 img {left:-450px; top:0; z-index:-1;}
#holder ul.sub li.current a.a5 img {left:-600px; top:0; z-index:-1;}

#menuOuter li:hover ul.sub li.current:hover a {margin-top:0; height:350px;}
#menuOuter li:hover ul.sub li.current:hover ul {left:0;}
#menuOuter li:hover ul.sub li.current:hover ul li {float:left; height:15px; padding:0; margin:0;}
#menuOuter li:hover ul.sub li.current:hover ul li a {height:15px; line-height:15px; margin:0; padding:0 20px;}
#menuOuter li:hover ul.sub li.current:hover ul li a:hover {height:15px; line-height:15px; margin:0; padding:0 20px; text-decoration:underline;}

#menuOuter a:hover ul.sub li.current a:hover {margin-top:0; height:350px;}
#menuOuter a:hover ul.sub li.current a:hover ul {left:0;}
#menuOuter a:hover ul.sub li.current a:hover ul li {float:left; height:15px; padding:0; margin:0;}
#menuOuter a:hover ul.sub li.current a:hover ul li a {height:15px; line-height:15px; margin:0; padding:0 20px;}
#menuOuter a:hover ul.sub li.current a:hover ul li a:hover {height:15px; line-height:15px; margin:0; padding:0 20px; text-decoration:underline;}

#holder ul.sub li {position:relative;}
#holder ul.sub li.sub-li:hover ul {left:0; width:130px;}
#holder ul.sub li.sub-li:hover ul li {float:left; height:15px; padding:0; margin:0;}
#holder ul.sub li.sub-li:hover ul li a {height:15px; line-height:15px; margin:0; padding:0 20px; font-size:11px;}
#holder ul.sub li.sub-li:hover ul li a:hover {height:15px; line-height:15px; margin:0; padding:0 20px; text-decoration:underline;}
#holder ul.sub li.sub-li:hover a.a1 img {left:0; top:0; z-index:-1;}
#holder ul.sub li.sub-li:hover a.a2 img {left:-150px; top:0; z-index:-1;}
#holder ul.sub li.sub-li:hover a.a3 img {left:-300px; top:0; z-index:-1;}
#holder ul.sub li.sub-li:hover a.a4 img {left:-450px; top:0; z-index:-1;}
#holder ul.sub li.sub-li:hover a.a5 img {left:-600px; top:0; z-index:-1;}

#holder ul.sub li.sub-li a:hover ul {left:0; width:130px;}
#holder ul.sub li.sub-li a:hover ul li {float:left; height:15px; padding:0; margin:0;}
#holder ul.sub li.sub-li a:hover ul li a {height:15px; line-height:15px; margin:0; padding:0 20px; font-size:11px;}
#holder ul.sub li.sub-li a:hover ul li a:hover {height:15px; line-height:15px; margin:0; padding:0 20px; text-decoration:underline;}
#holder ul.sub li.sub-li a.a1:hover img {left:0; top:0; z-index:-1;}
#holder ul.sub li.sub-li a.a2:hover img {left:-150px; top:0; z-index:-1;}
#holder ul.sub li.sub-li a.a3:hover img {left:-300px; top:0; z-index:-1;}
#holder ul.sub li.sub-li a.a4:hover img {left:-450px; top:0; z-index:-1;}
#holder ul.sub li.sub-li a.a5:hover img {left:-600px; top:0; z-index:-1;}

#holder ul.sub li.current ul {left:0; width:130px;}
#holder ul.sub li.current ul li {float:left; height:15px; padding:0; margin:0;}
#holder ul.sub li.current ul li a {height:15px; line-height:15px; margin:0; padding:0 20px; font-size:11px;}

#holder ul.sub li span {display:block;position:absolute; top:240px; left:0; line-height:15px; width:130px; padding:10px; height:90px; z-index:-1; color:#fff; text-decoration:none; font-size:11px;}
#holder ul.sub li.p1 span {background:#d7d7d7;}
#holder ul.sub li.p2 span {background:#d7d7d7;}
#holder ul.sub li.p3 span {background:#d7d7d7;}
#holder ul.sub li.p4 span {background:#d7d7d7;}
#holder ul.sub li.p5 span {background:#d7d7d7;}
</style>

HTML SECTION CODE
(section code below should be placed in your desired location but in your HTML section code, you can also use "Add a Gadget" under Page Elements and move it to your desired location.)

<div id="holder">
<ul id="menuOuter">
<li class="lv1-li">

<ul class="sub">
<li class="sub-li p1"><a class="a1" href="#url"><img src="
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhKw8-JUV6InexPODIwDR0V_zlO3TL7-cLUOGXAwx7Tdr_2PRNpyuOyERiZ96mxajgq8Jib7nG880ZDAKDBrsFbaDCdCdIZ6wjEBg4w3sHibX0sshiIucHT72XaI_DetlHYGCUqluJj8DJe/" /><b>Womens Wear</b></a>
 <ul>
<li><a href="#url">Dresses</a></li>
<li><a href="#url">Coats & Jackets</a></li>
<li><a href="#url">Jeans</a></li>
<li><a href="#url">Knitwear</a></li>
<li><a href="#url">Shirts & Blouses</a></li>
<li><a href="#url">Skirts</a></li>
<li><a href="#url">Shoes</a></li>
</ul>
<span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean non nunc dolor. Morbi vestibulum volutpat porttitor.</span>

</li>
<li class="sub-li p2"><a class="a2" href="#url"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjUUNV2j1F3PS5hjzBWPLesjPA1YvnHOB13EdrA4LgeaMG8KtWHTGq6S83tNAQjrTtCwvOHoV1SlR5HjOp-DIlGi3XWHAbX89aL4CCs-JLFVFXJNWELLO5H7umJAlji4zgeoZ6hnjf11s8g/" /><b>Mens Wear</b></a>

<ul>
<li><a href="#url">Jackets</a></li>
<li><a href="#url">Trousers</a></li>
<li><a href="#url">Shirts</a></li>
<li><a href="#url">Suits</a></li>
<li><a href="#url">Jeans</a></li>
<li><a href="#url">Shoes</a></li>
</ul>
<span>Morbi eget purus elit, sed interdum diam. Maecenas ultricies, nisi ac scelerisque sagittis, est eros euismod nulla.</span>

</li>
<li class="sub-li p3"><a class="a3" href="#url"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgKy04DOmgvEb2PTVw2b6QSJS5jWyPW0e0pEoWDZL4E3zvGqB_47ac9TWptS78cWM9HGLHzrfTjC1duyEQ-5EgxtRxBMCKeyL7fK_QiB6IiEkJ_oaL1eFkv2DSa33A0RT9KQlmSjErQDne4/" /><b>Boys Wear</b></a>

<ul>
<li><a href="#url">Shirts</a></li>
<li><a href="#url">Jumpers</a></li>
<li><a href="#url">Trousers & Jeans</a></li>
<li><a href="#url">Trainers</a></li>
<li><a href="#url">School Wear</a></li>
</ul>
<span>Vestibulum at ultricies mauris. Suspendisse potenti. Suspendisse potenti. Fusce lacinia sem et ipsum mattis mollis.</span>

</li>
<li class="sub-li p4"><a class="a4" href="#url"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiv-xQBnbCtt2ZYiVJJBUUtfUapjH-aBJo9PPMVn6BAi2Dq3vnwAbepBQJxwmEPWMKAIbWHk-jtYpWlusddAo8LSl86ANIUFnywWh8NqZDiEx6TdVtL2Yy0jdfXnledesSiMEFeWbDnJGrR/" /><b>Girls Wear</b></a>

<ul>
<li><a href="#url">Dresses & Skirts</a></li>
<li><a href="#url">'T' Shirts</a></li>
<li><a href="#url">Coats</a></li>
<li><a href="#url">Jeans</a></li>
<li><a href="#url">Accessories</a></li>
<li><a href="#url">Belts</a></li>
<li><a href="#url">Trainers & Shoes</a></li>
</ul>
<span>Nulla vitae enim nisl, sed vestibulum neque. Praesent eu malesuada nunc. Aenean fermentum, nulla ut convallis lacinia.</span>

</li>
<li class="sub-li p5 current"><a class="a5" href="#url"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhw3xtmIESO-UCIXt1yXgm10RZrnzfQUYKtn1yCJDaxitvQp4gciaw2Di6L4xEky8k67Bt-MQAGZCkrwYQbUGx3bqav59kQ0v0KnM4hhup1vN9DmYk8YB-RVzFNW3IcA3UgPTvyjHxB3ugj/" /><b>Baby Wear</b></a>

<ul>
<li><a href="#url">Sleep Suits</a></li>
<li><a href="#url">Baby Grows</a></li>
<li><a href="#url">Vests</a></li>
<li><a href="#url">Socks & shoes</a></li>
<li><a href="#url">Coats & Jackets</a></li>
<li><a href="#url">Hats</a></li>
<li><a href="#url">Jumpers</a></li>
</ul>
<span>Sed convallis lobortis porttitor. Morbi congue, est ac fermentum elementum, augue tortor tristique libero, quis lobortis erat elit eu eros.</span>

</li>
</ul>

</li>
</ul>
</div>

Questions or Comments? Just ask or leave a note, I'd be glad to help you out or take any advice.

Tuesday, April 20, 2010

How to add a horizontal Lava Lamp navigation

From this tutorial, you will be able to add a horizontal lava lamp style navigation menu to your Blogger BlogSpot.

lavalamp

Click here to see the demo

You will need these file(s) for this tutorial:

lavalamp_0.1.0.zip

You will need to upload these files to your server.

To add a horizontal Lava Lamp navigation:

1. From your Blogger dashboard, navigate to Layouts and then Edit HTML.

2. Add the following javascript and style sheet link below right after the opening head tag of your blog:

<span id="preserve153fad06688e4daba0a63153cc59a967" class="wlWriterPreserve"><script type="text/javascript" src="jquery-1.1.3.1.min.js"></script></span> <span id="preservec55a3f5b20c642859020b34d0b920624" class="wlWriterPreserve"><script type="text/javascript" src="jquery.easing.min.js"></script></span> <span id="preservee1ba8ce4b8c2419b8ec01f337d9c4f45" class="wlWriterPreserve"><script type="text/javascript" src="jquery.lavalamp.min.js"></script></span> <span id="preserve4cc7688c44874d529d432ce8ba0d6e6b" class="wlWriterPreserve"><script type="text/javascript"> $(function() { $("#1, #2, #3").lavaLamp({ fx: "backout", speed: 700, click: function(event, menuItem) { return false; } }); }); </script></span>

3. Next, you will need to add the following section code below to where you want the featured content box to appear. You can do this by adding a new HTML/JavaScript widget or paste it within your HTML section of your layout.

<ul class="lavaLampWithImage" id="1"> <li><a href="#">Home</a></li> <li><a href="#">Plant a tree</a></li> <li><a href="#">Travel</a></li> <li><a href="#">Ride an elephant</a></li> </ul>

Depending on the three, you will need to modify UL class name to the one you want to use: “lavaLampWithImage”, “lavaLampNoImage”, “lavaLampBottomStyle”

4. You should preview your blog first to see if all codes have been implemented correctly. If so, save your template and you’re finished.

This widget is brought to you by Ganeesh.

Friday, February 19, 2010

10 drop down menu solutions

Here are 10 pre-made menus if you need a quick navigation menu for your template. These come from the web and can greatly shorten the development process. The one's listed here are mainly jQuery and CSS based and are either drop-down or just multi level menus. Nonetheless, they all bring functionality and appearance inclination to your template.