Archive for the ‘Tutorial Release’ Category

For all of us who deal with long web pages and need to scroll to the top for the menu,

here’s a nice alternative: floating menus that move as you scroll a page. This is done

using HTML, CSS and jQuery, and it’s fully W3C-compliant.

View floating menu samples here

This tutorial covers how to create a “floating menu” using HTML, CSS, and jQuery. To

reiterate, a floating menu stays visible even if you scroll down a web page. They’re

animated, so they move up and down as you scroll the browser window up or down. I am

going to show you how to make a floating menu using jQuery and CSS, and hopefully make

some new jQuery disciples 😀 .

Before we continue to the coding steps, have a look at the two screen snaps below. The

first shows a web page with a floating menu at top right. Of course, you can’t tell it’s

floating until you see it live and actually scroll the page. So look at the second

snapshot, and you can see that the menu has moved.

Figure 1

Figure 2

Step 1

Let’s start with the HTML markup for a nice menu consisting of three sub-menus:
view plaincopy to clipboardprint?

<div id=”floatMenu”>
<ul>
<li><a href=”#” onclick=”return false;”> Home </a></li>
</ul>

<ul>
<li><a href=”#” onclick=”return false;”> Table of content </a></li>
<li><a href=”#” onclick=”return false;”> Exam </a></li>
<li><a href=”#” onclick=”return false;”> Wiki </a></li>
</ul>

<ul>
<li><a href=”#” onclick=”return false;”> Technical support </a></li>
</ul>
</div>

This is the basic markup we will use. The main part in this bit of HTML is the <div id=”

floatMenu”>…</div> in Line 01, which encapsulates the whole menu. The three lists are

only used to demonstrate structure, which can be modified to suit your needs. In this

case, there are three sections to the menu, as represented by three unordered HTML

lists.

As a matter of habit, I disable the click on dummy links (href=”#”). Just to be sure

that a click on a dummy link doesn’t send the page back to the top, there is also an

onclick=”return false;” in <a href>. This method allows to add menu item features such

as lightboxing – something that requires the page to stay at its current vertical

position when the user clicks on a menu link.

Step 2

Now we need some CSS rules to skin and position the menu. (I used Eric A. Meyer’s CSS

Reset, so that’s why there is no margin:0 or padding:0 on the ul element):
view plaincopy to clipboardprint?

body {
background-color:#000;
height:2000px;
color:#ccc;
font:10px “Lucida Grande”, “Lucida Sans”, “Trebuchet MS”, verdana, sans-serif;
}
#floatMenu {
position:absolute;
top:150px;
left:50%;
margin-left:235px;
width:200px;
}
#floatMenu ul {
margin-bottom:20px;
}
#floatMenu ul li a {
display:block;
border:1px solid #999;
background-color:#222;
border-left:6px solid #999;
text-decoration:none;
color:#ccc;
padding:5px 5px 5px 25px;
}

The body height (Line 03, above) has been set only to get enough room for our menu to

scroll up and down with the page. This should be removed in a real case scenario. The

two other things to take note of are the position:absolute (Line 08) and the left:50%

(Line 10), both in the #floatMenu CSS rule (Line 07), above.

The “position” attribute is used when you need to remove an element from the flow of the

document and keep it at a precise place in your page. If you use the text zoom function

of your browser, an element with absolute positioning will not move, even if the text

around it increases in size.

The “left” attribute is used to position the specific div element horizontally. The

value needs to be defined as a percentage in the case that we want a centered design.

With a 50% value, the left side of the container is positioned in the middle of the

page. To position it left or right we need to use the “margin-left” attribute (Line 11),

with a negative value for an offset to the left and a positive one for an offset to the

right.

The others elements in the above stylesheet rules customize the visual design.

Step 3

Now we have a menu of three sections positioned in the upper right hand side of the

page. To enhance the menu item roll-over effect, let’s add style classes menu1, menu2

and menu 3 to each menu section, respectively (to each <ul> element). We will have 3

distinct sub-menus using our 3 <ul> tags. The code below is a modification of the HTML

code shown in Step 1 above:
view plaincopy to clipboardprint?

<div id=”floatMenu”>
<ul>

