Skip to main content

Posts

Showing posts with the label menus

Adding a Neat CSS3 Dropdown Menu in Blogger

Presenting a remarkable dropdown menu with pure CSS3, originally created by Andrew from script-tutorials.com. I have made slight modifications to ensure its seamless integration into our Blogger template. Located in the upper right corner of this menu are the contact links and social media icons for Facebook, Twitter, Google Plus, and RSS feed. Directly below these links, you'll find the dropdown navigation menu, while the search form resides on the left side. To enhance the user interface and interaction, the CSS dropdown menu incorporates subcategories with elegant CSS3 effects such as box-shadow, text-shadow, and a smooth transition triggered by hovering over the parent link. Please visit this demo page to see it in action. Adding the CSS dropdown navigation menu in Blogger Step 1. Access your Blogger Dashboard and go to Template > click on the Edit HTML button Step 2. Click anywhere inside the code area and press the CTRL + F keys to open the search box. Type the tag be...

A Beautiful jQuery Drop-Down Menu For Blogger Blogspot

Alright, this time, we are going to make a stylish and simple jQuery drop down menu. The main objective is to make it as simple as possible, with some little jQuery effect and easy to customize/ apply different style on it. To style it into your own design, you just have to modify the a tag CSS style. You can change colors or put background images, or the size and color of text. Steps Adding the jQuery Drop-Down menu Step 1. Go to Dashboard - Template - Edit HTML - Proceed Step 2. Expand Widget Template (make a backup) Step 3. Search for the following code: ]]></b:skin> Step 4. Add the following CSS code before/above it: #jsddm { height: 40px; margin: 0; overflow: visible; z-index: 2; padding: 15px; position:relative; } #jsddm li { float: left; list-style: none; font: 12px Tahoma, Arial; } #jsddm li a { display: block; white-space: nowrap; margin:1px 3px; border: 1px solid #AAAAAA; background: #cccccc; background: -webkit-gradient(linear, left top, left bottom, from(#...