Navigation Bars
A navigation bar is a navigation header that is placed at the top of the page.
<nav class="w3-topnav w3-green">
<a href="#">Home</a>
<a href="#">Link 1</a>
<a href="#">Link 2</a>
<a href="#">Link 3</a>
<a href="#">Link 4</a>
</nav>
<a href="#">Home</a>
<a href="#">Link 1</a>
<a href="#">Link 2</a>
<a href="#">Link 3</a>
<a href="#">Link 4</a>
</nav>
Side Navigation
With side navigation, you have several options:
- Always display the navigation pane to the left of the page content.
- Open the navigation pane, hiding the left part of the page content.
- Open the navigation pane, hiding all of the page content.
- Shift the page content to the right, when opening the navigation pane.
This example opens the navigation pane, hiding a part of the page content:
<nav class="w3-sidenav w3-black w3-card-2" style="display:none" id="mySidenav">
<a href="#">Link 1</a>
<a href="#">Link 2</a>
<a href="#">Link 3</a>
<a href="#">Link 4</a>
<a href="#">Link 5</a>
</nav>
<a href="#">Link 1</a>
<a href="#">Link 2</a>
<a href="#">Link 3</a>
<a href="#">Link 4</a>
<a href="#">Link 5</a>
</nav>
function w3_open() {
document.getElementById("mySidenav").style.display = "block";
}
function w3_close() {
document.getElementById("mySidenav").style.display = "none";
}
完整的例子如下:
<!DOCTYPE html>
<html lang="en">
<title>W3.CSS Case</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css">
<body>
<nav class="w3-sidenav w3-black w3-card-2 w3-xlarge" style="display:none" id="mySidenav">
<a href="javascript:void(0)" onclick="w3_close()"
class="w3-closenav w3-right w3-padding-right">×</a><br>
<a href="#">Link 1</a>
<a href="#">Link 2</a>
<a href="#">Link 3</a>
<a href="#">Link 4</a>
<a href="#">Link 5</a>
</nav>
<header class="w3-container w3-light-grey">
<span class="w3-opennav w3-xxlarge" onclick="w3_open()">☰</span>
<h1 class="w3-jumbo">My First W3.CSS Website!</h1>
<p class="w3-xlarge">This site will grow as we add more ...</p>
</header>
<div class="w3-row-padding">
<div class="w3-quarter">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
<div class="w3-half">
<p><strong>On a large screen the content will be displayed as a 3-column layout. On a small screen the content will adjust itself into a single-column. Resize the browser window to see the effect.</strong></p>
</div>
<div class="w3-quarter">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
</div>
<footer class="w3-container w3-light-grey">
<p>This is my footer</p>
</footer>
<script>
function w3_open() {
document.getElementById("mySidenav").style.display = "block";
}
function w3_close() {
document.getElementById("mySidenav").style.display = "none";
}
</script>
</body>
</html>
===============================================================
W3.CSS Material Design
Material Design was designed by Google in 2014 and has later been adopted in many Google application.
Material Design uses elements that remind us of paper and ink. In addition the elements have realistic shadows and hover effects.
Material Design Look Using W3.CSS
W3.CSS is the perfect stylesheet for designing applications with a "Material Design" look:
<!DOCTYPE html>
<html>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css">
<link rel="stylesheet" href="http://www.w3schools.com/lib/w3-theme-blue-grey.css">
<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.min.css">
<body class="w3-theme-l4">
<div style="min-width:400px">
<ul class="w3-navbar w3-large w3-theme-d4">
<li><a href="#"><i class="fa fa-bars"></i></a></li>
<li class="w3-navitem">DOWNLOADS</li>
// 右邊的search icon
<li class="w3-right"><a href="#"><i class="fa fa-search"></i></a></li>
</ul>
<div class="w3-container w3-content">
<p class="w3-opacity"><b>Today</b></p>
<div class="w3-panel w3-white w3-card-2 w3-display-container">
<span class="w3-display-topright w3-padding w3-hover-red">X</span>
<p class="w3-text-blue"><b>email.zip</b></p>
<p>http://www.w3schools.com/lib/email.zip</p>
<p class="w3-text-blue">Show in folder</p>
</div>
<p class="w3-opacity"><b>Yesterday</b></p>
<div class="w3-panel w3-white w3-card-2 w3-display-container">
<span class="w3-display-topright w3-padding w3-hover-red">X</span>
<p class="w3-text-blue"><b>email.zip</b></p>
<p>http://www.w3schools.com/lib/email.zip</p>
<p class="w3-text-blue">Show in folder</p>
</div>
<div class="w3-panel w3-white w3-card-2 w3-display-container">
<span class="w3-display-topright w3-padding w3-hover-red">X</span>
<p class="w3-text-blue"><b>email.zip</b></p>
<p>http://www.w3schools.com/lib/email.zip</p>
<p class="w3-text-blue">Show in folder</p>
</div>
</div>
</div>
</body>
</html>
沒有留言:
張貼留言