</ul>

<ul>

</ul>

<ul>

</ul>
</div>

Now let’s define some CSS hover-based roll-over effects, which will be different for

each menu section.
view plaincopy to clipboardprint?

#floatMenu ul.menu1 li a:hover {
border-color:#09f;
}
#floatMenu ul.menu2 li a:hover {
border-color:#9f0;
}
#floatMenu ul.menu3 li a:hover {
border-color:#f09;
}

Now each menu section will display a different color when the mouse hovers over a menu

item. If you like, you can also add rules for other menu link states using :link,

:visited, :hover and :active pseudo classes. The order in which you should write them

can be easily memorized like this: LoVe and HAte, where the capitalized letters

represents the first letter of each state.

Step 4

We’ve got a nice looking menu and could stop here, but we do want that floating menu, so

it’s time to add some jQuery. You’ll need to download the jQuery library and the

Dimensions plugin. This plugin will be used to grab information about the browser’s

window (width, height, scroll, etc.). You can link to both bits of jQuery code from your

HTML file in the <head>…</head> section. Just remember to change the URL path according

to where on your server you place the jQuery library and plugin files.
view plaincopy to clipboardprint?

<script language=”javascript” src=”jquery.js”></script>
<script language=”javascript” src=”jquery.dimensions.js”></script>

We’ll need some custom jQuery code as well, so start a new <script> section, also within

the <head>…</head> section of your HTML document:
view plaincopy to clipboardprint?

<script language=”javascript”>
.
</script>

Add the following jQuery code inside the the <script> section:
view plaincopy to clipboardprint?

$(document).ready(function(){
// code will go here
});

The $(document).ready() function is similar to the window.onLoad but improved. With the

window.onLoad function, the browser has to wait until the whole page (DOM and display)

is loaded. With the $(document).ready() function, the browser only waits until the DOM

is loaded, which means jQuery can start manipulating elements sooner.

Step 5

We need a listener for the “scroll page” window event. Our custom jQuery script now

looks like this:
view plaincopy to clipboardprint?

$(document).ready(function(){
$(window).scroll(function () {
// code will go here
});
});

A listener is an event handler waiting on standby for a particular window event to

happen – in this a page scroll up or down.

Step 6

Since our menu will “float” as the page is scrolled, we need to track its initial

position. Instead of hard-coding that into the jQuery, we’ll read it’s position using

the Dimensions jQuery plugin, then use the retrieved value. We will do the same with the

name of our menu. Let’s add two variable definitions (Lines 01, 02) so that our code now

looks like this:
view plaincopy to clipboardprint?

var name = “#floatMenu”;
var menuYloc = null;

$(document).ready(function(){
menuYloc = parseInt($(name).css(“top”).substring(0,$(name).css(“top”).indexOf

(“px”)))
$(window).scroll(function () {
// code will go here
});
});

Lines 01 and 02 define variables “name” and “menuYloc”. Line 05 sets the value of

“menuYloc”. The “name” variable will be used to reference our floating menu. The

“menuYloc” variable will contain the original vertical position of our menu.

Let’s look at how the value of menuYloc is set in Line 05. This statement is an example

of jQuery’s powerful function-chaining. First we read the “top” attribute value from the

CSS rules of our menu element (which is “150px”, set in Step 2). Then we strip off the “

px” string at the end, since we only need the “150? part. To do this, the jQuery function

call .css(“top”) first finds the value of the top attribute for the menu. (This

attribute was set in Line 09 of the code in Step 2, above.) That results in retrieving

the value “150px”. Then the .indexOf() function finds where the “px” in “150px” starts,

and the .substring() function ensures we save everything before the “px”. The .parseInt

() function turns the string “150? into an numeric integer value.

Step 7

We now arrived at the fun part of this tutorial: animating the menu to make it “float”.

To do this, we need to determine how far the page has scrolled in pixel dimension. We

have the original menu location stored in variable “menuYloc”. We need the offset of the

scroll bar, which we can get from the command $(document).scrollTop(), defined in the

Dimensions jQuery plugin. After grabbing the offset we can add the animate command.

Lines 07 and 08, below, show the new code:
view plaincopy to clipboardprint?

