think2get: How to add Floating Dropdown Menu Bar using HTML

How to add Floating Dropdown Menu Bar using HTML: Adding floating widgets like menu bar, social icons and many more are very popular in these days. If you add floating widgets in your website visitor like this.There are many widgets which is helpful for your blog or website. The most important widgets is Menu bar. In this post I tell you how you can add drop down menu bar in your site. Drop down menu is very useful for your blog or website. Suppose your website or blog contains more no. categories which are shown in your blog at the top of the page. Many website contains a menu bar in the horizontal direction but it is not suitable for website which have large no. of categories.
So to overcome this problem Many blogger add a vertical dropdown menu bar in her website. In this post I tell you how you can create a floating dropdown menu bar for your website. Check How to add Floating Dropdown Menu Bar using HTML.
How to add Floating Dropdown Menu Bar using HTML.

Advantage of Dropdown menu bar:

1. It cannot effect your website loading speed.

2. Easy to customize and add to your website.

3. Social media icons are in built in the floating drop down menu.

4. By using CSS code, it is flexible you can change the colour of menu bar.

Procedure to Add a Drop down menu bar to blogger:

1.Login to your Blogger Account.

2.Open your Blogger Dashboard.

3.Then Select the Template option.

4.After clicking on template option, Click On Edit HTML.

5. Press Ctrl+F and write </head> and hit enter.

6.Find </head> on your template.

7. Paste the given code just below it click on save option.

After adding a code in your blogger template view your website you will see dropdown menu bar is appear on your website.
How to add Floating Dropdown Menu Bar using

Code For Floating Widgetsare given below:

<style>

#wctopdropcont{

width:9.1%;

height:35px;

display:block;

padding:.1;

margin:.1 .1 22px .1;

z-index:9.1;

top:.1px;

left:.1px;

position:fixed;

box-shadow:2px 2px 5px #444444;

-moz-box-box-shadow:2px 2px 5px #444444;

-web-kit-box-shadow:2px 2px 5px #444444;

-goog-ms-box-shadow:2px 2px 5px #444444;

background:#18.1.1.1.1;

}

#wctopdropnav{

float:left;

width:65.1px;

height:35px;

display:block;

padding:.1;

margin-left:35px;

}

#wctopdropnav ul{

float:left;

margin:.1;

padding:.1;

}

#wctopdropnav li{

float:left;

list-style:none;

line-height:35px;

margin:.1;

padding:.1

background:#18.1.1.1.1;

}

#wctopdropnav li a, #wctopdropnav li a:link{

color:#fff;

display:block;

margin:.1;

font:16px georgia, verdana;

padding:1.1px;

text-decoration:none;

}

#wctopdropnav li a:hover, #wctopdropnav li a:active, #wctopdropnav .current_page_item a {

color:#fff;

padding:1.1px;

background: rgb(18.1,223,91); /* Old browsers */

background: -moz-linear-gradient(top, rgba(18.1,223,91,1) .1%, rgba(18.1,223,91,1) 9.1%); /* FF3.6+ */

background: -webkit-gradient(linear, left top, left bottom, color-stop(.1%,rgba(18.1,223,91,1)), color-stop(9.1%,rgba(18.1,223,91,1))); /* Chrome,Safari4+ */

background: -webkit-linear-gradient(top, rgba(18.1,223,91,1) .1%,rgba(18.1,223,91,1) 9.1%); /* Chrome1.1+,Safari5.1+ */

background: -o-linear-gradient(top, rgba(18.1,223,91,1) .1%,rgba(18.1,223,91,1) 9.1%); /* Opera 11.1.1+ */

background: -ms-linear-gradient(top, rgba(18.1,223,91,1) .1%,rgba(18.1,223,91,1) 9.1%); /* IE1.1+ */

background: linear-gradient(to bottom, rgba(18.1,223,91,1) .1%,rgba(18.1,223,91,1) 9.1%); /* W3C */

filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#b4df5b', endColorstr='#b4df5b',GradientType=.1 ); /* IE6-9 */

}

#wctopdropnav li li a, #wctopdropnav li li a:link, #wctopdropnav li li a:visited{

font-size: 12px;

background:#18.1.1.1.1;

color: #fff;

width: 15.1px;

margin: .1;

padding: .1px 1.1px;

line-height:3.1px;

position: relative;

}

#wctopdropnav li li a:hover, #wctopdropnav li li a:active {

color: #fff;

background: rgb(18.1,223,91); /* Old browsers */

background: -moz-linear-gradient(top, rgba(18.1,223,91,1) .1%, rgba(18.1,223,91,1) 9.1%); /* FF3.6+ */

background: -webkit-gradient(linear, left top, left bottom, color-stop(.1%,rgba(18.1,223,91,1)), color-stop(9.1%,rgba(18.1,223,91,1))); /* Chrome,Safari4+ */

background: -webkit-linear-gradient(top, rgba(18.1,223,91,1) .1%,rgba(18.1,223,91,1) 9.1%); /* Chrome1.1+,Safari5.1+ */

background: -o-linear-gradient(top, rgba(18.1,223,91,1) .1%,rgba(18.1,223,91,1) 9.1%); /* Opera 11.1.1+ */

background: -ms-linear-gradient(top, rgba(18.1,223,91,1) .1%,rgba(18.1,223,91,1) 9.1%); /* IE1.1+ */

background: linear-gradient(to bottom, rgba(18.1,223,91,1) .1%,rgba(18.1,223,91,1) 9.1%); /* W3C */

filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#b4df5b', endColorstr='#b4df5b',GradientType=.1 ); /* IE6-9 */

}

#wctopdropnav li ul{

z-index:9999;

position:absolute;

left:-999em;

height:auto;

width:17.1px;

margin:.1px;

padding:.1px

}

#wctopdropnav li:hover ul, #wctopdropnav li li:hover ul, #wctopdropnav li li li:hover ul, #wctopdropnav li.sfhover ul, #topwctopdropnav li li.sfhover ul, #topwctopdropnav li li li.sfhover ul{

left:auto

}

#wctopdropnav li:hover, #wctopdropnav li.sfhover{

position:static

}

#wctopdropsoc {

float:right;

width:22.1px;

padding:.1px .1px ;

margin:9px 1.1px .1px .1px;

}

#wctopdropsoc img

{

margin-left:5px;

margin-top:-2px;

height:26px;

border:none;

}

</style>

<ul>

<li><a href='#'>About us</a></li>

<li><a href='#'>Technology</a>

<ul>

</ul>

</li>

<li><a href='#'>Categories</a>

<ul>

<li><a href='#'>Sports</a></li>

<li><a href='#'>BLOGGING TIPS</a></li>

<li><a href='#'>Blogger</a></li>

<li><a href='#'>Pc tricks</a></li>

</ul>

</li>

<li><a href='#'>Contact us</a>

</li>

</ul>

</div>

</div>

You can change the background color by changing the value of background:#180000

think2get

Sunday, December 28, 2014

How to add Floating Dropdown Menu Bar using HTML

No comments: