Announcement:

  Hello, We Are Now Designing Blogger Awesome Template. Check Out At Netzspot.Blogspot.
Showing posts with label Website Navigation Bar. Show all posts
Showing posts with label Website Navigation Bar. Show all posts

Friday, March 7, 2014

Stylish Double Style Animated Vertical Menu Bar For Blog And Website

Stylish Double Style Animated Vertical Menu Bar For Blog And Website

As you have seen many stylish horizontal menu bar that we also have shared but this time we are with a vertical menu bar for websites or blogs with animation effect on hover. This menu bar is purely made by HTML-CSS without any JavaScript or jquery. This menu bar work awesome in all major browsers and can be edited fully according to your desire or your theme style.

This menu bar actually contain two text on a single link. One is a short link name and other is a link description that will be visible on the menu place on hover that look more awesome in animation. Here is our preface so now check out our live DEMO in the below link and check out the other features list then garb the code and add it in your blog or website.

Features:

1.) Awesome And Stylish Design.
2.) Pure HTML And CSS.
3.) No JavaScript Or JQuery.
4.) Quick To Load And Easy To Install.
5.) SEO Supported UL LI Coded.
6.) Vertical Design Menu Bar.
7.) Unlimited Link Can Be Added.
8.) Fully Customizable.
9.) Short And Easy Coded.
10.)Animate On Hover.
11.) Will Show Link Desc On Hover On The Same Place.
12.) Change The Second Text On Hover In Animation.

How To Add In Blogspot?

1.) Go To Your www.blogger.com
2.) Open Your Desire "Blog".
3.) Go To "Layout".
4.) Click "Add A Gadget" Where You Want To Add It.
5.) Now Scroll To "HTML-JAVASCRIPT"
6.) Click "+" Icon To Add It.
7.) Now Copy The Below Code And Paste It To There.
8.) Leave The Title Empty.
9.) Click "Save", Now You Are Done.
OR
1.) Go To Your www.blogger.com
2.) Open Your Desire "Blog".
3.) Go To "Template".
4.) Click "Edit HTML".
5.) Now Click Within Code Box.
6.) Press [CTRL+F] To Search </head> Code.
7.) Now Copy The Below Code And Paste It Anywhere After </head> Code Where You Want It.
8.) Click "Save Template" And Done.

How To Add In Website?

1.) Just Go To Your "HTML" File.
2.) Now Copy The Below Code And Paste It Between "<body> </body>".
3.) "Save" It, Now You Are Done.

<style type='text/css'>
/*-----------------------------------------------
Developer: EXEIdeas
Source: www.exeideas.com
Created Date: Friday, Mar 07, 2014
License: Copyright, EXEIdeas. All Rights Reserved. This Menu bar is licensed under DMCA and CreativeCommon3.0. If anyone found to copy or clone it will be under DMCA legal notice. You are free to use it with creator HTML comment.
----------------------------------------------- */
#exe_double_menu {width:225px;overflow:hidden;margin:0 auto;}
#exe_double_menu ul {list-style-type:none;text-align:center;margin:0;padding:0;}
#exe_double_menu ul li {margin:0;padding:0;line-height:40px;width:450px;height:40px;font-size:1em;text-transform:uppercase;letter-spacing:1px;font-weight:200;}
#exe_double_menu ul li .exe_double_menu_before_hover {position:relative;width:225px;float:left;display:inline;transition:all 0.3s ease;color:#000;background:#66bb44;}
#exe_double_menu ul li .exe_double_menu_after_hover {position:relative;width:225px;float:left;display:inline;left:225px;transition:all 0.3s ease;color:#ffffff;background:#161916;}
#exe_double_menu ul li:hover .exe_double_menu_before_hover{left:-225px;}
#exe_double_menu ul li:hover .exe_double_menu_after_hover{left:-225px;}
</style>
<nav id="exe_double_menu">
<ul>
<a href="##########" title=""><li><span class="exe_double_menu_before_hover">Home</span><span class="exe_double_menu_after_hover">Go To Home</span></li></a>
<a href="##########" title=""><li><span class="exe_double_menu_before_hover">About</span><span class="exe_double_menu_after_hover">Know About Me</span></li></a>
<a href="##########" title=""><li><span class="exe_double_menu_before_hover">Work</span><span class="exe_double_menu_after_hover">See My Work</span></li></a>
<a href="##########" title=""><li><span class="exe_double_menu_before_hover">Services</span><span class="exe_double_menu_after_hover">Will Provide You</span></li></a>
<a href="##########" title=""><li><span class="exe_double_menu_before_hover">Contact</span><span class="exe_double_menu_after_hover">Ask Me Anything</span></li></a>
</ul>
</nav>