var name = “#floatMenu”;
var menuYloc = null;

$(document).ready(function(){
menuYloc = parseInt($(name).css(“top”).substring(0,$(name).css(“top”).indexOf

(“px”)))
$(window).scroll(function () {
var offset = menuYloc+$(document).scrollTop()+”px”;
$(name).animate({top:offset},{duration:500,queue:false});
});
});

The variable “offset”, in Line 07 above, contains the difference between the original

location of the menu (menuYloc) and the scroll value ($(document).scrollTop()), in pixel

measurement. To make it work as a CSS rule, we add the necessary measurement unit, “px”,

after the numeric value. Now we can apply the vertical offset, as calculated, to

position the menu and thus making it move.

To make it all look nicer, let’s make use of jQuery’s animation options. We’ve stored

the menu name in the variable “name” and can recall it when needed, to use it along with

the .animate() function. The animate function requires two parameters: (1) the style

properties, and the (2) animation options. In this tutorial, we just need to animate the

“top” CSS property, but to specify additional parameters, separate each property:value

pair with a comma (,).

We’re using two parameters here. The “duration” is the length of the animation
in milliseconds, and the “queue” is a list of all positions we want our object to be

animated to. Since we only want to animate our object to its final location (the browser

’s current scroll location), we set “queue” to false.

We should now have a functioning floating menu.

google navigation bar

Google’s new cross-site navigation bar, which began rolling out, is actually a new measure to improve your surfing privacy, and not the ‘Google +1? social layer that we’ve been anticipating.

Basically, the bar elucidates the three ‘states’ in which you can use Google’s services. First this is ‘Unidentified,’ which is where Google only knows your IP address, tracks you with a cookie, but doesn’t know your name; then there’s ‘Psuedonymous,’ which is how most of us currently use Google — and finally there’s ‘Identified,’ which is where your real life identity is assured.

Interestingly, Google also answers a question we’ve always wondered about: when you’re logged out, you are effectively anonymous — even if your IP address matches one of your Google accounts, your surfing habits are still kept separate.

The navigation bar, then, is simply a way of making sure you always know just how private (or public) your actions are. It’s worth noting that the nav bar might still become a part of the upcoming ‘+1? social layer — but for the time being, we can only guess at how they might be combined.

Article from: http://my-very-cool-gadgets.com/

On websites that have a lot of pages, breadcrumb navigation can greatly enhance the way users find their way around. In terms of usability, breadcrumbs reduce the number of actions a website visitor needs to take in order to get to a higher-level page, and they improve the findability of website sections and pages. They are also an effective visual aid that indicates the location of the user within the website’s hierarchy, making it a great source of contextual information for landing pages.

What is a breadcrumb?

A “breadcrumb” (or “breadcrumb trail”) is a type of secondary navigation scheme that reveals the user’s location in a website or Web application. The term comes from the Hansel and Gretel fairy tale in which the two title children drop breadcrumbs to form a trail back to their home. Just like in the tale, breadcrumbs in real-world applications offer users a way to trace the path back to their original landing point.

navigation menu

You can usually find breadcrumbs in websites that have a large amount of content organized in a hierarchical manner. You also see them in Web applications that have more than one step, where they function similar to a progress bar. In their simplest form, breadcrumbs are horizontally arranged text links separated by the “greater than” symbol (>); the symbol indicates the level of that page relative to the page links beside it.

In this article, we’ll explore the use of breadcrumbs on websites and discuss some best practices for applying breadcrumb trails to your own website.

When Should You Use Breadcrumbs?

Use breadcrumb navigation for large websites and websites that have hierarchically arranged pages. An excellent scenario is e-commerce websites, in which a large variety of products is grouped into logical categories.

You shouldn’t use breadcrumbs for single-level websites that have no logical hierarchy or grouping. A great way to determine if a website would benefit from breadcrumb navigation is to construct a site map or a diagram representing the website’s navigation architecture, and then analyze whether breadcrumbs would improve the user’s ability to navigate within and between categories.

Breadcrumb navigation should be regarded as an extra feature and shouldn’t replace effective primary navigation menus. It’s a convenience feature; a secondary navigation scheme that allows users to establish where they are; and an alternative way to navigate around your website.

