The CSS3 navigation properties example (nav-index, nav-down, nav-up, nav-left, nav-right)

<!DOCTYPE html>
<html>
<head>
<style type="text/css">
p {
    width:80%; margin:2%; padding:2%px;  
}
button {
    position: absolute;
    width:30%; height:30px; overflow:hidden;
    margin:4%;
    font-family:serif; font-size:16px;
    border:2px outset rgba(100,255,100,0.5); border-radius:4px;
    background-color:rgba(100,255,100,0.2);
}

button#b1 {
    top: 20%; left: 25%;
    nav-index: 1;
    nav-right: #b2; nav-left: #b4;
    nav-down: #b2; nav-up: #b4;
}

button#b2 {
    top: 40%; left: 50%;
    nav-index: 2;
    nav-right: #b3; nav-left: #b1;
    nav-down: #b3; nav-up: #b1;
}

button#b3 {
    top: 60%; left: 25%;
    nav-index: 3;
    nav-right: #b4; nav-left: #b2;
    nav-down: #b4; nav-up: #b2;
}

button#b4 {
    top: 40%; left: 0%;
    nav-index: 4;
    nav-right: #b1; nav-left: #b3;
    nav-down: #b1; nav-up: #b3;
}
 /* ADD proprietary selectors if needed */
</style>
</head>
  
<body>

<button id="b1">top</button>
<button id="b2">right</button>
<button id="b3">bottom</button>
<button id="b4">left</button>

<p>Hold down the <strong>Shift Key</strong> while navigating with the arrow keys.</p>


</body>
</html>

The CSS3 navigation properties example (nav-index, nav-down, nav-up, nav-left, nav-right)

Comments

About

Contact

Get Connected