Blog

Skype like horizontal menu

Hello friends,

Do you Like Skype and its simple and clean interface or Navigation bar? if yes

Then it’s  your time to see the demo or  download Skype menu with four color scheme (blue, red, green and grey) totally Free.

In this post i am sharing a Four color scheme  Skype cool Navigation bar (Menu) because I always like Skype and its simple and clean interface cool Navigation  bar (menu) and best color scheme. You just see the Demo or  download the source code and experiment it.

This tutorial explains how to build a horizontal menu Skype-like using on CSS only.

You can build a Skype rounded navigation menu, with sprite image  and no Javascript, and effectively make use of the new CSS3 properties border-radius and animation.

This menu works perfectly well with Firefox, Opera, Chrome and Safari. The dropdown also works on non-CSS3 compitable browsers such as IE7+, but the rounded corners and shadow will not be rendered. CSS3 transitions could one day replace all the fancy jQuery animation tricks people use.

Why we used CSS on Navigations?

CSS can be used to style unordered lists and turn then into stylish, professional menus that would enhance the look of any website.

CSS Navigations are search engine friendly, they will allow search engines to easily navigate and spider your pages. They are easy to setup, even easier to update and will work even when javascript is turned off.

Skype Menu Features

————————————————————————————–
No Javascript is required
Works in browsers with disabled Javascript or if a browser has no Javascript support at all.

Cool CSS3 properties
Multi-level dropdown menu is created using CSS3 rounded corners, CSS3 shadow (box-shadow and text-shadow).
Opacity, backround and font colors,linear gradient and radial CSS3 gradient are also supported.

Multicolumn submenus
Create multicolumn submenus. Specify the number of rows you want to have.

SEO friendly
Search engines and text-only browsers friendly.

100% CSS-driven designs
The menu is based on HTML list of links (UL/LI structure) and CSS only. No additional non-css params are used.

Small size
Immediate loading of the menu. Doesn’t use additional files.

Browser support
Supports all modern browsers.

Best GUI interface
This  menus no need to complex hand coding.  See the demo of menu design while you are developing and customizing.

Click the links below to download zip files of the menu. Note that these menus are styled for use with standards compliant doctypes and that you will need to ensure the stylesheet paths are correct for any image used.

This sample demonstrates a menu with a simple clean style.

Free Download this sample

You can download the complete example or just see the configuration file and the images used for it.

Skype Menu Files added:

1) with 4 color scheme (Blue, Red, Green, Grey)

2) CSS Only

3) No JavaScript Needed

4) Sprite Image used.

Demo Skype Menu Example
Download Source code

Random Posts

Steve

About Steve

I live in Waterloo, Ontario, and work at a large technology company in the area. In my free time, I enjoy learning about computer science and creating interesting web applications.

Subscribe

Even if you don't visit my site on a regular basis, you can get the latest posts delivered to you for free via RSS or Email:

29 Awesome Comments So Far

