Shulou(Shulou.com)06/01 Report--

This article mainly explains "the method of designing css3 navigation index". Interested friends may wish to have a look. The method introduced in this paper is simple, fast and practical. Next let the editor to take you to learn "css3 navigation index design method" it!

HTML is the tabindex attribute defined for the form tag, which specifies the sequence number for the current element to navigate in the current document. The sequence number of the navigation can change the order in which the elements on the page gain focus through keyboard operations. This attribute can exist in nested page elements.

Define navigation order

Css3 adds the nav-index attribute and replaces the tag attribute tabindex. In order for browsers to get focus in order, page elements need to follow the following rules:

1. This element supports the nav-index attribute, and elements that are included in the positive integer attribute value will be navigated first. The browser navigates in the order from the lowest to the largest value of the nav-index attribute. Property values do not have to be in order or start with a specific expected value. Elements with the same nav-index attribute value are navigated in the order in which they appear in the document stream.

two。 Elements that do not support the nav-index attribute, or if the nav-index attribute becomes automatic, are navigated in the order in which they appear in the document stream.

3. For those local elements, they will not participate in the sorting of navigation.

The shortcut keys for navigating and activating page elements depend on the browser's settings; for example, the Tab key is usually used to navigate sequentially, while the Enter key is used to activate the invoked element. When navigating to the end of the sequence with the Tab key

Or at the beginning, the browser may cycle to the beginning or end of the navigation sequence. Pressing Shift + Tab is usually used for reverse navigation.

The basic syntax for the nav-index attribute is as follows.

The initial value of the nav-index property is automatic and applies to all available elements. The values are briefly described as follows.

Auto: the default order of browsers.

Must be a positive integer that specifies the navigation order of the elements L means to be navigated first. When multiple elements have the same nav-index value, navigate in the order of the documents.

Inherit: inherit from.

For the following form example, the traditional practice is to use the tabindex property to change the keyboard activation and response order of the form input, and now use nav-index to adjust the keyboard influence order of the form field directly in the CSS style sheet, where the css style code is as follows:

Body {background-color:#F7F7F7;}

Fieldset {

Border:1px dashed # CCC

Fill: 10px

}

Legend {

Font-family:Arial,Helvetica,sans-serif

Color: # fff

Background: # 666

Border: 1px solid line # 333

Fill: 2px 6px

}

Label {

Width: 142 pixels

Height: 32px

Margin: 3px 2px 0 0

Fill: 11px 0 0 6px

Floating: left

Color: # 666

Text-align:right

}

. Form {

Deposit: 0

Fill: 0

}

# leftSide {

Width: 530px

Padding-top:30px

Floating: left

}

. Div_texbox {

Width: 347px

Floating: yes

Background color: # E6E6E6

Height: 35px

Top of margin: 3px

Padding-top:5px

Padding-bottom:3px

Padding-left:5px

}

. Text box {

Background-image:url (images / 16t.gif)

Background repetition: no repetition

Background position: left

Width: 285 pixels

Font: normal 18px Arial

Color: # 999999

Fill: 3px 5px 3px 19px

}

. User name: focus. User name: hover {background-color:#F0FFE6;}

. Button_div {

Width: 287px

Floating: yes

Text-align:right

Height: 35px

Top of margin: 3px

Fill: 5px 32px 3px

}

. Button {

Padding:6px 14px

Border: 2px solid

Border color: # FFF # d8d8d0 # d8d8d0 # FFF

Background: # e3e3db

Color: # 989070

Font-weight: bold

}

Enter. Nav1 {nav-index:1;}

Enter. Nav2 {nav-index:2;}

Enter. Nav3 {nav-index:3;}

Enter. Nav4 {nav-index:4;}

Enter. Nav5 {nav-index:5;}

Define the key control order

The alternating four arrow keys of the input device will control the focus switching of the elements according to the document flow order, but in order to have a better user experience, CSS3 defines the control order direction key characteristic of the switching focus. It is mainly implemented by four attributes:

Navigation: controls the up arrow key.

Nav-right: controls the right arrow key.

Nav-down: controls the down arrow key.

Nav-left: controls the left arrow key.

The basic syntax for these properties is as follows.

The initial values of these attributes are automatic and apply to all available elements. The values are briefly described as follows.

Auto: according to the order preset by the browser.

To toggle the id naming of the element

Root |: this parameter cannot be named with "_", indicating the switching of element focus between frameset target pages. If the specified target page does not exist, it is replaced with the focus of the current page, which means that it is completely dependent on the frame page. This attribute

Marked by the key "root", the browser will target the entire frame as a frame page.

Inheritance: inheritance.

The following example shows how to correctly define the order of keyboard control keys and understand the general methods of these keyboard directional key style controls. Bottom, left

For the buttons on the side and on the right, you can press the direction key directly. When you press different direction keys, you will change the position automatically and display the corresponding button.

The complete code is as follows:

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.