Bạn nên xem qua

Tạo chức năng tăng giảm kích thước font chữ bằng JQuery


24/12/2013






Tạo thiệp chúc mừng năm mới 2014 với Photoshop CS6


22/12/2013






Cách giải quyết lỗi #1045 trong phpMyAdmin


21/12/2013






Hỗ trợ hiển thị hình ảnh Retina trong Joomla với Retina.js


20/12/2013






Vô hiệu hóa chỉnh sửa code cho Theme và Plugin từ trang Admin WordPress


19/12/2013

Nhằm mang lại nhiều bài viết hơn cho các bạn mới bước vào việc học web, mình xin chia sẻ cho các bạn một bài viết tạo menu đơn giản với HTML và CSS3, qua bài viết này, các bạn sẽ biết phải làm gì để có một menu xổ xuống ( Drop down menu ) cũng như định dạng css cho thanh tìm kiếm.

HTML
Chúng ta sẽ có đoạn html để làm menu như sau :

    

        
    

    

        Application
    

    

        Board
    

    

        

            
            
        

    

    

        Options
        

            
Settings

            
Application

            
Board

            
Options

        

    

Trong đoạn html bên trên , chúng ta có sử dụng một đoạn script làprefixfree-1.0.7.js, đoạn script này có chức năng tự động thêm tiền tố vào css cho từng trình duyệt, ví dụ như các bạn khai báo thuộc tính transition như sau :

transition: all 0.15s;

Nếu muốn thuộc tính này chạy trên trình duyệt Chrome, thì thông thường chúng ta thêm tiền tố-webkit- vào sau khai báo mặc định như sau :

transition: all 0.15s;
-webkit-transition: all 0.15s;

Tuy nhiên khi các bạn thêm dòng scriptprefixfree-1.0.7.js thì các bạn không còn phải lo chèn thêm tiền tố nữa, cứ việc khai báo mặc đinh, còn việc chèn tiền tố, thì đoạn script trên đã tự động làm giúp ta tương ứng với từng loại trình duyệt chung cư xuân mai tower IWIN 280 HD. Để hiểu rõ hơn về script này các bạn có thể vào trang chủ của nó tạihttp://leaverou.github.io/prefixfree/.

CSS

Bây giờ chúng ta sẽ định dạng css cơ bản như sau :

@import url(http://fonts.googleapis.com/css?family=Montserrat);

* {
    margin: 0;
    padding: 0;
}

Kế tiếp là thanh menu :

.nav {
    background: #232323;
    height: 60px;
    display: inline-block;
}

.nav li {
    float: left;
    list-style-type: none;
    position: relative;
}

Kế đến làlink

.nav li a {
    font-size: 16px;
    color: white;
    display: block;
    line-height: 60px;
    padding: 0 26px;
    text-decoration: none;
    border-left: 1px solid #2e2e2e;
    font-family: Montserrat, sans-serif;
    text-shadow: 0 0 1px rgba(255, 255, 255, 0.5);
}
.nav li a:hover {
    background-color: #2e2e2e;
}

#settings a {
    padding: 18px;
    height: 24px;
    font-size: 10px;
    line-height: 24px;
}

Thanh tìm kiếm

#search {
    width: 357px;
    margin: 4px;
}
#search_text{
    width: 297px;
    padding: 15px 0 15px 20px;
    font-size: 16px;
    font-family: Montserrat, sans-serif;
    border: 0 none;
    height: 52px;
    margin-right: 0;
    color: white;
    outline: none;
    background: #1f7f5c;
    float: left;
    box-sizing: border-box;
    transition: all 0.15s;
}
::-webkit-input-placeholder { /* WebKit browsers */
    color: white;
}
:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
    color: white;
}
::-moz-placeholder { /* Mozilla Firefox 19+ */
    color: white;
}
:-ms-input-placeholder { /* Internet Explorer 10+ */
    color: white;
}
#search_text:focus {
    background: rgb(64, 151, 119);
}
#search_button {
    border: 0 none;
    background: #1f7f5c url(search.png) center no-repeat;
    width: 60px;
    float: left;
    padding: 0;
    text-align: center;
    height: 52px;
    cursor: pointer;
}

Dropdown

#options a{
    border-left: 0 none;
}
#options>a {
    background-image: url(triangle.png);
    background-position: 85% center;
    background-repeat: no-repeat;
    padding-right: 42px;
}
.subnav {
    visibility: hidden;
    position: absolute;
    top: 110%;
    right: 0;
    width: 200px;
    height: auto;
    opacity: 0;
    transition: all 0.1s;
    background: #232323;
}
.subnav li {
    float: none;
}
.subnav li a {
    border-bottom: 1px solid #2e2e2e;
}
#options:hover .subnav {
    visibility: visible;
    top: 100%;
    opacity: 1;
}

Thế là xong rồi đó các bạn, mặc dù chỉ là những đoạn css bình thường , nhưng sẽ là khởi đầu rất tốt cho các bạn phát triển nghề nghiệp của mình sau này chung cư xuân mai tower.

Chúc các bạn tự tin và thành công !