Don't be a stranger, join the discussion by leaving your own comment
  1. Denis
    December 30, 2010 at 5:46 am #

    Very useful
    excellent tutorial, thx!

  2. Nitos
    December 30, 2010 at 5:48 am #

    awesome tutorial thx!!!

  3. Hikari
    December 30, 2010 at 5:49 am #

    that’s a nice menu, tnx for sharing!

  4. fei
    December 30, 2010 at 5:51 am #

    Hi Steve,
    Thanks alot for this post. You’ve done a wonderful job.

  5. Max dub
    December 30, 2010 at 5:52 am #

    Hi,
    great work. But what i want to know is – can i make more than one submenu? May i need a sub nmenu under a sub menu.
    example:
    top
    –> sub1
    —> sub2
    Thanks and best regards,
    Max

  6. Sarah Mark
    December 30, 2010 at 5:54 am #

    Nice work,

    i have used this one of my projects and work fine…

    Thanks once again

  7. Mobile Phone Seeker
    December 30, 2010 at 4:26 pm #

    Can I use this in my website, Is it free to use?

    James
    http://www.mobilephoneseeker.co.uk

  8. Leanna
    December 30, 2010 at 11:54 pm #

    woh I am glad to find this website through google.

  9. Link Building Services
    December 31, 2010 at 10:58 am #

    Great blog!! You should start many more. I love all the info provided. I will stay tuned :)

  10. Clementine
    January 2, 2011 at 5:15 am #

    Probably accept that which you explained. Your main description was certainly the easiest to fully grasp. I say to you, I almost always get irked any time people discuss trouble that they obviously are not aware of about. You managed to hit the nail at the head and furthermore pronounced out all kinds of things while not problem. , people can take a signal. Will likely be back to get more. Thanks

  11. Kaitabasura
    January 2, 2011 at 7:03 am #

    Wonderful – I require to say, impressed with your site. I had no trouble navigating through all the tabs combined with knowledge was enormously fairly simple to access. I find what I wished for rapidly all the way. Sexy fantastic. Could appreciate it in case you add user discussion forums something like that, you may also a great way for your clients to interact. Incredible work..

  12. Armandina Wen
    January 3, 2011 at 12:06 am #

    Very Nice website. I recently built mine and i was looking for some ideas and your website gave me some. Did you develop the website alone?

    Thanks

  13. Adaline Kunert
    January 3, 2011 at 5:02 am #

    I have developed a blog and I am trying to find a new template.Yours looks pretty decent! You could visit my website and tell me your opinion!

  14. Aurelio Ebener
    January 3, 2011 at 10:06 am #

    hi, thank you for posting this. I understand your point of view and I see where you’re coming from on this. thanks again!

  15. Wilford Epping
    January 3, 2011 at 9:41 pm #

    In contrast to the mainstream concepts, I’ve to disagree with you, as there are just so many different factors to consider. Effectively if you’re open for hyperlink alternate, perhaps we should keep up a correspondence with one another, in order that we will construct a better blog together. What do you think?

  16. Jose Poisson
    January 4, 2011 at 6:08 pm #

    I was very pleased to find this blog. I want to thank you for this woderful post: Skype like horizontal menu .it is very convenient to buy wow gold here,I really like your website, I have stored it. Hope that you will go on with good work, your post is very absorbing. I hope you have a nice day!

  17. cp cheats
    January 5, 2011 at 1:16 am #

    Interesting, tech stuff is crazy these days!

  18. Simyo Gutscheine
    January 5, 2011 at 8:03 pm #

    is it possible to use that sky soft with maluch?

  19. Luke Appleberry
    January 6, 2011 at 8:55 pm #

    Good read. I saved the page for future visit.

  20. Ümit
    January 7, 2011 at 5:24 pm #

    Really great work!

    But how can I implement this into a wordpress page???

  21. Backlinks
    January 8, 2011 at 8:55 pm #

    Wow, amazing blog layout! How long have you been blogging for? you make blogging look easy.

  22. Clayton Mekeel
    January 9, 2011 at 12:08 am #

    Youre so cool! I dont suppose Ive read something like this before. So good to search out any person with some unique thoughts on this subject. realy thanks for starting this up. this website is something that’s needed on the internet, someone with a bit originality. useful job for bringing one thing new to the web!

  23. Solar Panel Homes
    January 17, 2011 at 7:07 am #

    We are a group of volunteers and starting a new initiative in a community. Your blog provided us valuable information to work on.You have done a marvellous job!

  24. delonte's carpet cleaning
    March 17, 2011 at 10:16 am #

    found your site on del.icio.us today and really liked it.. i bookmarked it and will be back to check it out some more later

  25. chaseonline
    January 13, 2012 at 8:35 pm #

    Skype like horizontal menu | UX Revisions. Great Skype like horizontal menu | UX Revisions opinion.

Trackbacks/Pingbacks

  1. Skype like CSS Menu Example - December 29, 2010

    [...] Original Source Code Demo: UXRevisions.com [...]

  2. Make a menu like Skype - Free Download - December 29, 2010

    [...] just see the Demo or  download the source code and experiment [...]

  3. Tweets that mention Skype like horizontal menu | UX Revisions -- Topsy.com - December 29, 2010

    [...] This post was mentioned on Twitter by jon. jon said: Skype like horizontal menu: Hello friends, Do you Like Skype and its simple and clean… http://goo.gl/fb/ZI3aq [...]

Leave a Comment

Remember to play nicely folks, nobody likes a troll.