Customization:

1.) Change All Blue Hashes With Your Desired Links.
2.) Change All Red Text With Your Main Link Name.
3.) Change All Pink Text With Your Link Desc Or Other Text.

Last Words:

As you know that what we have we share so this is what we have now. If you like it then share it and use it, If you still have any quires then feel free to ask me in comments or contact form. Don't forget to leave your feedback in comments.
Read More ...

Saturday, December 28, 2013

Stylish Pure CSS Multi-Colour Menu Bar For Blog And Website

Stylish Pure CSS Multi-Colour Menu Bar For Blog And Website

As everyone want to make his blog more awesome as it is and want to give it a premium look so here we are also working on it to share some awesome widgets that can help you to make your blog more awesome. So this time here we are with a stylish coloured menu bar that will show different colour on each menu item and on hove will give you a sliding effect that will make it more attractive.

So as our all widgets have awesome features so this time its also have a list of best listed features so without any more preface, have a look on live DEMO then check out our list of features then proceed to the code that is easy to add and customize with full features and function.
Read More ...

Thursday, September 5, 2013

Awesome CSS Mega DropDown Menu With Links And Thumbnail

Awesome CSS Mega Drop Down Menu With Links And Thumbnail

Mega Drop Down Menu has been a growing trend in web design. For sites that involve a lot of pages and/or products, this type of menu may able to improve user experience and usability of the entire website. Typically, a mega menu contains product images, brief description, navigation items. As a result, mega menu is famous in e-commence websites and you will notice it in the following design showcase.

The amount of content displayed on today’s popular websites and online news sources is staggering. Web design experts have been struggling to find the best ways of organizing all those articles, pages and posts in a way that would not make the site seem overcrowded and bloated. Starting pages pose the biggest problem, because they have to reflect the overall concept of the site without turning off visitors with walls of text or a rainbow of colorful pictures that seem to jump out from the screen. Fortunately, the problem is about to be solved by CSS mega menus.
Read More ...

Sunday, April 21, 2013

Awesome CSS Fan-Shout Web-Bar For Blog And Website

Awesome CSS Fan-Shout Web-Bar For Blog And Website

Nice to see your here again, After a great time, i am again here with a new Web-Bar that is based upon CSS. After me previous post of Free CSS Hello Bar, the new one is here with new ghraphics and changing of position with a cool style. Many guy's want this to see his news on his blog but tirent of Sticky Simple Bars and want something new so here it is for him.
Read More ...

Sunday, February 24, 2013

HTML-CSS Stylish Page Navigation Bar For Blog & Website

HTML-CSS Stylish Page Navigation Bar For Blog & Website

Here We Have Simple But Stylish Pure HTML-CSS-Kit Cool Color Hover With Curve Corner Links Page Navigation Bar Having jQuery Effect Without JAVASCRIPT/jQuery File Or Code. We are comeback with another simple Navigation menu made up of CSS3 with additional effects using CSS3 Transition property. CSS Transitions make, powerful effect without the use of JavaScript for many common effects. Sometimes you want to add an additional navigational bar on to your website or blog, but many template and themes only support one menu. In my case the SEO hatch blog has a vertical menu which we use for our post categories, but I wanted to add a small additional menu for consulting inquiries without cluttering the main menu. This menu perfectly work only on some browser such as Chrome, Firefox, and Safari. Here we using simple CSS only.