Types of Breadcrumbs

Location-based
Location-based breadcrumbs show the user where they are in the website’s hierarchy. They are typically used for navigation schemes that have multiple levels (usually more than two levels). In the example below (from SitePoint), each text link is for a page that is one level higher than the one on its right.

navigation menuAttribute-based
Attribute-based breadcrumb trails display the attributes of a particular page. For example, in Newegg, breadcrumb trails show the attributes of the items displayed on a particular page:

dhtml menu

This page displays all computer cases that have the attributes of being manufactured by Lian Li and having a MicroATX Mini Tower form factor.

Path-based
Path-based breadcrumb trails show users the steps they’ve taken to arrive at a particular page. Path-based breadcrumbs are dynamic in that they display the pages the user has visited before arriving on the current page.

Benefits of Using Breadcrumbs

Here are just some of the benefits of using a breadcrumb trail.

Convenient for users
Breadcrumbs are used primarily to give users a secondary means of navigating a website. By offering a breadcrumb trail for all pages on a large multi-level website, users can navigate to higher-level categories more easily.

Reduces clicks or actions to return to higher-level pages
Instead of using the browser’s “Back” button or the website’s primary navigation to return to a higher-level page, users can now use the breadcrumbs with a fewer number of clicks.

Doesn’t usually hog screen space
Because they’re typically horizontally oriented and plainly styled, breadcrumb trails don’t take up a lot of space on the page. The benefit is that they have little to no negative impact in terms of content overload, and they outweigh any negatives if used properly.

Reduces bounce rates
Breadcrumb trails can be a great way to entice first-time visitors to peruse a website after having viewed the landing page. For example, say a user arrives on a page through a Google search, seeing a breadcrumb trail may tempt that user to click to higher-level pages to view related topics of interests.

Breadcrumb Navigation Design Considerations

When designing a breadcrumb navigation scheme, keep several things in mind. Let’s take a look at some questions that might arise when you’re working with breadcrumbs.

What should be used to separate link items?
The commonly accepted and most recognizable symbol for separating hyperlinks in breadcrumb trails is the “greater than” symbol (>). Typically, the > sign is used to denote hierarchy, as in the format of Parent category > Child category.

Article Scource: http://www.smashingmagazine.com/

A good navigation would mean that you have a user-friendly website. And if you have a user-friendly website, expect that your online visitors would be comfortable browsing your site and would definitely come back for more visits. Come to think of it, where would you like to stay longer? In a website where you have to click on the sitemap every time your browse or in a website where you can easily find what you are looking for with just a few clicks?

Here are great navigation tips on how to make your website design user-friendly:

A clean website with a good navigation is always a plus. You can enhance the look of your website with graphics but make sure that you focus on your content and use a lot of white space. If you are to create links to a content site, you can use contrasting colors.

Do not clutter links. Make sure that you organize your links and they are all working.

Dead links can give an impression of sloppiness and haphazard work? If you have too many links, you can categorize them accordingly in drop down menus. You can also use flyouts links for your main categories.

Create a navigation system that is consistent and clean-cut. If you have your links on a drop down menu under one category, then you must have the same navigation with the rest of your site categories.

Your website design should accommodate a large number of links as you may have to add links in the future. As you add more pages to your site, then you need to add more space for additional links.

Categorize your website content in sections so you can gather up related links. You can use section home pages for certain categories or sections.

Your main links should be kept together.
This way, your visitors can know what your website covers at just one glance. The links to your site’s main sections should convey what your website is all about. If it is a business website- your main links should show what products or services you have to offer.? Links can be placed on navigations bars. They are often listed on the right side of the menu bar. You can also line them up neatly, just below your header.

In creating text links for your website, have it short and simple. The words should precise enough to know what that page would contain once clicked.

If you think a link is important to your reader or if you want them to go to a certain section in your site, you can make this link as a feature link of your site. You can have a different front color for this special link, boxed it up or have it in bold font.

Article source: http://business.ezinemark.com/

Pop up menu is visible and placed on the top for majority websites. For some websites, the web designers want to navigate the website by DHTML menu, but there is no space to place menu, context menu type is the best choice to show menu and it can be shown anywhere just by right-clicking.pop-up-menu
Step 1: Create pop up menu from built-in templates

