Skip to main content

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.


dropdown menu

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 below inside the search box and hit Enter to find it.
</header>
Step 3. Just below </header> add the HTML structure:
<div id='contact-links'>
    <div id='my-links'>
        <a href='#'>About</a>
        <a href='#'>Contact</a>
                <a href='#'><img height='18px' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh1j1khvuwDS1H_Qc_HtsqI2XRCYCVBJnzrWPoZlqiFsAKiikCGv1Pyb6BjXySZvjIyjjZCYKruyW7u6efOxBHJoJd6Qy2YOp0wB3H-MS2wLS9_ZA4hp2z71a9cShKI-SAsaZ_XoItkA4G1/s1600/facebook-icon.png' title='Facebook' width='18px'/></a>
<a href='#'><img height='18px' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjwES3yev6ipObiyDJ8lm-PxmQjTd3laGOwQgUxDcv9mblvwBX_N9ABFnb-YS5E5h9MO6DEGTO4k1m9xQiut20rOzeuW04xOj3cHIEiqhlNzi0Bf8FZh_PDK9XiOl3F0xLZvW7h1Ng8xMIb/s1600/twitter.png' title='Twitter' width='18px' /></a>
        <a href='#'><img height='18px' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj4OELiOU2Sqr_xuSxSZg_EMyQ2-BYPiezIQnnxESB2yZ3p8s_lELde_NN_KPt8S85RXQX_I30dWsynfNg9Ru6uKQkOAM6fJGZrJOQYxwU7Wc-HRYzcts9k3jFFw9peBS5Q8arIfMyarS9j/s1600/google-plus-icon.png' title='Google' width='18px'/></a>
        <a href='#'><img height='18px' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgDNChlRx74kYgqTYyvG-JwE88o-m1PlMeSKJ9lCYyFY08i-eMekjbiJ4nZOe4pq7KmXpB0rKTtO2rtKrzPCbgJMoiH0BPaPep2L-2pOQRQe6-MB5VgeAQ1s3eIX6Kt6rIVdyK0rFTEJvvt/s1600/rss-icon.png' title='RSS Feed' width='18px'/></a>
    </div>

    <div id='menu-container'>
        <nav id='neat-menu'>
            <ul>
              <li class='active'><a href='/'>Home</a></li>
                <li><a href='#'>Dropdown</a>
                    <ul>
                        <li><a href='#'>Menu element 1</a></li>
                        <li><a href='#'>Menu element 2</a></li>
                        <li><a href='#'>Menu element 3</a></li>
                        <li><a href='#'>Menu element 4</a></li>
                        <li><a href='#'>Menu element 5</a></li>
                    </ul>
                </li>
                <li><a href='#'>Dropdown</a>
                    <ul>
                        <li><a href='#'>Menu element 1</a></li>
                        <li><a href='#'>Menu element 2</a></li>
                        <li><a href='#'>Menu element 3</a></li>
                        <li><a href='#'>Menu element 4</a></li>
                        <li><a href='#'>Menu element 5</a></li>
                    </ul>
                </li>
                <li><a href='#'>Dropdown</a>
                    <ul>
                        <li><a href='#'>Menu element 1</a></li>
                        <li><a href='#'>Menu element 2</a></li>
                        <li><a href='#'>Menu element 3</a></li>
                        <li><a href='#'>Menu element 4</a></li>
                        <li><a href='#'>Menu element 5</a></li>
                    </ul>
                </li>
                <li><a href='#'>Single Menu</a></li>
                <li><a href='#'>Single Menu</a></li>
                <li><a href='#'>Dropdown</a>
                    <ul>
                        <li><a href='#'>Menu element 1</a></li>
                        <li><a href='#'>Menu element 2</a></li>
                        <li><a href='#'>Menu element 3</a></li>
                        <li><a href='#'>Menu element 4</a></li>
                        <li><a href='#'>Menu element 5</a></li>
                    </ul>
                </li>
            </ul>
        </nav>

        <!-- menu-search form -->
        <div id='menu-search'>
          <form method='get' action='/search'>
                <input autocomplete='off' name='q' placeholder='search...' type='text' value=''/>
            </form>
        </div>
    </div>
