• fans
  • 1036 reader
  • followers
Tạo menu 3 trạng thái
  • Tutorial Details
  • Độ khó: Căn bản
  • Thời gian: 19:53 phút
  • File size: 40 Mb
  • Yêu cầu: Phù hợp cho tất cả các đối tượng lập trình viên

Menu ba trạng thái là dạng menu khi không có ai click nó một màu, khi người dùng dùng di chuột lên nó, no biến sang trạng thái khác và khi người dùng đang ở một trang, trạng thái liên quan đến trang đó sẽ được hiển thị. Có 2 cách bạn có thể dùng để tạo ra hiệu ứng này. Song với cách được chỉ ra trong video dưới đây sẽ tiết kiệm được tài nguyên máy chủ hơn và cũng nhanh hơn.

Demon Warlock Website facebook twitter user_email

Tôi được sinh ra ở Việt Nam, nhưng hiện tại đang sống và làm việc tại Mỹ. Ngành tôi học không có liên quan gì đến thiết kế web. Nhưng đây là sở thích từ ngày còn là sinh viên du học, do vậy bây giờ dù cho đang đi làm nhưng tôi vẫn thích dùng thời gian rảnh rỗi của mình để học về thiết kế web. Như các bạn, tôi cũng việc mày mò tự học và khám phá.

  • Nguyen Hoang Huy

    Nếu là menu động thì làm sao add class cố định cho thẻ a.
    Xin cho mình hỏi nếu là menu động thì làm sao làm được như vậy

    • http://minhman.com/ Võ Minh Mẫn

      Menu động thì mình phải sử dụng php để add class thôi. Chủ yếu là dùng if và else
      Nếu tôi ở trang chủ thì add class ‘index’ và ‘active’
      hoặc nếu các trang #,….

  • kishin douji zenki

    anh dw oi cho em hoi la em co tao mot the div va dinh dang cho the div het roi nhung den luc chen the list vao thì các van ban trong the list no khong nam trong the div ma no cứ chụt xuống phía dưới thì là bị làm sao và khắc phục như thế nào ạ… em cảm ơn anh… Demon Warlock…..

  • trần thế anh

    anh DW cho em hỏi, tại sao em code css xong, cái drop-down menu nhưng mỗi khi hover thì kích thước nó thay đổi chứ ko cố định như anh anh làm.
    /*MAIN STRUCTURE*/
    #page-waper{
    margin: 0 auto;
    width: 100%;
    }
    #main-menu{
    background: url(images/menu_bg.png) no-repeat top;
    width: 100%;
    height:150px;
    }
    #menu-page-menu{
    width: 960px;
    margin: 0 auto;
    padding: 30px 0px 0px 0px;
    }
    #menu-page-menu li{
    float: left;
    position: relative;
    }
    #menu-page-menu li a{
    display:block;
    color:#4b4b4b;
    font-size: 16px;
    padding: 5px 10px;
    float: left;
    }
    #menu-page-menu li a:hover{
    color: white;
    background-color: #ab1088;
    border: 3px white double ;
    }
    #menu-page-menu li ul{
    display:none;
    position:absolute;
    top: 100%;
    z-index:1000;
    }
    #menu-page-menu li:hover ul{
    display:block;
    width:100%;
    }
    #menu-page-menu li ul li{
    background-color:#ab1088 ;
    color: #cfcfcf;
    width:100%
    }
    #menu-page-meu li ul a{
    float: none;
    font-size: 12px;
    border-bottom: 1px solid white;
    border-top: 1px solid white;
    }
    #menu-page-menu li ul a:hover{
    background-color:#ab1088;
    color: white;
    font-weight: bolder;
    font-size:12px;
    }
    // nếu anh có chút thời gian có thể nói rõ hơn về margin và padding đc ko? thật sự em bị bấn loạn vấn đề này, nhất là khi ứng dụng vào những đoạn ko có text @@

    thân DW!

    • phạm thị hòa

      hi. Cần xem lại Video. Đưa *{margin:0px; padding:0px;} về mặc định

  • Shikamaru

    anh DW cho em hỏi nếu button có nhiều hơn 3 trạng thái thì làm sao ạ. Khi đó có cần phải xác định rõ vùng nào của background hiển thị lên bằng giá trị px ở vị trí x, y không. Chứ trong trường hợp này làm sao mà dùng top, center gì đó được ạ?
    Em cảm ơn anh nhiêu!

    • Bùi Mạnh Cường

      Bạn tham khảo đường link này để hiểu về background-position nhé: http://www.w3schools.com/cssref/playit.asp?filename=playcss_background-position

      Theo mình hiểu sẽ có tối đa 9 trạng thái mình có thể thêm vào được đấy (nếu chỉ dùng top, center, left). Còn dùng px thì tất nhiên không giới hạn trạng thái rồi.

      Anh DW confirm giúp xem e hiểu thế có đúng không với, thanks anh!

  • Quang

    Anh DW ơi cho em hỏi. Em muốn làm một menu như ở trang web này phải làm thế nào?
    http://phutin.com.vn/vn/trang-chu/
    Em đã cố gắng sử dụng three state menu nhưng không được.hx

    • xuykaa

      ban su dung unltra menu lam dc het nho tai unltra menu+crack nha.ko co pm mình

  • NgaTuyết

    Mình xài cái text e-editor nhưng ko biết cách làm hiện ra các Folder ở cột bên trái . các bạn chỉ cách m với , tks nhieu nhieu

  • pham duy

    anh oi cho em hoi .neu ma dung bang php thi no chi co 1file la menu.php chang han. nhung khi trong menu cua anh la dung 3 trang HTML va o the body no co mot cai id=”home”.nhung neu la php thi chi can 1 file .the cai trang thai khi nguoi ta dang o trang day , lam sao no hien thi duoc dau tich o day .

  • Hà sa trường

    anh à, hướng dẫn em cách cài CSS với, hix, Em ko biết phải cài thế nào nữa

    • Phạm Tuấn Thanh

      CSS không phải phần mềm, không cần cài nha bạn. Bạn chỉ việc gõ code vào notepad chẳng hạn, lưu lại dưới dạng đuôi .css.
      Còn code thế nào thì bạn có thể học hỏi qua các video hướng dẫn của anh DW.
      Chúc bạn thành công nha

  • http://bokute.com bokute

    Oh Thanks anh về cái nỳ, đang cần :)
    Tự nhiên lại có hứng làm 1 website tĩnh :))

  • Võ Tường Thọ

    Anh DW ơi, cho em hỏi chút, em thấy trong tut của anh các thẻ lồng nhau như thế này , lúc em học ở trường, thầy khuyến cáo không nên làm như thế, như vậy có vấn đề gì không hả anh, cá nhân em nghĩ thì không nên để lồng nhau như vậy ạ?>”<

    • Võ Tường Thọ

      ôi trời, mấy cái thẻ em để vào bị trình duyệt làm cho mất tiêu rồi, ý em là thẻ list và thẻ a trong tut nha a ^^

  • http://mientay.tk Hyson Thúc Thúc

    Anh DW ơi!, anh giúp mọi người làm menu 4 trạng thái được không? nghĩa là cái menu 3 trạng thái của anh sẽ thêm 1 trạng thái nữa là menu nào xem qua rồi thì nó đỗi màu khác (tối hơn) giống như trang google vậy đó, trang nào end user vào rồi thì sau này gặp lại thì họ biết là vào rồi. (link có màu tối hơn)

    • http://www.izwebz.com Demon Warlock

      Cái đó là trạng thái visited, e co thể khai báo trong CSS với a:visited. Khi khai báo link phải theo trình tự link, over, hover và visited.

  • http://bearsharks.com Clackken Smith

    Quá trình này thì tôi nhớ DW đã có một bài viết về các bước để hình thành một website rồi. Còn các bước đưa lên thì không có gì nhiều, bạn có hosting, domain code . Chỉ vậy là đủ thôi.

  • http://Chưacó Thắng

    Anh DW ơi anh có thể làm 1 video tutorial hướng dẫn cách đưa 1 trang wed lên mạng được không.

    • http://bearsharks.com Clackken Smith

      Đưa lên mạng là sao em ?

      • Nguyễn bình Tú

        Tôi cũng đang mong video tutorial hướng dẫn đua 1 trang web lên net , rất cám ơn các bạn về những nhiệt tình và tạo ra trang web này

  • nhtera

    Đọc trong này : http://www.izwebz.com/faqs/ có hết cái bác cần hỏi rồi :D

  • http://hienvic.tk phan van Hiến

    anh admin ơi(anh viết bài này) cho hỏi phần mềm dùng để làm CSS tên là gì vậy? có thể gửi link cho em dowload được ko ah? thanks

  • http://www.izwebz.com Demon Warlock

    Nếu nằm ngang thì thay vì xếp cạnh nhau em xếp chồng lên nhau. Nút sẽ hover qua nằm dưới, trạng thái thường nằm trên. Rồi set bachground top center cho nút thường, và bottom center cho hover.

  • Binhdtx

    Đối với 5 tấm hình nằm ngang khi tạo hiệu ứng hover thì mình sẽ làm như thế nào anh DW nhỉ ? chưa hình dung lắm

Newbie

Các series nên xem trên izwebz cho newbie

Khi vào izwebz chắc nhiều bạn cho rằng các bài viết trên izwebz đều không có hệ thống gì cả? Thực chất, các bài biết đều đi theo một series của riêng nó, ví dụ như PHP, HTML & CSS, PSD2HTML, Photoshop, illustrator,… Trong bài viết này, mình sẽ tổng hợp lại các series bài viết cần thiết cho một newbie.

Izwebz facebook group

Social connect

Recent Comments

Archives