Launch Sothink DHTML Menu, “Startup” window opens, you can start menu from built-in templates or new blank. First, click the name from built-in templates to select the menu; and then, preview menu style in preview window of Startup; last, click “OK” to start menu creation.

Pop up Menu - Menu Template

Step 2: Choose menu type for the chosen menu

In tasks panel, click “Menu Type” option on the Global panel; and enter the “Global > Menu Type” to set the menu as “Context menu”.

Pop up Menu - Menu Type

Step 3: Publish menu to website

Menu creation is finished. Click the button “Publish” to choose the best publishing method. After the option is check, you can follow the step to publish your navigation to website. And upload all the resources.

Pop up Menu - Publish Menu

Auto highlight node to show where the user is on the web site. Sothink Tree Menu can automatically display the highlighted node linking to the current page in the browsers.

highlight tree menu

Introduction:

In the above tree menu, you can see that the node “Overview” is highlighted by menu font and bold style. That is because, through the analysis of tree menu, the link URL of node “Overview” is the same with “index.htm” you are visiting.

Steps:

Click Global Settings > Highlight in Tasks panel and check “Auto highlight current node” option.
The highlighted node is the same as the selected node of mouse out state when the highlight function takes efect; the highlighted node is the same as selected node of mouse over state when the mouse moves over highlighted node.

What’s DHTML tree menus?

DHTML tree menus are navigation menu used for large scale website. It also known as a links bar or link bar, which pulls down its nodes after mouse movement. It contains hypertext links on web page so as to navigate between the pages of a website, and quick link to the target page.

tree menu sampleWhy choose this DHTML menu maker?

  • Cross-browser navigation menu works excellently on main-stream browsers on various platforms.
  • Edit web menu directly in HTML editors as add-on, Dreamweaver, FrontPage included.
  • Build SE friendly navigation menu by the useful tool.
  • Publish wizard guides publishing the navigation bar, JavaScript menu to website step by step.
  • Customizes element for web menu, like font, icon, background, color, border, cursor, effects, alignment, transparency, size, etc.
  • Offers 50+ free menu templates and image library resources .
  • Any HTML code can be used within the JavaScript menu item.

DHTML menu templates

Sothink Tree Menu offers excellent menu templates by usage, and one customized type in the template gallery. You can start web menu from template; create a blank menu and apply a template to it later; and create new templates and modify the existing ones.

tree menu samples

How to make tree menus ?

Step 1: Create DHTML tree menus from built-in templates

Launch Sothink Tree Menu, “Startup” window opens, you can start menu from built-in templates or new blank. First, click the name from built-in templates to select the menu; and then, preview menu style in preview window of Startup; last, click “OK” to start menu creation.

tree menu templateStep 2: Edit nodes and replace the contents

Add or remove nodes for DHTML tree menus. The added nodes will auto-inherit the node’s properties. Replace the text and set the link for each menu item.

tree menuStep 3: Publish menu to website

Menu creation is finished. Click the button “Publish” to publish DHTML menu. After the option is check, you can follow the step to publish your navigation to website. And upload all the resources.tree menu - publish

The web designers usually apply “Cool” JS menu to navigate the website. This JS menu has the features of dynamic and interactive, which attracts the more traffic. Although JS menu is a stunning navigation menu, it is not friendly for search engine. How to make JS menu SE friendly to Google spider? Search Engine Friendly Code Maker included in Sothink DHTML Menu will help you to generate special code to make your JS menu crawled quickly by SE spider.

How to use Search Engine Friendly Code Maker?

When you finish JS menu configuration, click “Tools > Search Engine Friendly Coder Maker” or click DHTML Menu - Search Engine Code Maker on the toolbar to open Search Engine Friendly Coder Maker Dialog. The generated codes are listed within the dialog. You can click the button “Copy All” to copy these codes and then paste them into the page through web editor. These codes should be placed behind the menu code within BODY tag.

JS Menu - Search Engine Coder

The codes are like this after they are copied to the web page:

The JS menu codes are marked by green.
The generated codes by search engine friendly code maker are marked by red.

