To effectively browse your website, the web page views need to know the orientation of their site. This is the importance of using visual feedback to provide the current page on the site.
For viewers who use homepages into your web page, if they use your navigation to access the page step by step, give them feedback to provide them with great convenience, which is to ensure that they arrive. The page is your own destination. However, some visits will use their browsing record (and "Back" button on the browser "to track the pages they visit.
When those who visit your page are the link to your website by linking your website, or from the site that does not provide the start point information. This way, they can only find their information through the navigation bar on your website. The navigation bar of your website is just like a map on your website, but when the viewer can't find the location of their current location, even if it provides the best map, it is useless. That's why you need to provide you with visual feedback, so they can locate their position in your website.
Positioning tool
In order to achieve the purpose of positioning visitors in your website, some network designers use Breadcrumbs, and Breadcrumbs lists a range of links that users have access to the current page. For large websites, it is very effective to handle complex navigation transactions, but use it for some small websites, it is small.
There is a simplest, but very and effective tool, can locate the current page of the visitor, is to highlight the button in the navigation bar, just like it is displayed in Figure A. This highlighted button can provide the same functionality as the you are here pointer in the mall.
One advantage of using the you are here button processing scheme is very effective. Because it is part of the navigation bar, and the navigation bar is already a must-have component of your web page, then you don't need to create any extra pages to the positioning tool. Moreover, the viewers have become accustomed to from the navigation bar. Get information.
Create a style using CSS to your Are Here button
Perhaps
CSS
The easiest way to create a style for your Are Here button is to create a separate class rule for your Are Here buttons and apply this class rule to the current page button on your navigation bar.
In the previous column, I introduced how to create a CSS navigation bar. The following code example shows how you start, and show how to add a highlighted effect to the current page button.
Div # menu {
Height: auto;
Width: 150px;
Color: #fffff;
}
Div # Menu Li {
HEIGHT: 40PX;
Width: 125px;
Margin: 10px;
Font-Family: Arial, Helvetica, Sans-Serif
Font-size: small;
TEXT-ALIGN: CENTER;
LINE-HEIGHT: 250%;
List-style-type: none;
BACKGROUND-color: # 003399;
Border: 1px solid # 000000;
}
Div # menu Li a {
Display: block;
Width: 100%;
HEIGHT: 100%;
Text-decoration: none;
}
Div # Menu Li A: Link, Div # Menu Li A: visited {
Font-weight: Normal;
Color: #fffff;
}
Div # Menu Li A: Hover {
Font-weight: bold;
Color: #fffff;
TEXT-DECORATION: underline;
}
Div # menu li.youarehere {color: # 000099;
Background-color: # 66ccff;
}
Below is a Markup for the three sets of buttons. In the following example, the current page corresponds to the button 2.
Note that here, the Div # Menu Li.YouareHere rules modify the original text color and background color of the original definition in the Div # MENU Li rules. This makes the current page button highlights and makes it visually different from other buttons in the navigation bar.
In Markup, add a class class = "youareHere" to the appropriate button in the label
CSS
It is simplified, as this can save trouble of various Pseudoclasses definition rules under the label and YOUAREHERE classes.
