Elegant navigation bar using CSS
This tutorial explains how to design an elegant navigation bar (gettyone inspired) for your site using CSS. The result is like this:
Live preview 
Download this tutorial
Step 1: Navigation bar HTML Code
HTML code is very simple: the structure is a <ul> list with a <li> element for each link in the navigation bar:
<span class=“inbar”>
<ul>
<li><a href=“about.html”><span>About</span></a></li>
<li><a href=“contact.html”><span>Products</span></a></li>
<li><a href=“contact.html”><span>Contact Us</span></a></li>
</span>
</div>
How you can see, heach link <a> contains a <span> tag inside itself. I use very often this simple tips to design liquid elements with rounded corners like this:
See also this post for an explanation about how to implement a fluid rounded corners (with and height) for an HTML element.
Step 2: CSS structure
This is the CSS file structure to design the navigation bar:
width:auto;
height:36px;
background:url(img/navbar-bg.png) left top repeat-x; }
#navbar .inbar{
display:block;
height:36px;
background:url(img/right-round.png) right top no-repeat; }
#navbar ul, #navbar ul li{
border:0px;
margin:0px;
padding:0px;
list-style:none;
height:36px;
line-height:36px; } #navbar ul{
background:url(img/left-round.png) left top no-repeat; }
#navbar ul li{
float:left;
display:block;
line-height:36px; }
#navbar ul li a{
color:#403e32;
text-decoration:none;
font-weight:bold;
display:block; }
#navbar ul li a span{
padding:0 20px 0 0;
height:36px;
line-height:36px;
display:block;
margin-left:20px; }
#navbar .navhome a, #navbar .navhome a:hover{
background:url(img/a-bg.png) left top no-repeat;
height:36px;
line-height:36px; }
#navbar .navhome a span, #navbar .navhome a:hover span{
color:#FFFFFF;
background:url(img/span-bg.png) right top no-repeat;
height:36px;
line-height:36px; }
#navbar ul li a:hover{
background:url(img/ahover-bg.png) left top no-repeat;
height:36px;
line-height:36px; }
#navbar ul li a:hover span{
background:url(img/spanhover-bg.png) right top no-repeat;
height:36px;
line-height:36px; }
Use this navigation bar on Blogger Template
Add this link to the CSS file in the <head> tag of your template
…and copy and paste in a section of your template HTML code in the step 1. You have to change only the name and the URL of your link!
(Via woork.)
Five web 2.0 CSS menu tutorials
This post is a compilation of the most visited posts on my Blog about “web design” topic. It includes five CSS menu tutorials inspired to some Web 2.0 sites with round corners, scriptaculous and ajax effects.
Digg-like navigation bar using CSS
This tutorial explains how to design a digg-like navigation bar using a liquid design with rounded corners for links.
Gettyone-like search options menu with Scriptaculous
This tutorial explains how to implement a Gettyone-like search options menu which display a layer with some search options below the input search field, when an user click on the input field to searching for something.
Flickr like horizontal menu
This tutorial explains how to implement an horizontal menu Flickr-like using CSS and Javascript to show/hide sub-menu.
Simple CSS vertical menu Digg-like
This tutorial explains how to implement a simple vertical menu digg-like using CSS and javascript to show/hide sub-menu.
Tabbed search bar using CSS and Javascript
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 <input> element to set search options and execute your search only for all items related to the selected topic (for example: web, images, videos…).
Related content
Five basic Ajax tutorials (login, insert record into a database table, search engine, autosuggest and Edit in Places)
(Via woork.)
Watch out: Web Designer’s Awesomeness in February
February was a busy month, we have been watching great news, articles, tutorials, scripts, tips and lot of inspiration for web designers popping up everyday so we thought it would be a great idea to wrap all those resources in one package where you can check to fuel your creativity.
CSS Tips
1)Powerful CSS-Techniques For Effective Coding- 50 new CSS-techniques, ideas and ready-to-use solutions for effective coding
2)Creating a Body-Border- Creating a CSS border viewable at all times even with vertical text that extends beyond the bottom of the page.
3)10 best CSS hacks- Here is the list of 10 hand picked CSS hacks and tricks which can help you in your CSS code and also save some time. You may also want to check our own version of CSS Hacks that can be a time saver.
4)Navigation Menus: Trends and Examples- As always, an excellent overview of some trends with beautiful examples from Smashing Magazine: ’speaking-block’ navigation, mac-style, icons, vertical tabs, hand-written and some gems in the experimental section.
5)7 Tips for Great Print Style Sheets- A few tips for creating a print style sheet that will ensure your website is user-friendly, regardless of the medium it ends up in.
6)CSS Web 2.0 Glossy Text- You don’t need to be a Photoshop pro to create Web 2.0 glossy text that seems very trendy today.
7)How to Create Beautiful and Elegant HTML Lists Using CSS- This article will explain and show you how to style lists inside blog posts, articles or other basic HTML documents.
8 )Inspiration Overload- 100 CSS Galleries You Need to Check Out
9)How to recreate Silverback’s Parallax- Parallax scrolling is a psuedo-3D effect often used in side scrolling games to create depth. In this article Clearleft lead designer Paul Annett explains how he used the effect to great success on their newly launched Silverback site.
Contests & Competition
10)Smashing Header Graphics Contest- Smashing Magazines held a contest for webdesigners to share their skills with fellows designers and creating a free repository of downloadable header graphics. This contest inspired us to create 70+ Visually Impressing Header Graphics, which is a small showcase of more than 70 outstanding header graphics with excellent use of visual elements and interface design.
11)What is Graphic Design Poster Competition- Veerle held a very hot competition for graphic designers to sharpen their pencils to come up with something creative or witty that visualises the question ‘What is Graphic Design?’. It’s unbelievable how many people have responded to this contest with amazing graphic design posters, the winners were announced here.
WordPress News and Hacks
12)The Lorelle Story – An Interview with Lorelle VanFossen, the one telling us what’s going on in the WordPress world each week over at The Blog Herald, and she’s also the author of the most excellent blog Lorelle on WordPress.
13)48 Unique Ways To Use WordPress – WordPress, one of the most popular blogging platforms (if not the most), is capable of being more than just a blog platform. Here you can find 48 unique and great ways to use wordpress.
14)WordPress Security Tips and Hacks – A round-up of tips on improving your WordPress blog security with sensible tips, techniques, and WordPress Plugins.
Freelance Advices and Tips
15)Pay Me Please – A Freelance Web Designer’s Guide to Billing and Pricing.
16)3 Uncomfortable Ways To Make More Money As A Freelancer – If you want to make more than you’re making right now, you can take these three “uncomfortable” strategies to heart – and to the bank.
17)10 Phrases Every Freelancer Should Kick-Out of Their Vocabulary- The title speaks for itself.
18)Freelancers: Manage your projects- Essential tools and web apps for any freelancer who wants to stay organised, keep the client up to date and keep records of milestones, deadlines and project files…
Inspiration
19)25 Beautifully Dark Website Designs – An awesome collection of great designs that feature dark colors by Vandelaydesign.
20)Pattern inspiration- This post can be an inspiration for creating patterns in Illustrator or to re-decorate your house. Like with everything the true power lies in how you execute it.
21)Grid and Column Designs- If you are looking for inspiration for grid and column design, here is a nice collection of 32 column-based websites.
22)Insanely Creative Portfolios From Around the Web- Some interesting portfolios for inspiration.
Tutorials
23)Extensible CSS Interface I: The Foundation- Cameronmoll Briefly discusses the importance of producing visually rich interfaces with semantic, accessible, and portable markup underneath.
24)Beautiful CSS Form- This tutorial explains how to design a beautiful form (Facebook inspired) using a clean CSS design with only
25)How to Put Smokin’ Bullet Holes and a Wanted Sign into a Piece of Wood- make an awesome wood emboss effect, put bullet holes into the wood and finally smoke ‘em up to a gnarly Wyatt-Earp-just-walked-past look.
Ajax and Javascript
26)Create soft edges on images- A demonstration to create soft edge for content images using lightweight and unobtrusive JavaScript and CSS interventions. With it you can create "cloudy" soft edges or one-side opacity gradients without any image editing software.
27)jQZoom- Allows you to realize a small magnifier window close to the image or images on your web page easily.
28)Massive AJAX Country/Area Drop-down List- A database driven AJAX selection tool which re-generates the list of areas based on the country the user selects.
29)FancyZoom 1.1- Smooth Javascript Image Zooming For Your Web Pages
New Launches
30)XHTML Challenge- XHTML Challenge is a freshly launched project by Valentin Agachi, which enables you to create challenges between two websites. The script will analyze the sites’ XHTML markups and return a report for the visitors to vote.
31)CssLeak V2 Launched- V2 of CssLeak has launched with some new features with a new template, a news system which will soon become public, the possibility to leave a comment on a design and to download the color palette file for Photoshop (in .aco).
32)CSSMates- A new forum for CSS related topics and discussions.
33)PureEdit- PureEdit is a newly launched CMS that dramatically simplifies the back-end development of your website while giving you full control of the front-end design and programming.
(Via Noupe.)
pQuery where p = Perl
We have talked about a pQuery before, which was a PHP port of jQuery. Now we have a new pQuery for the Perl community:
pQuery is a pragmatic attempt to port the jQuery JavaScript framework to Perl. It is pragmatic in the sense that it switches certain JavaScript idioms for Perl ones, in order to make the use of it concise. A primary goal of jQuery is to “Find things and do things, concisely”. pQuery has the same goal.
pQuery exports a single function called pQuery. This function acts a constructor and does different things depending on the arguments you give it.
A pQuery object acts like an array reference (because, in fact, it is). Typically it is an array of HTML::DOM elements, but it can be an array of anything.
Like jQuery, pQuery methods return a pQuery object; either the original object or a new derived object. All pQuery METHODS are described below.
It is always interesting to see ideas ported from Web JavaScript to other languages.
(Via Ajaxian.)
20080301-outaTiME, clubbers-vol.1
Today a new release of clubbers compilation comes, to play the record click here.
Track list:
- Luke Francis – A Girl Like You (Extended Mix)
- Alex Gaudino – Watch My Horny Mix (Mijangos Mashup Edit)
- David Guetta ft Tara Mcdonald – Delirious (Laidback Luke Remix)
- Royal Sapien – Everyone (Bitfiend’s Solitary Remix)
- Timbaland pres One Republic – Apologize (Pete Francis Club Mix)
- Splittr – All Alone (Extended Vocal Mix)
- Janet Jackson – Feedback (Miki Moto & Bobby Blanco Full Vocal Mix)
- Deepest Blue – Miracle (Club Mix)
- Spencer & Hill – World in Love (Raul Rincon Remix)
- Duran Duran – Falling Down (Sebastian Leger Vocal Mix)
- Kylie – Wow (Death Metal Disco Scene Mix)
Include: Pack your JavaScript with ease
Brian Moschel just told us about Include:
It determines which files to compress at runtime and automatically compresses them into one script using Dean Edwards’ Packer.
You can include any JavaScript from any other JavaScript with a relative path:
Then turn on compression like this:
include(‘javascripts/prototype’, ‘javascripts/myapplication’);
When you reload the page, a window will open that contains a list of the scripts as they are loaded, the uncompressed collection of code, and the code compressed with Packer. You save the compressed code on your server and turn on production mode:
include(‘javascripts/prototype’, ‘javascripts/myapplication’);
Scripts load in the same order across all browsers (last-in first-out), which is nice, considering document.write by default works differently in Opera.
Another aspect we’re excited about is that Include makes it so you’ll never have to write a custom server-side compression script again. Since the scripts to compress are determined at runtime, you can easily compress large libraries with conditional plugins, like TinyMCE.
include(‘dependencies’,‘fullscreen’);
// conditionally include plugin
if (selected_plugins[’search’]);
include(’search’);
Instead of duplicating that logic in a server-side script, you can choose your plugins, turn on compress mode, and you’ve got your compressed code. To demonstrate this, we ported TinyMCE and plugins to use Include.
Include is open-source with an MIT license. I hope you find it as useful as we have.
(Via Ajaxian.)
Thunderbird 2.0.0.12 security and stability release now available
As part of Mozilla Corporation’s ongoing stability and security update process, Thunderbird 2.0.0.12 is now available for Windows, Mac, and Linux as a free download from www.getthunderbird.com.
Due to the security fixes, we strongly recommend that all Thunderbird users upgrade to this latest release.
If you already have Thunderbird 2.0.0.x, you will receive an automated update notification within 24 to 48 hours. This update can also be applied manually by selecting “Check for Updates…” from the Help menu.
For a list of changes and more information, please review the Thunderbird 2.0.0.12 Release Notes.
Please note: If you’re still using Thunderbird 1.5.0.x, this version is no longer supported and contains known security vulnerabilities. Please upgrade to Thunderbird 2 by downloading Thunderbird 2.0.0.12 from www.getthunderbird.com.
(Via Mozilla Developer News.)
Firebug extension tutorial
Honza has a great new tutorial on extending firebug, starting with a HelloWorld extension and then building up to adding to the toolbar. He includes all the key elements, the chrome file and manifest setup, the UI extension by overlay, and registering your extension with Firebug. On top of all that he has a small UML picture to help put the pieces together. Very readable, check it out.
ECMAScript 4 Milestone 2 Released
ECMAScript 4 M2 has been released and Francis Cheng has posted about the new version. M2 fully implements:
- classes and interfaces
- namespaces
- pragmas
- let, const, let-const
- iterators
- enumerability control
- type expressions / definitions / annotations
- runtime type checks (“standard mode”)
- nullability
- destructuring assignment
- slice syntax
- hashcode
- catchalls
- map & vector
- date & time improvements
- meta objects
- static generics
- string trim
- typeof
- globals
- expression closures
- name objects
- type operators (is / to / cast / wrap)
Francis also posted about Vectors:
A new built-in class named Vector is proposed for ECMAScript edition 4. This class is similar to the Array class, but is designed for better performance, efficiency and error checking. Some interesting aspects of the Vector class:
- vectors are dense;
- vectors do bounds checking;
- vectors can be fixed length;
- vectors have type parameters;
- vectors have the same methods as arrays.
David Tucker has posted about Colin Moock and his new lecture notes on the language changes that include:
- Generic Functions: This functionality will add Java-style method overloading to ActionScript. A function must be defined with the keyword
generic, but then mutliple methods (with different method signatures) can be used. - Iterators and Generators: Increased support for iterating over a series of values using a class defined iterator. Both of these items are very Python-like.
- Proper Tail Calls: A function can properly call another function as its last operation – this adds increased support for recursion patterns.
- New Number Types: byte, double, decimal (and the current generic ‘Number’ type would be removed)
- Numeric Suffixes: As in Java, numeric literals will have suffixes to denote their specific numeric type.
- Vector Type: As in Java, there will be a mono-typed array called Vector. Length can optionally be pre-defined at creation.
- Record Type: Describes the details of an object – easier to create than a class. I believe it is dynamic – in that it has required values, but additional properties can be defined per instance.
- Array Type: A type that describes what will be contained within an array. For example – you could say that you will have a 7-element array made up of Strings.
- Union Types: A property (or argument) could be one of a list of types (as opposed to now where a property has to be of one type – or no type). This would give you the ability to have an argument that could be a String or XML – but nothing else.
ES4 keeps on chugging.
(Via Ajaxian.)
Canvas Polar Clock
“agrath” has developed a very nice Canvas example using Prototype that makes use of a common Prototype-isms: Object.extend, Class.create, bind, enumerables, $w, $.
The Polar Clock is a different visualization of time and the example walks through all of the work required to implement it using Prototype 1.6.0.2 and Canvas, including the draw method:
this.clearCanvas();
var w = 20;
var r = 260;
this.date = new Date();
var cr = r;
$(‘labels’).update()
$w(“month day weekday space hour min second”).reverse().each(function(interval){
cr = cr – w – w/2;
if(interval != ’space’)
{
var ir = this.intervalToDegrees[interval].bind(this.date)();
var i = ((ir / 360) * 255) + 147;
var color = this.cc.rgbToCss(this.cc.hslToRgb(i.wrap(0,255),205,127));
this.drawSolidArc(color, cr, w, ir.toRadians());
$(‘labels’).insert(this.getIntervalLabel[interval].bind(this.date)() + ‘<br />’);
}
}.bind(this));
},
The article walks through a lot of Canvas as well as the Prototype side of things. Very thorough.
(Via Ajaxian.)
1 comment