Read More ...

Tuesday, February 5, 2013

MultiLevel DropDown Floating Menu WithOut J-Query (Only HTML-CSS)

Hello again, it’s time for widget article. Here you’ll find pure CSS based drop-down multi level menu with down loadable files and explanations as well. My favorite here is the first pick – Outside the box with very unique navigation menu. It’s always good to have such reference articles in your bookmarks and when you have to create some really big website with a lot of content and menu sections – just return here. Shorten your developing process with already premade menus, which can be easily modified with little touch of CSS.

MultiLevel DropDown Floating Menu WithOut J-Query (Only HTML-CSS)
Preview

I’ve had a few requests from readers asking how to install a drop-down menu without j-query due to heavy load. So here it is, a multi level dropdown/fly-out menu. The original code is from CSS Play. I modified the CSS part a little to adapt to Blogger template. This four level drop-down/fly-out menu should work in most browsers. A tab with small caps indicates it has upper level/levels. A drop-down/fly-out will appear when you hover the tab. First Have A Look On Image Or See The Demo By The Given Link.


Read More ...

Monday, January 28, 2013

Animated Stylish CSS Navigation Menu For Blog And Website

Animated Stylish CSS Navigation Menu For Blog And Website

This is called CSS Spotlight Menu and idea and code provided by Dynamic Drive. I just update some code and share this in easy step here. Spotlight Menu takes advantage of CSS3's border-radius property and transitions to add a circular background to its menu items when the mouse rolls over each one. The result is a Flash-like, sleek spotlight menu! The circular background appears in all major browsers, including IE9, while the transition effect works in browsers that support CSS3 transitions, namely, FF3.5+, Safari 3.1+, Google Chrome, and Opera 11.6+.
Read More ...

Tuesday, January 22, 2013

Stylish HTML-CSS Drop Down Menu For Blog & Website

Stylish HTML-CSS Drop Down Menu For Blog & Website
You can find a lot of different menu styles on the web today. Similarly designers and developers are often more than happy to share their techniques with the world. And through these tutorials new designers can learn about trends and how to build websites semantically.Today, I am Going to posting a article about how to add css Horizontal drop down Menu with sub menu for blogger blog. if you are using blogger platform blog and if you want to add sub-menu for each category this are not available from blogger by default templates. So you can add this hovering Menu which are good and attractive black color.
Read More ...

Sunday, January 13, 2013

Stylish Hover HTML-CSS Text Menu With Images On It

Stylish Hover HTML-CSS Text Menu With Images On It

Many of my friends are asking about this that he want something like this to make them site stylish, Today i think he will be happy and also i am.So with out any loss of time first see the demo then use our simple coding.As we know "That An Image Is Much Better Then Thousand Words." so put some images on your menu bar to describe him in gentle way.One of the most important gadget in blog is navigation menu. Navigation menu help to you access your blog category pages, and your blog readers can easy to access your category pages.
Read More ...

Friday, December 21, 2012

Awesome & Cute Multi-Level DropDown Menu Bar For Blog And Website

Awesome & Cute Multi-Level DropDown Menu Bar For Blog And Website

It is always fun to learn and explore the new standards introduced for CSS. With growing development in HTML5 and CSS3, heavy scripts and flash tools are pushed back. This Mac-like multi-level drop down menu that we will learn to create and how to add it to Blogger is solely based on Pure CSS3 with no jquery used at all! It uses simple box-shadow, text-shadow and border-radius properties.
Read More ...

Saturday, April 14, 2012

Stylish Colorful Hover Style Page Navigation Menu For Blog And Website

One of the most important gadget in blog is navigation menu. Navigation menu help to you access your blog category pages, and your blog readers can easy to access your category pages. So now we going to show you how to add stylish animated navigation menu to blogger/blogspot. This navigation menu make your blog attractive and stylish blog.

