Oct
Tabbed search bar using CSS and Javascript
By: Mark Dijkstra In: CSS Forms Javascript Tutorials
Some lines of JavaScript code can help you to add nice effects to improve some features of your websites.
Hello you, if you are new here, you might want to subscribe to our RSS feed for updates on this article and our site.
x
This tutorial explains how to implement a simple tabbed search bar using CSS and a javascript function which set “active” the selected tab and changes the value of an hidden element to set search options and execute your search only for all items related to the selected topic (for example: web, images, videos…).
See a demo here
Related Posts
Keep reading with more great articles!
More Categories
- Adobe AIR
- Advertisement
- AJAX
- Analytics
- Animations
- Announcement
- API
- Bookmark
- Brouwser
- Calendar
- Charts
- CMS
- CSS
- Design
- Desktop
- E-commerce
- Editor
- Fireworks
- Flash
- Forms
- Forum
- Framework
- Gallery
- Gimp
- Giveaway
- Icons
- Illustrator
- Images
- Inspiration
- Javascript
- jQuery
- Layout
- Menu
- MooTools
- Photoshop
- PHP
- Poll
- Popup
- Prototype
- Resources
- RSS
- Script.aculo.us
- Site of the month
- Stats
- Tables
- Template
- Tips and tricks
- Tools
- Tooltip
- Tutorials
- Upload
- Vector
- Video
- Web OS
- Wordpress
55 Free and beautiful WordPress themes
Three (printed)books from Packt Publishing giveaway
26 cool and useful jQuery tips, tricks & solutions
The best 44 photoshop text effects tutorials on the web!
Free Apple iPad GUI in PSD Format using vectors
6 Comments
Jamie
February 10, 2009
This does not work with IE7
Dan
September 1, 2009
I am VERY upset that this doesn’t work in IE7+!
The Hunter
September 1, 2009
@Dan -
Well for what i can see it is just an layout bug
jamie
September 1, 2009
Will there be a fix for this as I think this will be really helpful for alot of people.
jamie
September 1, 2009
Sorry having a thick one – this is from the woork site.
The Hunter
September 1, 2009
@jamie -
I dont know you beter pm the author of this tutorial.
Add Your Comment
Your name
March 10, 2010
We use Gravatars on OpensourceHunter, they are little icons that appear next to your name on this site and on many others. You can get a Gravatar account for free and any other site that supports it will show your avatar too. Get your Gravators account here!