<body>
<script type=”text/javascript”>
<!–
stm_bm([“menu0e98″,800,””,”blank.gif”,0,””,””,0,0,250,0,1000,1,0,0,””,””,0,0,1,2,”default”,
“hand”,””],this);
stm_bp(“p0″,[0,4,0,0,2,3,0,7,100,””,-2,””,-2,50,0,0,”#999999″,”#E6EFF9″,””,3,1,1,”#000000″]);
stm_ai(“p0i0″,[0,”Menu Item 1″,””,””,-1,-1,0,””,”_self”,””,””,””,””,0,0,0,””,””,0,0,0,0,1,”#E6EFF9″,0,”#FFD602″,0,””,””,3,3,1,1,
“#E6EFF9″,”#000000″,”#000000″,”#000000″,”8pt Verdana”,”8pt Verdana”,0,0]);
stm_aix(“p0i1″,”p0i0″,[0,”Menu Item 2”]);
stm_aix(“p0i2″,”p0i0″,[0,”Menu Item 3″,””,””,-1,-1,0,””,”_self”,””,””,””,””,0,0,0,”arrow_r.gif”,”arrow_r.gif”,7,7]);
stm_bpx(“p1″,”p0”,[1,4,0,0,2,3,0,0]);
stm_aix(“p1i0″,”p0i0”,[]);
stm_aix(“p1i1″,”p0i1”,[]);
stm_aix(“p1i2″,”p0i0″,[0,”Menu Item 3”]);
stm_ep();
stm_aix(“p0i3″,”p0i0″,[0,”Menu Item 4”]);
stm_aix(“p0i4″,”p0i0″,[0,”Menu Item 5”]);
stm_ep();
stm_em();
//–>
</script>

<noscript>
<ul>
<li>Unspecified</li>
<li><a title=”/index.htm” href=”/index.htm” target=”_self”> Home</a>|</li>
<li><a title=”/product.htm” href=”/product.htm” target=”_self”> Products </a></li>
<li> Showcase </li>
</ul>
</noscript>

</body>

Now, the remarkable JS menu is shown on your website; and SE friendly menu code is available to make your website indexed and crawled quickly by spider.

This is a frameset page including iframe and wonderful DHTML menu. Here displays the iframe content. Click the menu item above to see the picture in the iframe window, and you will find that the item is be activated, which the icon is shining and its background color becomes into blue.

frameset-highlight-menu

Steps:

  1. Create an iframe page in Dreamweaver.
    Select the menu item, add the linked page and Enter the frame name in the target filed in Menu Item > General.
  2. Set the icon for the menu item by type the image’ path in Menu Item Settings > Icon; set the background image in Menu Item > Background; and set the border in Menu Item > Border.
  3. Set the global properties for the whole menu. Check the option “Auto highlight current item”; set text color, Bg colcor, border color, Bg image and icon as the highlighted items style; and check “Clear highlighted item’s link” and “Highlight parent menu item” for the menu in Global > Highlight.

It is time to design new style for your website. With festival arrival, special day coming, website designers will work out new style to dress up the existing website. When web has been changed its style to new one, it is obviously outdated if navigation menu still keeps unchangeable.  For website that needs to transform frequently, you should solve the problem about how to build navigation menu to match with versatile website styles. To get perfect visual effect between website and navigation, you need to edit two elements in navigation menu, background image or color. Let’s see how Sothink DHTML Menu create navigation menu:

Step 1: Add Menu Items to scheme structure for navigation menu

Launch Sothink DHTML Menu, you can add menu item on the left panel. First, check one menu item; and then, choose the button to add the same-level menu items or sub-level menu items; final, click once to add one menu item, and click more add more.

navigation menu builderStep 2: Apply menu style from templates to navigation menu

After menu structure is done, you can edit the menu item, including text, link, and font. To quick Apply the menu style from template, you can choose “Template > Apply template to menu” command to apply template style to your navigation menu.

drop down menuStep 2: Publish navigation menu to website

Menu creation is finished. Click the button “Publish” to choose the best publishing method. After the option is check, you can follow the step to publish your navigation to website. And upload all the resources for navigation menu.

navigation menu