Helplogger
Home
Blog DesignWidgets SEO Menus Po ...
Vertical drop down menu with jQuery
3 comments
jGlideMenu is a vertical menu that can be dragged and dropped so that the reader can place it anywhere, and in addition, he can browse through the tabs in a very peculiar manner that comes with a sliding effect giving a sexy touch.
One of the advantages is that it can store a large number of links and can be removed anytime if we want.
To understand this menu better and to see it in action, visit this demo blog. There we can drag the menu, navigate through its tabs or close.
To add this vertical menu on your blog, just follow these steps:
1) From your Blogger dashboard, go toTemplate>Edit HTMLand before thetag, add these scripts:
2) Now paste before]]>these styles:
.jGM_box {
position: absolute;/* Change absolute with fixed if you want it to float */
top: 50px;/* Distance from above */
right: 760px;/* Distance from right */
width: 227px;
height: 317px;
background: #fff;/* Background color */
margin: 0;
padding: 0;
border: 1px solid #ccc;/* Border */
overflow: hidden;
}
.jGM_header {
position: absolute;
top: 0;
left: 0;
height: 18px;
width: 227px;
background: #d1d1d1;/* Background color for the up bar */
color: #fff;
text-align: right;
vertical-align: middle;
line-height: 18px;
cursor: move;
}
.jGM_header a {
margin-right: 12px;
text-decoration: none;
color: #000 !important;
cursor: pointer;
}
.jGM_wrapper {
position: absolute;
top: 19px;
left: 0;
width: 2270px;
height: 288px;
margin: 0;
padding: 0;
border: 0;
}
.jGM_tile {
position: absolute;
top: 0;
left: 7px;
width: 213px;
height: auto;
overflow: hidden;
margin: 0;
padding: 0;
border: 0;
display: block;
}
.jGM_cats {
width: 100%;
height: 64px;
overflow: hidden;
vertical-align: middle;
text-align: left;
}
.jGM_cats h4 {
font-family: Verdana,Arial,serif;
font-size: 1.8em;
margin: 0;
padding: 2px 0;
line-height: 1.8em;
color: #414141;
font-weight: normal;
}
.jGM_cats p {
font-family: Verdana,tahoma,arial;
font-size: 1em;/* Font size of the description */
margin: 0;
padding: 0;
line-height: 1.2em;
color: #858585;/* Description color */
font-weight: normal;
}
.jGM_pager {
height: 18px;
width: 213px;
line-height: 18px;
margin: 0;
border: 0;
padding: 0;
background: #f6f6f6;
text-align: center;
vertical-align: middle;
}
.jGM_pager a {
text-decoration: none;
font-weight: bold;
text-decoration: none;
display: block;
}
.jGM_pager a:hover { background: #d1d1d1; }
.jGM_pager img { border: 0; margin: 6px 0; }
.jGM_content {
width: 213px;
height: 150px;
margin: 1px 0;
padding: 0;
border: 0;
overflow: hidden;
}
.jGM_content a {
font-family: Tahoma,arial;
text-decoration: none;
color: #333 !important;
height: 18px;
width: 100%;
display: block;
line-height: 18px;
padding: 0 0 0 10px;
background-color: #e6e7e9;
margin: 1px 0;
}
.jGM_content a:hover {
color: #fff !important;
background-color: #4D4E67;/* Bar color on mouseover */
}
.jGM_more {
background-image: url( http://3.bp.blogspot.com /-n6XI5wLg8og/UjiLQ10dQpI /AAAAAAAAD3Q/cOVY1gTiruc/s1600 /arrow.gif);
background-repeat: no-repeat;
background-position: 203px 50%;
}
.jGM_back {
position: absolute;
top: 255px;
right: 0;
height: 18px;
width: 52px;
background: #d1d1d1;
line-height: 18px;
vertical-align: middle;
text-align: center;
margin: 10px 0 0 0;
padding: 0;
border: 0;
z-index: 99;
}
.jGM_back a {
height: 100%;
width: 100%;
text-decoration: none;
color: #000 !important; /* Color of the "Back" link */
display: block;
}
.jGM_back a:hover {
color: #fff !important;/* Color of the "Back" link on mouseover */
background: #4D4E67;
}
.jGM_reset {
position: absolute;
top: 255px;
right: 62px;
height: 18px;
width: 52px;
background: #d1d1d1;
line-height: 18px;
vertical-align: middle;
text-align: center;
margin: 10px 0 0 0;
padding: 0;
border: 0;
z-index: 99;
}
.jGM_reset a {
height: 100%;
width: 100%;
text-decoration: none;
color: #000 !important;/* Color of the "Home" link */
display: block;
}
.jGM_reset a:hover {
color: #fff !important;/* Color of the "Home" link on mouseover */
background: #4D4E67;
}3) Now go toLayoutand paste the structure of the menu inside aHTML/Javascriptgadget:
Add the URLs of the links and the names of the tabs and that's it.
If you want to add more links to the first level, then add another line like this:
Link 12
If you want to add another level to the link, then the line should be like this:
Link 5Then in the area of the second or third level, add a piece like this:
Link 5.1
Link 5.2
Here you should keep something in mind, if you look closely the link takes the REL attribute which must be the same as the ID we put on the second level, these IDs should not repeat and always be unique.
Yes, it sounds complicated, but once you understand the concept, you'll see that is actually pretty simple.
In the area of the styles, there are the parts that can be customized. If you want the menu to be static, let's say you want to add it in the sidebar, then delete the first code of the script that is in italics. And in the CSS styles, remove this part:
position: absolute;/* Change absolute with fixed if you want it to float */
top: 50px;/* Distance above */
right: 760px;/* Distance to the right */When there are many links then, there will be showing some arrows, so when you mouseover them, it will show the rest of the links either up or down.
Throughout the menu structure we can change the Menu name and the descriptions as well.
As this menu is made with JQuery, it is recommended to verify to have only one version of it.
Like
1
Random Posts
Expandable Recent Comments Widget for Blogger/Blogspot26/04/2013 - 10 Comments
Create A Rollover Image Effect (change image on mouseover)31/05/2012 - 55 Comments
Add a Different Background For Author Comments in Blogger's Threaded Comments12/03/2013 - 13 Comments
Related Posts:
jQuery Sliding Panel with Expanding...
How to add a thumbnail image/photo ...
Using JQuery + EasyDrag to Move Ele...
How to Add Neat CSS3 Dropdown Menu ...
How to Add an Admin Control Panel i...
3 comments:
Mohammed Zakir Ali APTEACHERS 9/19/2013
Dear Admin
Your Demo Blog mentioned in this post is restricted to invited users only. Please Make it Public.. Reply
LEONE ACHOLA 11/13/2013
Thanks man it helped alot!!!!! Reply
Anurag Choudhary 2/20/2014
The blog is really helping but I want to know the personality behind it. Please create "About Me" so that we may know about you and feel close to you. Reply
Add comment
Comment as: Sign out
Notify mePublishPreview
Privacy Policy| Disclaimer| Terms of Service| Sitemap Back to Top DMCA PROTECTED
Search
Search
Follow on Facebook
Helplogger
Like
2,786 people like Helplogger .
Facebook social plugin
Follow on Blogger
Subscribe via Email
Receive Quality Tutorials Straight in your
Inbox by submitting your Email below.
Submit
Or subscribe via RSS Feed
Recent Posts
How to Add Numbered Page Navigation Widget for Blogger
5 Easy Ways to Improve the SEO of a blog & Boost Traffic
What is the difference between padding and margins?
Add a Custom jQuery Lightbox To Blogger
How to Use Cookies in Javascript
Recent Comments
irsah imihar
Customizing will always be easy with jquery and javascript. Even...
Missy G
Yay! Thank you for making this so easy! This is just what I...
divakar sivashankar
admin i have a problem even if i add the tag the ad is showing up...
Anonymous
I don't understand the instructions you have given :(
Nanette Benablo
your site is very helpful and easy to follow tutorials. thank you...
Popular Posts
Simple Recent Posts Widget for Blogger/Blogspot
Create A Rollover Image Effect (change image on mouseover)
Recent Comments Widget For Blogger
How to remove Blogger Picture/Image Shadow and Border
Hide/Show Widgets /Gadgets in Home/post /static/archive pages in Blogger
1
Like
No comments:
Post a Comment