Vertical drop down menu with jQuery

jGlideMenu is a drop down menu that the reader can drag anywhere. In addition, you can move between tabs in a very special way, with a sliding effect that gives it an attractive touch.

The advantage is that you can save and delete a large number of links at any time by clicking the Close button.

Blogger View Vertical Dropdown List

To better understand this jQuery dropdown and start using it, visit the demo blog below. There we can pull up the menu, navigate through its tabs, or close it.

test blog

How to add a vertical dropdown using jQuery in Blogger

To add a dropdown using jQuery to a Blogger blog, follow these steps.

1. In the Blogger pane, go to the Templates section and click the Edit HTML button. When the template editor opens, click anywhere in the icon field and press CTRL + F to open the search box.

something similar In the search field and before this tag, add the following scripts:

2. Find ]]> And paste the CSS code before that:

.jGM_box {
Position: absolute. /* change if you want to move the constant 'absolute' */
top: 50px; /* distance from top of window */
Right: 760 pixels; /* space to the right */
Width: 227 pixels;
Height: 317 pixels;
background: #fff; /* background color */
margin: 0;
padding: 0;
Edge: 1px solid #ccc; /* edge color */
Flood: hidden
}
.jGM_header {position: Absolute; top: 0; left: 0; height: 18px; width: 227px; bottom: #d1d1d1; color: #fff; text-align: right; vertical-align: mid; line-height: 18px; cursor: move} .jGM_header a {margin-right: 12px; text-decoration: none; color: #000! ; Height: 288 pixels; margin: 0; padding: 0; edge: 0} .jGM_tile {mode: absolute; top: 0; left: 7 pixels; Width: 213 pixels; Height: automatic; Gain: hidden; margin: 0; padding: 0; border: 0; screen: 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.8 m; fields: 0; padding: 2px 0; Line height: 1.8m; Color: #414141; font: normal } .jGM_cats p {font: Verdana, Tahoma, Arial; font size: 1em; domain: 0; indent: 0; Line height: 1.2 um; Color: #858585; font weight: normal } .jGM_pager { height: 18px; Width: 213 pixels; line height: 18px; fields: 0; limit: 0; padding: 0; background: #f6f6f6; text alignment: center; vertical align: center } .jGM_pager {text-decoration: none; font weight: wide; text format: no; screen: block} .jGM_pager a: pass {background: #d1d1d1} .jGM_pager image {border: 0; Margin: 6px 0}. jGM_content {width: 213px; Height: 150px; margin: 1 pixel 0; padding: 0; limit: 0; overflow: hidden} .jGM_content {font-family: Tahoma, arial; text layout: no; Color: Width #333.: 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} .jGM_more { background-image: url (http://3.bp.blogspot.com/-n6XI5wLg8og/UjiLQ10dQpI/AAAAAAAAAD3Q/cOVY1gTiruc/s1600/arrow.gif); Background repeat: no repeat: no 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 {height: %100; width: 100%; text decoration: none; color: #000! display: block} .jGM_back a: hover {color: #fff! ; line height: 18px; vertical alignment: mid; text alignment: center; margin: 10px 0 0 0; padding: 0; limit: 0; z-index: 99} .jGM_reset a {height: %100; width : 100%; text format: no; Color: #000! Important; screen: lock} .jGM_reset a: pass {color: #fff! Important; Background: #4D4E67}

NB:

Notes highlighted in green show some customizable parts. If you want the menu to be static, suppose you want to add it to the sidebar and then remove the script marked in red. You also need to remove the following CSS code:

Position: absolute. /* change if you want to move the constant 'absolute' */
top: 50px; /* distance from top of window */
Right: 760 pixels; /* space to the right */

Finally, click the Save Form button to save changes.

3. Go to "Design" in the "Add a gadget" link and paste the menu structure into the HTML/Javascript widget:

• link 1


• link 2


• link 3


• link 4


• link 5


• URL "> link 6


• URL "> Link 7


• URL "> Link 8


• URL "> Link 9


• URL "> Link 10


• URL "> Link 11

• Link 1.1


• URL "> Link 1.2


• URL "> Link 1.3


• URL "> Link 1.4

• URL "> Link 2.1


• Link 2.2


• URL "> Link 2.3

• URL "> Link 3.1


• URL "> 3.2 . link


• URL "> 3.3 . link

• URL "> Link 4.1


• URL "> 4.2 . link


• URL "> Link 4.3

• URL "> Link 5.1


• URL "> Link 5.2

• URL "> Link 1.1.1


• URL "> Link 1.1.2

• URL "> Link 1.2.1


• URL "> Link 1.2.2

Add the URLs and URLs you want to appear in the list and save changes.

How does the dropdown vertical menu work?

If you want to add more links to the first level, add another line as follows:

URL "> Link 12

To add another link level, the line should look like this:

rel = "tile_0010"> ref 5

Then we add the second or third level as follows:

id = "tile_0010" class = "jGlide_001_tiles" title = "menu" alt = "secondary description">

• URL "> Link 5.1


• URL "> Link 5.2

If we look closely, the link has a REL attribute, which must match the identifier we put in the second level. These identifiers should not be duplicated and should always be unique. It sounds complicated, but once you understand the concept, you'll find that it's really straightforward.

Once you have added enough links, arrows will appear at the top and bottom of the list to help you navigate up and down the rest of the links.

Through the menu structure, we can also change the menu title and description.

last note

Since this list is built with jQuery, make sure you only have one version.