February 20, 2014

Weebly Tricks #29 - Rollover Text Menu

Posted by Domz at 2/20/2014

Rollover Text Menu


Perfect for Weebly's sidebar, this Rollover Text gives an amazing touch to your menus. The trick is simply replacing the original text plus a change in background. Your choice if you want a different text after the original. The procedure is simple and easy.. From the demo, the second set of example has been edited to adapt the red theme.







1. Insert the following code to the <head>: (<head> help here)

<style>

ul{
margin:0;
padding:0;
}

li{
display:inline;
list-type:none;
}

a.glidebutton{
display: inline-block;
position: relative;
color: #4A4A4A; /* default color */
background: #ececec; /* default bg color */
text-decoration: none;
font: bold 14px Arial; /* font settings */
letter-spacing: 2px; /* font settings */
overflow: hidden;
height: 30px; /* height of each button */
text-align: center;
border-radius: 5px; /* border radius */
-moz-transition: all 0.3s ease-in-out; /* Enable CSS transition between property changes */
-webkit-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
-ms-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}

a.glidebutton > span:first-child{ /* first span inside button */
position: relative;
display: block;
height: 100%;
padding: 6px; /* padding of button */
-moz-box-sizing: border-box;
box-sizing: border-box;
-moz-transition: all 0.3s ease-in-out; /* Enable CSS transition between property changes */
-webkit-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
-ms-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}

a.glidebutton > span:first-child:after{ /* CSS generated content */
content: attr(data-text); /* Duplicate text of span markup */
display: block;
width: 100%;
height: 100%;
-moz-box-sizing: border-box;
box-sizing: border-box;
padding: inherit;
position: absolute;
top:100%;
left:0;
}

a.glidebutton:hover{
color: black; /* color of button on hover */
background: #72cb47; /* bg color of button on hover */
box-shadow: 0 0 4px green inset;
}

a.glidebutton:hover > span:first-child{
-moz-transform: translateY(-100%);
-webkit-transform: translateY(-100%);
-ms-transform: translateY(-100%);
-o-transform: translateY(-100%);
transform: translateY(-100%);
}
</style>

The height of the button depends on the font size so better keep it proportional. While to center the text on the button, adjust the bottom padding.

2. Now go to the page you want to insert the menus, drag one "embed code" and paste the following:

<ul>
<li><a class="glidebutton" href="http://www.myweeblytricks.com/"><span data-text="Home">Home</span></a></li>
</br>
<li><a class="glidebutton" href="http://www.myweeblytricks.com/"><span data-text="Demos">Demos</span></a></li>
</br>
<li><a class="glidebutton" href="http://www.myweeblytricks.com/"><span data-text="Images">Images</span></a></li>
</br>
<li><a class="glidebutton" href="http://www.myweeblytricks.com/"><span data-text="Text">Text</span></a></li>
</br>
<li><a class="glidebutton" href="http://www.myweeblytricks.com/"><span data-text="Scroller">Scroller</span></a></li>
</br>
<li><a class="glidebutton" href="http://www.myweeblytricks.com/"><span data-text="Time and Dates">Time and Dates</span></a></li>
</ul>


To align the menus horizontally, just removed the </br> tags. The text in red mark is the original, in which substituted by the second text on mouseover. Its up to you to keep it the same or entirely different.

Get email updates and more access! (Free)
Email *
email marketing by activecampaign


If you enjoyed this post and wish to be informed whenever a new post is published, then make sure you subscribe to my regular Email Updates. Subscribe Now!

...

0 comments:

Have any question? Feel Free To Post Below:

 

© 2014. All Rights Reserved | My Weebly Tricks | Template by Blogger Widgets

Home | | Privacy Policy | Top