KIẾN THỨC

Web 2.0 và rủi ro trong bảo mật
Dựa trên các kết quả nghiên cứu và theo dõi tình hình an ninh trên nền web 2.0, Dan Hubbard, CTO của Websense đã đưa ra các nhận định mà các cơ quan, tổ chức, doanh nghiệp cần chú ý để bảo vệ thông t

Hướng dẫn nối hai laptop bằng wireless
Ở bước này bạn cần thực hiện trên cả 2 máy để cho chúng cùng lớp IP với nhau. Thực hiện như sau:

Ajax và asp.net upload file ( không xài dll hổ trợ)
Để upload được dữ liệu từ client bạn cần phải dùng hàm javascript để lấy dữ liệu trong thư mục client mà truyền lên cho sever. và sau đó sever sẽ dùng hàm Reuqest.Files để nhận chuỗi dữ liệu file tru

DANH NGÔN

Có 3 thứ ngu dốt: không biết những gì mình cần biết, không rành những gì mình biết và biết những gì mình không cần biết

La Rochefoucould
Trang chủ » Thư viện Tutorial » Học CSS - Javascript

Flyout Menu với CSS ( 1632 lượt xem )

thiet ke websiteFlyout Menu với CSS

Giống như Drop Down menu Flyout menu cũng được sử dụng rộng rãi trên nhiều trang web. Đặc biệt là những trang web có nhiều nội dung và cần nhiều tầng menu để trình bay hết nội dung. Bài viết này sẽ hướng dẫn bạn cách tạo ra flyout menu hoàn toàn bằng CSS.


Để làm được menu như trên bạn có thể làm theo hướng dẫn dau
Bạn tạo file style.css có nội dung như sau
 
01 * {margin: 0; padding: 0}
02  
03 div#wraper {width: 500px; margin: 40px auto; line-height: 2em; font-family: helvetica, arial, tahoma; font-size: 12px;}
04  
05 div#mainNav {width: 200px;}
06  
07 div#mainNav h1 {font-size: 14px; background: #3883cc; color: white; text-align: center; -moz-border-radius: 5px 5px 0px 0px; }
08  
09 div#mainNav ul { list-style: none; border: 1px solid #bccbd8; }
10  
11 div#mainNav ul li { position: relative; border-bottom: 1px solid #bccbd8; }
12  
13 div#mainNav ul li a { color: #1e5b7e; text-decoration: none; padding: 5px;}
14  
15 div#mainNav ul li a:hover {text-decoration: underline;}
16  
17 div#mainNav ul li ul { position: absolute;top: -1px;left: 198px;display: none;}
18  
19 div#mainNav ul li:hover ul {display: block; width: 100%;}

 Tiếp theo trong trang html bạn tạo nội dung như sau:

01 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
03 <head>
04     <meta http-equiv="Content-type" content="text/html; charset=utf-8">
05      <link rel="stylesheet" href="style.css" type="text/css" media="screen" title="no title">
06     <title>Fly Out menu</title>
07      
08 </head>
09 <body>
10     <div id="wraper">
11         <div id="mainNav">
12             <h1>Main Menu</h1>
13             <ul id="nav">
14               <li><a href="#">Trang Chủ</a></li>
15               <li><a href="#">Tác giả &raquo;</a>
16                 <ul>
17                   <li><a href="#">Tác giả A</a></li>
18                   <li><a href="#">Tác giả B</a></li>
19                   <li><a href="#">Tác giả C</a></li>
20                 </ul>
21               </li>
22               <li><a href="#">Tutorial &raquo;</a>
23                 <ul>
24                   <li><a href="#">Web Design</a></li>
25                   <li><a href="#">Photoshop</a></li>
26                   <li><a href="#">Hosting</a></li>
27                   <li><a href="#">Domain Names</a></li>
28                   <li><a href="#">CSS</a></li>
29                 </ul>
30               </li>
31               <li><a href="#">Liên hệ &raquo;</a>
32                 <ul>
33                   <li><a href="#">Demon Warlock</a></li>
34                   <li><a href="#">Frost Mage</a></li>
35                   <li><a href="#">Descipline Priest</a></li>
36                   <li><a href="#">Furry Warrior</a></li>
37                 </ul>
38               </li>
39              
40             </ul>
41         </div>
42     </div>
43 </body>

Phuc Thinh Website

Thư viện Template | Website template

Template Computer No 10
Template Computer No 10
Template Hotel No.4
Template Hotel No.4
Template Beauty No.14
Template Beauty No.14
Template Fashion No.4
Template Fashion No.4
Template Beauty No.7
Template Beauty No.7
Template Education No.8
Template Education No.8
Template Jewelry No.10
Template Jewelry No.10
Template Beauty No.10
Template Beauty No.10
Template Art & Photography  No.1
Template Art & Photography No.1
Template Beauty No.9
Template Beauty No.9
Template Art & Photography  No.8
Template Art & Photography No.8
Template Wedding No.6
Template Wedding No.6
«123»
Số lượt truy cập web: 1,353,556 - Trong tháng này: 310,389 - Khách truy cập hôm nay: 99 - Số người đang online: 09.Developed by Phuc Thinh