Mega Menu with Images or Thumbnails for Blogger
Visual content has a certain appeal in that websites integrate images onto each page or work only with photos. Now, with the new AJAX navigation menu widget, images can also be added to drop-down menus.
The AJAX navigation menu is a widget for blogging designed specifically for the Blogger platform. It was inspired by the Mashable site long before the changes. Despite the simple inspiration և, the menu that opens with images is a huge success.
It runs on the jQuery library - the Blogger JSON software API. In terms of functionality, it works like a regular drop-down menu when JavaScript is disabled. For a blog to work online, it must be reserved for public visitors, so the JSON Feed Blogger API will work properly.
Some of the supported Windows browsers include IE5 +, Firefox, Google Chrome, Safari Netscape 7+ and Opera 8+. When using a Mac the AJAX menu is based on Firefox, IE Safari. However, when JavaScript is disabled, the menu is still available, but only as a clean CSS menu.
There are many other possibilities, but you won’t be able to use them or experiment until you have a new megamen with images. So what do you need to do to implement it in your blog or website?
Step 2. Click " Template ", then click " Edit HTML ". Enter anywhere in the code area և use CTRL + F to make searching faster: easier. Enter the following tag և press Enter to find it.
Step 3. Make sure your blog already has the jQuery app installed. If not, you need to add a few lines of code in advance shortcut (CTRL + F to find it). See code below.
Note:
- If the jQuery plugin already exists, remove the red line.
- To change the number of entries, change the value of 4 to the following:
Step 4. Gently add the HTML code to make sure the drop-down image menu works properly. There are only three types of URLs that the AJAX menu accepts, and they should be used accordingly.
URL tag: http://youurblogurlblogspot.com/search/label/LABELNAME .
Search query: http://youurblogurl.blogspot.com/search?q=SEARCHQUERY
Search query tag. http://youurblogurl.blogspot.com/search/label/LABELNAME?q=SEARCHQUERY
A search query among three URLs must be encoded in the URL using a special tool.
Step 5. Find the following line using CTRL + F:
The AJAX navigation menu is a widget for blogging designed specifically for the Blogger platform. It was inspired by the Mashable site long before the changes. Despite the simple inspiration և, the menu that opens with images is a huge success.
It runs on the jQuery library - the Blogger JSON software API. In terms of functionality, it works like a regular drop-down menu when JavaScript is disabled. For a blog to work online, it must be reserved for public visitors, so the JSON Feed Blogger API will work properly.
Features:
Multi-level menu support.
The AJAX menu is a multi-level drop-down menu based on a standard unsorted HTML list. If the menu contains a submenu, it is loaded immediately when the user hovers over the main menu. The great thing is that it saves outbound traffic, especially on a website with great navigation.Browser compatibility
Most AJAX applications will run in different browsers even with other add-ons or proprietary technologies already installed. The image menu works on the same principle, not for a specific browser. Since you can’t tell which browser you or your blog reader will use, the mega-drop-down menu of the new AJAX image is perfect.Some of the supported Windows browsers include IE5 +, Firefox, Google Chrome, Safari Netscape 7+ and Opera 8+. When using a Mac the AJAX menu is based on Firefox, IE Safari. However, when JavaScript is disabled, the menu is still available, but only as a clean CSS menu.
Automatic submenu display
In the new AJAX menu you just need to turn the menu item and the submenus will load automatically. You don’t need to click on a menu to go to a submenu. This not only saves valuable user time but also outbound traffic.Menu style:
The AJAX menu can be designed simply by changing the megamenu.js CSS styles. The first is used when JavaScript is enabled and the second is used when it is disabled. You can manually adjust the menu settings or use ready-made templates.There are many other possibilities, but you won’t be able to use them or experiment until you have a new megamen with images. So what do you need to do to implement it in your blog or website?
Add megamens with images / thumbnails to Blogger
Step 1. Log in to your Blogger account go to Control Panel. Select the blog where you want to publish the new megamen.CSS:
Step 2. Click " Template ", then click " Edit HTML ". Enter anywhere in the code area և use CTRL + F to make searching faster: easier. Enter the following tag և press Enter to find it.
]]>:Once you find the label, add the code below / in front of it.
.megamen * {margin: 0; charge: 0; font family: 'PT Sans Narrow'} ul.megamenu {list-style. no one; line height: 1; overflow - visible! can} street megamenu: then {margin. 0; filling. 0; content: ''; screen lock; height: 0px; Clean. both ul.megamenu li {float. left; screen: built-in; Position: relative; text conversion: uppercase} ul. megamenu li a.menu-target: then {content: ""; width: 0; height: 0; left border: 3 pixels transparent; right border: 3px transparent; upper limit: 3 pixels solid #fff; font size: 0; line height: 0; inside: 22px; Correct: 5 pixels; position. charge: 0px 20px; text formatting - no; -ft limit: 1px solid # 000; box-shadow: 1px 0 0 0 rgba (255, 255, 255, 0.1) tab; color: # d9d9d9; font size: 14px; transition all 0.3 sec ease of exit} street megamenu them. hover over {background: # 111111; color: #fff} ul.megamenu ul {position: absolute; display: no; Jor: 100%} street megamenu or: hover> street ադրել show. block} ul .megamenu ul li «z-index: 72; minute width: 149px; float - no; background: # 000; text-shadow: none} ul.megamenu ul li {text-transform: nobody; font weight: normal} st. megamenuid ul li a: hover, ul.megamenuid ul li a.hover {background: # Е0Е0Е0; color: # 444} ul.megamenu ul ul {screen: none; left: 100%; up: 0} in the street megamenuid div .megapadmenu {background: # F9F9F9; position: absolute; width: 8 30 pixels; z-index: 90; left: 0; top: 100%; filling: hidden; minimum height - 150px; -moz-conversion: translate (0.30px); - Webkit conversion. translate (0.30px); - about-transform: translate (0.30px); conversion: translate (0, 30px); Origin of conversion: 50% 0; visibility: hidden; opacity: 0; color: # 888; box-shadow: 0 10px 7px -7px rgba (0,0,0,0,1); transition all 0.3s easy -in-out} ul.megamenuid li: hover div.megasubmenu {visibility: visible; opacity: 1; -moz-transform: translate (0,0); - Webkit-transform: translate (0, 0); - about- transformation. translate (0,0); conversion: translate (0,0)} ul.megamenuid ul, ul.megamenuid ul li {show - block! Strength; end: 0 no! Strength; field: 0! կարևոր; filling: 0! can} ul.megamenuid ul li {necessary condition, no. կարևոր; swim: left! strong} ul.megamenuid ul.leftmenulist {position: absolute; width: 18%; left: 0; above: 0; under: 0; background: #EEEEEE; right edge: 1 pixel broken # e5e5e5! կար որ} ul.megamenuid ul.leftmenulist a {left edge ․ no one. կարևոր; color: # 555} megamenuid str. Adjutant - Position: relative; display: block; width: 81%; swim: Correct; margins: 0px 0px 0px! կարևոր; background: no} ul.megamenuid ul.rightmenulist li {screen: lock; filling: hidden; Position: relative; minimum height - 210 px; fill: 5 pixels 17 pixels 5 pixels. can i ul.megamenuid ul.djathtasmenulist li .thumb-container {left: 0; width: 100%; height: 100%; position: absolute; suffocation - hidden; font size: 0; line height: 0} ul.megamenuid ul.menulist right li .thumb-container img {position: relative; top: 10 pixels; filling: 0; width: 100%; height: 100%; screen: block} ul.megamenuid ul.menulist right to {screen: block: left edge, none. կարևոր; charge: 0px 5px! կարևոր; line height: 1.4; color: # 777; font weight: bold; font size: 14px} ul.megamenuid ul.rightmenulist a. hover {color: # 000; background: transparent} ul.megamenuid .loading-icon {background: url ('58, 1 p: // 2.bp.blogspot.com/-N9HNU11nhiA/Va-NLcGF0lI/AAAAAAAAALW4/HzSlCK7PGeY/s1600'it) transparent; width: 22 pixels; height - absolute; Up to 50%; upper limit: -11px; right: 5px} ul.megamenuid .menu-icon {bottom border: 4px solid transparent; contour: 4px solid transparent; border left: 4px solid # 777; screen lock; height: 0; upper limit: -4px; position: absolute; right: 11 pixels; Up to 50%; width: 0} #megamenuid (background: rgba (0, 0, 0, 0) -moz-linear -gradient (top center, # 3d3d3d, # 212121) repeats motion 0 0; background. -webkit-linear-gradient (top, # 3d3d3d, # 212121); background color: # 3d3d3d; shadow block: 1px 1px 0 0 RGB (255, 255, 255, 0.1) installed; height: 50 pixels; width: 100%; Position: relative; maximum width: 1000 pixels; field: 0 automatic; padding: 0px} #megamenuid h5 {font size: 16px; field: 70 pixels; text alignment: center} #megamenuid h5: before {content: ""; position: absolute; top: 50 pixels; left: 50%; width: 5 pixels; height: 2 pixels; field on the left: -4px; border left: 2px solid letter s; right edge: solid s և 2px} #megamenuid h5: {content after ""; position: absolute; about 55 pixels; left: 50%; width: 10 pixels; height: 5 pixels; -left field: -7px; upper limit: 2px solid letter s; border-left. 2px fixed s; right edge: 2px solid s; border radius: 8px 8px 0px 0px} li.search-box {float: Correct! կարևոր; line height: 35 pixels; field: 7px 10px 0 0} li.search-box .search-field {border: none; charge: 3px; background: # 3F3F3F; color: #fff; width: 135 pixels; font size: 13px} li.search-box Search field: focus; contour - no; background: # 4C4C4C; color: # fff} li.search-box .search-button {background: URL ('http://4.bp.blogspot.com/-VJqk_zzkAuw/VazlDH_goDI/AAAAAAAAALVM/t-AjU3ix55k/s1600/search.png') ; end: no; cursor - pointer; filling: 5px 10px; transition all 0.3 seconds. easy-out} li.search-box .search-button: hover {opacity: 0.9} .search-alert {background: # E84C3D url (http://3.bp.blogspot.com/-TQMok5egm8c/Va44AXnjg3I/AAAAAAAALV8/ eq_8ICAlH2I / s1600 / search-info.png) without duplication; background position: 5px; text conversion with #cap letters; фф; field: -5px; charge: 0px 15px 0px 40px; screen - no; limit: 5px}
JavaScript:
Step 3. Make sure your blog already has the jQuery app installed. If not, you need to add a few lines of code in advance shortcut (CTRL + F to find it). See code below.
Note:
- If the jQuery plugin already exists, remove the red line.
- To change the number of entries, change the value of 4 to the following:
Number of seats: 4- To add different thumbnails if there are no images in the message, replace the blue URL with the following:
noThumbnail : "http://www.blogspot.com/-Z7jG9iO9OTg/Vazz6YJnFQI/AAAAAAAALVs/wlSvXPgdDAo/s1600/no_image_available.png"
HTML:
Step 4. Gently add the HTML code to make sure the drop-down image menu works properly. There are only three types of URLs that the AJAX menu accepts, and they should be used accordingly.
URL tag: http://youurblogurlblogspot.com/search/label/LABELNAME .
Search query: http://youurblogurl.blogspot.com/search?q=SEARCHQUERY
Search query tag. http://youurblogurl.blogspot.com/search/label/LABELNAME?q=SEARCHQUERY
A search query among three URLs must be encoded in the URL using a special tool.
Step 5. Find the following line using CTRL + F:
Add the following HTML code directly above this line:Note. Replace the blue text with the tag URL and the red text with the tag name. This is the tag you added to the message editor shortcut settings.
Step 6. Click Save Template to make all changes take effect.
If you can't find step by step 5, go to the " Layout " tab, click the " Add" tool և select the HTML / JavaScript tool. Copy the HTML code and place it in the field ... then click " Save ".
This one!
When this is done, the AJAX image menu will be inserted and ready to use. Make sure you select photos that match the submenu list և to make your site look consistent. However, research shows that the text that accompanies an image, even if it is completely inappropriate, can attract attention.