</div>
Replace the # symbols with the URLs of your links and replace the texts in blue with the titles that you want to appear. To change the social media icons, add the links of your icons instead of the ones in blue. If you don't know how to upload and get the URL of an image, please read this tutorial.

If you want to remove the sub categories, remove the code within the tags highlighted in yellow, including the ul tags. To remove only a menu element, remove the part that starts with <li> and ends with </li>

Step 4. And now let's add the CSS styling for the menu. Search for the following piece of code:
]]></b:skin>
Just above ]]></b:skin> add this code:
#contact-links {
    text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.3);
    margin: auto;
    position: relative;
    width: 100%;
}
#contact-links a {
    color: #4C9FEB;
}
#contact-links a:hover {
    color: #3D85C6;
}
#my-links {
    float: right;
    font-size: 12px;
    margin: 4px 10px;
    overflow: hidden;
    text-shadow: 0 1px 0 #FFFFFF;
}
#my-links a {
    margin-left: 7px;
    padding-left: 8px;
    text-decoration: none;
}
#my-links a:first-child {
    border-width: 0;
}
#menu-container {
    background: -webkit-linear-gradient(#f6f6f6, #e9eaea) repeat scroll 0 0 transparent;
    background: -moz-linear-gradient(#f6f6f6, #e9eaea) repeat scroll 0 0 transparent;
    background: linear-gradient(#f6f6f6, #e9eaea) repeat scroll 0 0 transparent;
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f6f6f6', endColorstr='#e9eaea',GradientType=0 );
    border-radius: 0 0 4px 4px;
border:1px solid rgba(0,0,0,0.1);
    box-shadow: -1px 1px 0 rgba(255, 255, 255, 0.8) inset;
    clear: both;
    height: 46px;
    padding-top: 1px;
}
#neat-menu {
    float: left;
}
#neat-menu a {
    text-decoration: none;
}
#neat-menu ul {
    list-style: none;
    margin: 0;
    padding: 0;
}
#neat-menu > ul > li {
    float: left;
    padding-bottom: 12px;
}
#neat-menu ul li a {
    box-shadow: -1px 0 0 rgba(255, 255, 255, 0.8) inset, 1px 0 0 rgba(255, 255, 255, 0.8) inset;
    border-color: #D1D1D1;
    border-image: none;
    border-style: solid;
    border-width: 0 1px 0 0;
    color: #333333;
    display: block;
    font-size: 14px;
    height: 25px;
    line-height: 25px;
    padding: 11px 15px 10px;
    text-shadow: 0 1px 0 #FFFFFF;
}
#neat-menu ul li a:hover {
background: -webkit-linear-gradient(#efefef, #e9eaea) repeat scroll 0 0 transparent;
    background: -moz-linear-gradient(#efefef, #e9eaea) repeat scroll 0 0 transparent;
    background: linear-gradient(#efefef, #e9eaea) repeat scroll 0 0 transparent;
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#efefef', endColorstr='#e9eaea',GradientType=0 );
}
#neat-menu > ul > li.active > a {
    background: -webkit-linear-gradient(#55A6F1, #3F96E5) repeat scroll 0 0 transparent;
    background: -moz-linear-gradient(#55A6F1, #3F96E5) repeat scroll 0 0 transparent;
    background: linear-gradient(#55A6F1, #3F96E5) repeat scroll 0 0 transparent;
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#55A6F1', endColorstr='#3F96E5',GradientType=0 );
    border-bottom: 1px solid #2D81CC;
    border-top: 1px solid #4791D6;
    box-shadow: -1px 0 0 #55A6F1 inset, 1px 0 0 #55A6F1 inset;
    color: #FFFFFF;
    margin: -1px 0 -1px -1px;
    text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.3);
}
#neat-menu > ul > li.active > a:hover {
    background: -webkit-linear-gradient(#499FEE, #3F96E5) repeat scroll 0 0 transparent;
    background: -moz-linear-gradient(#499FEE, #3F96E5) repeat scroll 0 0 transparent;
    background: linear-gradient(#499FEE, #3F96E5) repeat scroll 0 0 transparent;
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#499FEE', endColorstr='#3F96E5',GradientType=0 );
}
#neat-menu > ul > li:first-child > a {
    border-radius: 0 0 0 5px;
}
#neat-menu ul ul {
    background: -webkit-linear-gradient(#F7F7F7, #F4F4F4) repeat scroll 0 0 padding-box transparent;
    background: -moz-linear-gradient(#F7F7F7, #F4F4F4) repeat scroll 0 0 padding-box transparent;
    background: linear-gradient(#F7F7F7, #F4F4F4) repeat scroll 0 0 padding-box transparent;
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#F7F7F7', endColorstr='#F4F4F4',GradientType=0 );
    border-radius: 5px 5px 5px 5px;
    border: 1px solid rgba(0, 0, 0, 0.1);
    box-shadow: 0 1px 0 #FFFFFF inset;
    height: 0;
    margin-top: 1px;
    opacity: 0;
    overflow: hidden;
    width: 240px;
    padding: 0;
    position: absolute;
    visibility: hidden;
    z-index: 1;
    -webkit-transition: all .5s;
    -moz-transition: all .5s;
    -ms-transition: all .5s;
    -o-transition: all .5s;
    transition: all .5s;
}
#neat-menu ul li:hover ul  {
    margin-top: 0\2;
    height: auto;
    opacity: 1;
    visibility: visible;
}
#neat-menu ul ul a {
    border-right-width: 0;
    border-top: 1px solid #D1D1D1;
    box-shadow: 0 1px 0 #FFFFFF inset;
    color: #444444;
    height: 24px;
    line-height: 24px;
    padding: 7px 12px;
    text-shadow: 0 1px 0 #FFFFFF;
}
#neat-menu ul ul a:hover {
background: -webkit-linear-gradient(#55A6F1, #3F96E5) repeat scroll 0 0 transparent;
    background: -moz-linear-gradient(#55A6F1, #3F96E5) repeat scroll 0 0 transparent;
    background: linear-gradient(#55A6F1, #3F96E5) repeat scroll 0 0 transparent;
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#55A6F1', endColorstr='#3F96E5',GradientType=0 );
    border-top: 1px solid #4791D6;
    box-shadow: -1px 0 0 #55A6F1 inset, 1px 0 0 #55A6F1 inset;
    color: #FFFFFF;
    text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.3);
}
#neat-menu ul ul li:first-child a {
    border-top-width: 0;
}
#menu-search {
    margin:8px 10px 0 0;
    float: right;
}
#menu-search form {
    background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEipxe3uJvrAJvWgDYYOIEwEZBZG-z8SAm0yCixBQIru_gRRYcgP40IK12ii7mhpX77n6LjHfF6xJjrw22lJmw_PdZZz2aDH1pyEV-ExkBrehyov8e52zAPiEBcDGLU9PjsRxhRAox5fST7B/s1600/menu-search.gif") no-repeat scroll 5% 50% transparent;
    border: 1px solid #CCCCCC;
    border-radius: 3px 3px 3px 3px;
    box-shadow: 0 1px 0 rgba(0, 0, 0, 0.05) inset, 0 1px 0 #FFFFFF;
    height: 26px;
    padding: 0 25px;
    position: relative;
    width: 130px;
}
#menu-search form:hover {
    background-color: #F9F9F9;
}
#menu-search form input {
    color: #999999;
    font-size: 13px;
    height: 26px;
    text-shadow: 0 1px 0 #FFFFFF;
    background: none repeat scroll 0 0 transparent;
    border: medium none;
    float: left;
    outline: medium none;
    padding: 0;
    width: 100%;
}
#menu-search form input.placeholder, #menu-search form input:-moz-placeholder {
    color: #C4C4C4;
}
Step 5. Click on the Save template button to save the changes... and you're done! ;)