Stylish Colorful Hover Style Page Navigation Menu For Blog And Website



Features:
1.) Green Menu Bar With Orange Hover.
2.) Only HTML-CSS.
3.) Simple, Stylish, Easy To Use And Quick Load.

Read More ...

Wednesday, April 11, 2012

Stylish Hover Page Navigation Menu For Blog & Website

One of the most important gadget in blog is navigation menu. Navigation menu help to you access your blog category pages, and your blog readers can easy to access your category pages. So now we going to show you how to add stylish animated navigation menu to blogger/blogspot. This navigation menu make your blog attractive and stylish blog.

Stylish Hover Page Navigation Menu For Blog & Website





Features:
1.) Simple And Very Easy To Install.
2.) Menu With Hover And Awesome Look.
3.) Easy To Add Links And Use.
4.) No J-Query File.
5.) Speed Loading Time.


How To Add In Blogspot?
1.) Go To Your www.blogger.com
2.) Open Your Desire Blog.
3.) Go To Layout.
4.) Click "Add A Gadget" Where You Want To Add It.
5.) Now Scroll To "HTML-JAVASCRIPT"
6.) Click "+" Icon To Add It.
7.) Now Copy The Below Code And Paste It To There.
8.) Leave The Title Empty.
9.) Click Save, Now You Are Done.


How To Add In Website?
1.) Just Go To Your HTML File.
2.) Now Copy The Below Code And Paste It Between <body> </body>.
3.) Save It, Now You Are Done.


<style>
#exenav-left{float:left; display:inline; width:100%; padding-left:2px; padding-top:5px}
#exenav{clear:both; margin:0 auto}
#exenav ul{position:relative; overflow:hidden; padding:0; margin:0; font-family:Arial,Helvetica,sans-serif; font-weight:bold; font-size:12px}
#exenav li{cursor:pointer; float:left; margin:0 1px 0 0; padding:0 1px 0 0; height:40px; display:inline;}
#exenav ul li a, #exenav ul li a:visited{text-decoration:none;border:0px solid #000000; margin:0 1px 0 0; float:left; padding:8px 9px; color:#fff; font-weight:bold; font-size:12px;margin-top:-2px; background:#333333; border-radius:4px 4px; -moz-border-radius:4px 4px 0 0; -khtml-border-radius:4px 4px 0 0; -webkit-border-radius:4px 4px 0 0; border-radius:4px 4px 0 0}
#exenav ul li a:hover{border:2px solid #111; background:#3399FF top left repeat-x; border-radius:8px 8px; -moz-border-radius:8px 8px 8px 8px; -khtml-border-radius:8px 8px 8px 8px; -webkit-border-radius:8px 8px 8px 8px; border-radius:8px 8px 8px 8px}
#exenav ul li a.current, #exenav ul li a.current:visited,
a:hover {text-decoration:none;} a img {border-width:0;}
#hb{height:40px;margin-bottom:10px; margin-top:50px; background:#333333; border-radius:8px 8px; -moz-border-radius:8px 8px 8px 8px; -khtml-border-radius:8px 8px 8px 8px; -webkit-border-radius:8px 8px 8px 8px; border-radius:8px 8px 8px 8px}
#exenav-element{width:100%; margin-top:-24px; padding:0}
</style>
<div id='hb'>
<div id='exenav-element'>
<div id='exenav-left'>
<div id='exenav'>
<ul>
<li><a href='########## '>HOME</a></li>
<li><a href='##########'>Portfolio</a></li>
<li><a href='##########'>News</a></li>
<li><a href='##########'>Blog</a></li>
<li><a href='########## '>About</a></li>
<li><a href='##########'>Contact</a></li>
</ul>
</div>
</div>
</div>
</div>



Customization:
1.) Change All Red With Your Text.
2.) Change All Blue With Your Links.
3.) Done.
Read More ...