Ref : http://www.w3schools.com/w3css/w3css_dropdowns.asp

Dropdown Hover

The w3-dropdown-hover class defines an hoverable dropdown element.

The w3-dropdown-content class defines the dropdown part to be displayed.

<div class="w3-dropdown-hover">
  <button class="w3-btn w3-red">Hover Me!</button>
  <div class="w3-dropdown-content w3-border">
    <a href="#">Link 1</a>
    <a href="#">Link 2</a>
    <a href="#">Link 3</a>
  </div>
</div>

Menu Dropdown

The w3-dropdown-hover class is perfect for dropdown navigation menus.

You will learn more about navigation bars in a later chapter.

<!DOCTYPE html>

<html>

<h2>Navigation Bar with Dropdown</h2>

<p>Add a dropdown menu inside the navigation bar:</p>

<a href="#">Dropdown <i class="fa fa-caret-down"></i></a>

</div>

</li>

</ul>

<p>Tip: You will learn more about navigation bars in a later chapter.</p>

</body>

</html>

===================================================================

Clickable Dropdown

The w3-dropdown-click class is similar to w3-dropdown-hover, except that the dropdown is opened by JavaScript.

<!DOCTYPE html>

<html>

<h2>Clickable Dropdown</h2>

<p>Click on the button to open the dropdown menu.</p>

<button onclick="myFunction()" class="w3-btn">Button</button>

</div>

function myFunction() {

var x = document.getElementById("Demo");

if (x.className.indexOf("w3-show") == -1) {

x.className += " w3-show"; // 加入 w3-show 的 class css.

// 讓menu 秀出來

} else {

x.className = x.className.replace(" w3-show", "");

}

</script>

=================================================================

Image Dropdowns

Move the mouse over the image: 使用w3-dropdown-hover

<div class="w3-dropdown-hover"><img src="img_fjords.jpg" alt="Monterosso" style="width:20%"> // 先把width 設成20% ...等於是縮圖

<img src="img_fjords.jpg" alt="Norway" style="width:100%"> // 100%

<a href="#" class="w3-border">Visit Norway »</a>

</div>

======================================================================

Card Dropdowns

Move the mouse over one of the cities below:

當你滑鼠移到London 時.... 會跑出下面的圖

<h2>Card Dropdowns</h2>

<p>Move the mouse over "London":</p>

<div class="w3-dropdown-hover">London

<p>London is the capital city of England.</p>

<p>It is the most populous city in the UK.</p>

</div>

Tokyo Paris

Progress Bar Labels

Add a new element inside the "w3-progressbar" to add a label to the progress bar.

Tip: Use the w3-center class to always keep the label centered. If omitted, it will be left aligned.

</div>

</div><br>

</div>

</div><br>

</div>

Dynamic Progress Bar

Use JavaScript to create a dynamic progress bar:

<h2>Dynamic Progress Bar</h2>

</div>

<br>

<button class="w3-btn w3-dark-grey" onclick="move()">Click Me</button>

function move() {

var elem = document.getElementById("myBar");

var width = 1;

var id = setInterval(frame, 10);

function frame() {

if (width >= 100) {

clearInterval(id);

} else {

width++;

elem.style.width = width + '%';

}

</script>

</div>

<br>

Dynamic Progress Bar with Labels

<button class="w3-btn w3-dark-grey" onclick="move()">Click Me</button>

function move() {

var elem = document.getElementById("myBar");

var width = 20;

var id = setInterval(frame, 10);

function frame() {

if (width >= 100) {

clearInterval(id);

} else {

width++;

elem.style.width = width + '%';

document.getElementById("demo").innerHTML = width * 1 + '%';

}

</script>

===========================================================

</div>

<p id="myP">Added <span id="demo">0</span> of 10 photos</p>

<button class="w3-btn w3-dark-grey" onclick="move();this.disabled='true'">Upload Photos</button>

function move() {

var elem = document.getElementById("myBar");

var width = 0;

var id = setInterval(frame, 50);

function frame() {

if (width >= 100) {

clearInterval(id);

document.getElementById("myP").className = "w3-text-green w3-animate-opacity";

document.getElementById("myP").innerHTML = "Successfully uploaded 10 photos!";

} else {

width++;

elem.style.width = width + '%';

var num = width * 1 / 10;

num = num.toFixed(0)

document.getElementById("demo").innerHTML = num;

}

</script>

==========================================================

// 把 id = modal01 的display 的屬性設成 block 就好

<img src="img_fjords.jpg" onclick="document.getElementById('modal01').style.display='block'"class="w3-hover-opacity">

// 預設是none ...所以不會顯現出來
<div id="modal01" class="w3-modal w3-animate-zoom" onclick="this.style.display='none'">
<img class="w3-modal-content" src="img_fjords.jpg">
</div>

===============================================================

Modal Image Gallery

Click on an image to display it in full size:

<div class="w3-row-padding">
  <div class="w3-container w3-third">
    <img src="img_fjords.jpg" style="width:100%" onclick="onClick(this)">
  </div>
  <div class="w3-container w3-third">
    <img src="img_lights.jpg" style="width:100%" onclick="onClick(this)">
  </div>
  <div class="w3-container w3-third">
    <img src="img_mountains.jpg" style="width:100%" onclick="onClick(this)">
  </div>
</div>

<div id="modal01" class="w3-modal" onclick="this.style.display='none'">
  <img class="w3-modal-content" id="img01" style="width:100%">
</div>

// src 在 script 裡面設定
<script>

function onClick(element) {
document.getElementById("img01").src = element.src;
document.getElementById("modal01").style.display = "block";
}</script>

Closing Alerts

To close these containers, click on the X in the upper right corner:

× is an HTML entity that is the preferred icon for close buttons, rather than the letter "x".

Ref : http://www.w3schools.com/w3css/w3css_case.asp

Navigation Bars

A navigation bar is a navigation header that is placed at the top of the page.

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:

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>

<li class="w3-navitem">DOWNLOADS</li>

// 右邊的search icon

</ul>

<p class="w3-opacity"><b>Today</b></p>

<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>

<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-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>

</body>

</html>

Web programming 的研究筆記

2016年9月5日星期一

W3.CSS Dropdowns

Dropdown Hover

Menu Dropdown

Clickable Dropdown

Image Dropdowns

Card Dropdowns

Progress Bar Labels

Dynamic Progress Bar

Dynamic Progress Bar with Labels

Modal Image Gallery

Closing Alerts

w3s css case and material design

Navigation Bars

Side Navigation

W3.CSS Material Design

Material Design Look Using W3.CSS

2016年9月5日 星期一

W3.CSS Dropdowns

Dropdown Hover

Menu Dropdown

Clickable Dropdown

Image Dropdowns

Card Dropdowns

Progress Bar Labels

Dynamic Progress Bar

Dynamic Progress Bar with Labels

Modal Image Gallery

Closing Alerts

w3s css case and material design

Navigation Bars

Side Navigation

W3.CSS Material Design

Material Design Look Using W3.CSS

2016年9月5日星期一