I hope you like this CSS3 dropdown menu and if you enjoyed this tutorial, please share and subscribe.

Comments

  1. Bàn học
    Bàn học đẹp
    Giường tầng
    Giường tầng thông minh
    bàn học trẻ em


    Hotline: +84963248155
    Email: noithatbaoankids@gmail.com
    Địa chỉ: 100 LaCasta, KĐT Mới Văn Phú, Hà Đông, Hà Nội
    Trụ sở: Cầu Z, Tốt Động, Chương Mỹ, Hà Nội
    Nhà máy: Tốt Động, Chương Mỹ, Hà Nội

    ReplyDelete
  2. máy tính để bàn
    màn hình máy tính
    màn hình máy tính giá rẻ

    CÔNG TY TNHH ĐẦU TƯ CÔNG NGHỆ MÁY TÍNH NGỌC TUYỀN
    MST: 0108800562 - Đăng ký & quản lý bởi Chi cục thuế Hà Nội
    Đ/C: Số 295 Vũ Tông Phan, Khương Đình, Thanh Xuân, Hà Nội
    Hotline: 097 123 7999 - 0939 72 5555
    Email: ngoctuyencomputer68@gmail.com
    Web: www.ngoctuyenpc.com

    ReplyDelete

Post a Comment

All types of Comments are welcome

