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>
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>
<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.
0 comments: