Category: Website

You would want your website to be functional, of course. Informative is a requirement too. But most importantly, you want it to be beautiful. Your goal isn’t simply to provide another bland piece of text that tries desperately to cover an advertisement in the cloak of useful information. A basic shopping cart with all the items arranged in rows and columns is not appealing to you, and won’t be to your visitors. When someone visits your website’s home page, you want to immediately draw their attention with a dazzling array of well-designed graphics.

Then what do you need to construct a beautiful website design? The beholder in question, here, is the website visitor, your target audience, and market.

Your website designers London should be skilled enough to build elaborate and attractive graphics, shapes, and colors perfectly balanced to appeal to the eye, and also to draw the focus to the important portions of your website. Your web designer would know the code to construct a fully functional, dynamic site, keeping in mind that all the graphics are precisely positioned (despite, it would seem, the best efforts of competing browser developers.) However, neither has any idea about what the visitor finds interesting, engaging, or beautiful.

Your designers should be given a ready or basic style for the website. The kind of images you want, the colors they will be, the font style, presence, or absence of any animation should be noted. You are paying your designer to take your colors, imagery, maybe even a few sketches, and turn them into something appealing. You are paying them to make a layout on the center screen, a button system that lights up when you move the mouse over it, and press in on a user click. You are paying them to tell you whether (and if yes then when) your ideas are going to slow down your site, or affect your SEO, or cost you more than something you have budgeted. While you might seek their opinions, you have to remember that their opinions might differ from those of your visitors. It is this classic case of website design; the designers being the experts in their fields, and you in yours. A website that the designers build based on their own preferences is only somewhat different from a template, and only attractive to people who share the tastes of the creators.

Think of the visitors, and provide the designers with the foundation to allow them to create your pages to your audience’s taste. That is essentially all you need to create a beautiful website design!

This tutorial assumes you have the knowledge of CSS and HTML.

We are going to use a simple unordered list to build our menu. We will use css to style it so it looks cool and we will use jQuery to show and hide and slide it down and up.

The image with complete html and jquery code here:

The image of complete css code:CSS

You can view the demo of what we will be building here:DEMO

Before we start I want to say that for best performance you should use Firefox 3.0!

1). HTML FILE

Ok, first of all lets build our html file:

Inside the header, after the title,

link your css and jquery files (the statements below)

 lt; link href=”CSS/style.css” rel=”stylesheet” type=”text/css” /  gt;

 lt; script type=”text/javascript” src=”js/jquery-1.3.1.js”  gt; lt; /script  gt;

As you can see my CSS file is inside the folder I created called CSS.

And my jQuery framework file is in the folder named js. Change the structure to any way you like it. I just like to keep things organized.

Ok, so far your project should consist of an HTML FILE, a folder “js” with the jquery framework file inside of it – that can be downloaded here http://www.jquery.com, and the CSS folder with the blank “style.css” stylesheet inside of it. If you’re a bit confused with this, you can also check out webpagescientist.com to see exact instructions.

2.) continuing with our HTML file

Inside your body tag enter the following:

 lt; a href=”#” class=”menu_class”  gt;Click Me  lt; / a gt;

 lt; ul class=”the_menu” gt; lt; li  gt; lt; a href=”http://www.google.com” gt;Google lt; /a  gt; lt; /li  gt;

 lt; li  gt; lt; a href=”http://www.yahoo.com” gt;Yahoo lt; /a  gt; lt; /li  gt;

 lt; li  gt; lt; a href=”http://www.msn.com” gt;MSN lt; /a  gt; lt; /li  gt;

 lt; li  gt; lt; a href=”http://www.metacrawler.com” gt;MetaCrawler lt; /a  gt; lt; /li  gt;

 lt; li  gt; lt; a href=”http://www.dogpile.com” gt;DOGPILE lt; /a  gt; lt; /li  gt;

 lt; /ul  gt;

Here is the image of what my code looks like now: CodeSnippet

Now Preview your work in browser and you should have something like this: Preview

3).Styling with CSS

Open your style.css and insert the folowing code: (The comments are just for explanation purposes)

body {

font-family:Arial, Helvetica, sans-serif;

font-size:12px;

background-color: Black;

}/* Style our body document. set the font to “Arial”, size of the font to 12 and make the background Black color.*/

a.menu_class

{

background-color: #Bc0022;

border: 1px solid #FF9933;

font-size:20px;

padding:5px 30px 5px 30px;

color:Black;

width:90px;

height:40px;

}/*Style the top menu to look like a button by giving it padding. Make the color of the text black. give it background color and a solid border. */

ul, li {

margin:0;

padding:0;

list-style:none;

}/* Style all the unordered lists within the document to not have any extra spacing and remove bullets*/

.the_menu {

display:block;

width:134px;

border: 1px solid #FF9933;

}/* Style our menu class to be displayed as a block and set its width and border*/

.the_menu li {

background-color: #Bc0022;

}/* Style each individual list item on our menu to have a background color of dark red*/

.the_menu li a {

color:#FF9933;

text-decoration:none;

padding:10px;

display:block;

}/* Style the anchor texts to have no underline and have a 10 pixel distance in between them and the border. Give them a yellowish color*/

.the_menu li a:hover {

padding:10px;

font-weight:bold;

background-color:White;

}/* When user hover over our anchors give it a white background to appear like a highlight, make word bold and keep the padding the same*/

OK, save your style.css and preview your html file in browser. You should get something like this:Preview

So as you can see the menu is looking much better. We are done building it. Now the last step is placing it at the correct position and make it show up only when user clicks on the “Click Me” Button and hide it when the user clicks on it again.

Here is the missing code: its not going to be hard. as it only contains a few lines.

 lt; script type=”text/javascript”  gt;

$(document).ready(function () {

$(‘a.menu_class’).click(function () {

$(‘ul.the_menu’).css(‘top’, 3)

.css(‘left’,144);

$(‘ul.the_menu’).slideToggle(‘medium’)

});

});

 lt; / script  gt;

So lets break it down:

 lt; script type=”text/javascript”  gt;start scripting in javascript

$(document).ready(function () { //when the document ready start the function

$(‘a.menu_class’).click(function () { //get the anchor tag with the class of menu_class and when the user

clicks start the function

$(‘ul.the_menu’).css(‘top’, 3) //get the unordered list with the id of the_menu and add the css top:3px;

.css(‘left’,144); and left:144px; which means attach this unordered list at the coordinates of y=3 and x = 144. Those coordinates relate to the (a.menu_class) or our button. So this will place the submenu on the right.

$(‘ul.the_menu’).slideToggle(‘medium’) //get the unordered list with the id of the_menu and call the slideToggle function with the speed of medium. What tat means is attach our submenu and slide it down at the medium speed, if user clicks it again then slide it up at the medium speed.

});

});

 lt; / script  gt; Close out our functions and end the script.

One more thing. If you remember we seen the whole menu right away. To hide it so that the toggle function starts from showing it, we need to modify the .the_menu class in our styles.css. Change the display:block; to display:hidden. Then save the html document and the css document and we get our final result! DEMO.

I hope you enjoyed this tutorial and learned something. If you have any questions please feel free to post them in the comments. Thanks.Jquery makes it easy to build navigational sliding menus