Popular posts from this blog

SEO Traffic v2.0.20041213

DOWNLOAD SEO Traffic v2.0.20041213 simplifies the process of generating search-optimized web pages by automatically creating a large number of them using premium keywords from Overture, Google, and Espotting. Instead of spending countless hours meticulously crafting keyword-optimized pages, why not let SEOT do it for you, completely free of charge? This tool offers the perfect balance of flexibility for professionals and simplicity for beginners. Say goodbye to manual labor and let SEOT Traffic handle your page creation effortlessly.

Understanding Online Work From Home Businesses

Millions of people are searching the internet daily to try and find the right opportunity to start a business at home making money online . Don't believe me?; just go to your favorite search engine and search for phrases like ' work from home ', ' work at home ', ' online businesses ' and things about working from home . You will see thousands of website choices in the results. If using Google.com you will see on the right panel lists of websites under the heading 'Sponsored Links'. Sponsored links are paid for on google by using a tool or website at www.adwords.com . Many marketers are paying a lot of money to advertise this way and rookies need to be careful as the costs can get out of hand. Sponsored links are a good indication of what the competition is doing and also of the viability of the product. The most popular method of making money online is through affiliate marketing. What this means is that you can become an a

What are the revenue sources?

There are two basic sources of income your website will have: Affiliate Marketing and Google Adsense. How you will get paid and from who? Income from Affiliate Marketing Companies that offer affiliate programs pay those who promote them in two ways. In the first case, upon the sale which comes from your affiliate link, your  commission automatically goes to your paypal account.  For example, if through the affiliate link one buys a book priced 20 USD and the commission is set at 25%, then, at the time of sale, you recieve in your Paypal account USD 5 and the remaining 15 goes to the owner's Paypal account . In the second case,  the payments are made after a short time . For example, the company "Commision Junction" manages the affiliate programs of thousands of companies. Among them are : TOSHIBA, HP, YAHOO, LEXMARK, DELL … So when someone promotes products of these companies and qualifies a commission, then periodically, o nce or twice a month , the company &q

Search Marketing Tips For Yandex, Russia’s Top Search Engine

Globally, Russia is the eighth largest market of Internet users, and as we know, Google is playing second fiddle to Yandex , which is currently the main search engine in Russia with well over half of the market share. Yandex makes hundreds of millions of dollars in revenue and provides a broad range of online services (email, free hosting, PPC advertising network (Yandex Direct), maps, news, weather, and dictionaries). Comscore ranked the web property first in Russia with 34.9 million unique visitors in August 2010 , It is also the 25th site in the Alexa Top 100. What’s more, Yandex is the default search provider in the Russian version of Firefox. Russian Language In Connection With SEO If your company is turning eyes to the Russian market, you might be considering  making a Russian-language version of your website to attract more local customers. You could have built your SEO strategy based on your experience in the English-speaking Internet, but if you’re building

GOMO: Create a Professional Mobile Site to your Blog & Website for Free

Some report says By 2013 more people will use their mobile phones than PCs to get online. 80% of mobile internet users abandon a site if they have a bad user experience. Mobile sites are designed for the small screen, with the needs of mobile users in mind. A mobile-friendly site can help your blog growth and connect with customers and increase sales. But a bad mobile experience can drive your customers to your competition. GOMO (Google Mobile)  partner with Duda mobile providing online tool to make your desktop website more mobile friendly with professional templates and free hosting. Duda mobile premium service free for one year(value $108) with unlimited email and phone support. How to: Step 1: Go to GOMO site through this link  www.howtogomo.com .  Then Enter your site URL in the specific column like below image. Then hit MAKE MY SITE MOBILE button.  Step 2: It redirects theme window, s elect your site theme from their. You can f

WORK AT HOME & MAKE EASY MONEY

Assuming that you've worked at an office five days (or more) for every week for more drawn out than a few years, its likely you fantasize about telecommuting. Perhaps you recently do telecommute infrequently, however are finding it hard to stay centered. I'm here to separate it into the most significant fundamentals for kicking off effectively. As a full-time independent author who recently passed her two-year commemoration, I've absolutely had my ups and downs regarding the matter of renouncing office (however not dependably weekend) warrior status. Gain experience from my accidents, go onward and flourish! Who, Who, Who Are You? Telecommuting isn't for every living soul. I don't say this to sound unrivaled or selective, daiquiri ice enhanced dessert isn't for everybody either. Whether its set to truly work for you is all about how you like to use your day, and your capacity to autonomously supervise your time. You may as well inquire as to whether you sup

5 Money Making, Recession Resistant Home Businesses

Ideas for Starting a Successful Business in a Down Economy In a recession, or in other times when the economy is lagging and jobs are being lost, most people consider it to be a very poor time to start thinking about starting a home business. However, tough economic times can also present great money making opportunities to those who prepare and are willing to take a chance on being successful. Starting a home business in the midst of a recession may seem scary, but not having a backup plan in case you should suddenly lose your job can be even more scary. Here are 5 relatively recession resistant, money making home business ideas to consider. 1. Internet Marketing Services Internet marketing services are in high demand in an industry that is growing by leaps and bounds. Anyone who has an online business presence needs to know how best to effectively market their website on the Internet and most will consult an Internet marketing firm for assistance. That&#

STRATEGIES TO INCREASE WEB TRAFFIC

Site improvement ( SEO ) system and best practices change always as web crawlers like Google press on to take off new calculation overhauls, for example Panda and Penguin. The effect is that marks and advertisers can no more extended take alternate ways. It's all about building trust and driving quality site activity that will effect the end result. This originates from enhancing navigate rates for natural list items, which is the place the underutilized capacity of rich pieces becomes an integral factor. A rich scrap is basically only a minor outline of the information that a client can hope to see on a web site page. Rich pieces have no immediate impact on enhancing rankings, however they add huge worth to a natural posting in the web search tool results and can incredibly expand site activity. They can come in the manifestation of Google creator qualified data, appraisals and surveys, occasion notices and items. Rich pieces enhance navigate rates breathtakingly by en

10 Important Tips To Increase Fans On Your Facebook Page

The first direct marketing tool that one can think of today is Facebook. It’s gone from being just another social network, to being ‘The social network’. No just that, it’s now great medium for business. Simply speaking, this is because facebook is where people are. And if they are there, why not get them to notice who you are and what you do? These virtual profiles belong to real people, with real needs. So, here’s some quick ways to increase the number of fans on your business page: 1. Cater To Your Target Group The first rule is to know and target the people who could be interested in your products or services. So, everything you do should be for the people who will actually be your clients. 2. Start Activities Once you have your TG in mind and you obviously know all the plusses of your products, so start activities promoting the same. You need to start interacting or creating activities that people enjoy and like to participate in. A way to encourage part