Thư viện

Sự kiện

Thứ Sáu, tháng 6 28, 2013

Tạo Responsive Dropdown Menu trong Blogger

Tùy chỉnh menu ngang xổ dọc thành dạng menu dropdown phù hợp với điện thoại di động và các kích cỡ màn hình khác nhau. mobile template

Chia sẻ:
Tạo Responsive Dropdown Menu trong Blogger
Trong thiết kế blogger để phần header thích hợp với các trình duyệt khác nhau rất quan trọng và phần quan trọng nhất của header là menu chính cung cấp liên kết hữu ích bên trong của bạn. Hôm nay mình sẽ hướng dẫn cách thiết kế một menu thả xuống linh hoạt cho Blogspot mà không cần sử dụng một scripts hoặc hình ảnh! Phần đặc biệt là nó không chỉ là một trình đơn ngang mà nó có thể biến thành một danh sách thả xuống. Đơn giản chỉ cần sử dụng mã HTML5, thẻ <nav> và CSS3 : bạn có thể kiểm tra tại đây, Mình sẽ giới thiệu một menu của mybloggertricks mà tôi hy vọng sẽ có ích cho cộng đồng blogger vì nó thực sự là một trình đơn hiệu quả đó là tương thích với tất cả các trình duyệt và sử dụng không Jquery!


Các ảnh chụp màn hình dưới đây được chụp bằng iPhone cá nhân của tôi để cung cấp cho bạn một cái nhìn tổng quát về blog của bạn sẽ như thế nào trong các kích cỡ màn hình khác nhau. Menu tự động điều chỉnh chính nó sử dụng CSS3 truy vấn phương tiện truyền thông mà chúng ta đã thảo luận trong phần đầu tiên của loạt bài này.
Tạo Responsive Dropdown Menu trong Blogger
Bạn có thể vào blog demo bên dưới sau đó thu nhỏ chiều ngang của trình duyệt nhỏ lại để xem menu sẽ biến dổi thế nào nha.

VIEW DEMO

»  Bước 1: Tắt trình duyệt mobile mặc định của blogger

1.1- Đăng nhập Blogger
1.2- Bấm vào icon chỉnh sửa ở mục điện thoại di dộng.
Tạo Responsive Dropdown Menu trong Blogger
1.3- Tại mục seleck chọn no.=> Lưu lại và tiến hành bước tiếp theo.

» Bước 2: Thêm Responsive menu vào template

2.1- Vào Mẫu
2.2- Chọn Chỉnh sửa HTML
2.3- Tìm trong template đoạn code như bên dưới (đoạn này thường nằm trước thẻ <head>)
<b:if cond='data:blog.isMobile'>
<meta content='width=device-width, initial-scale=1.0, user-scalable=0' name='viewport'/>
<b:else/>
<meta content='width=1100' name='viewport'/>
</b:if>
- Thay thế nó thành đoạn code bên dưới (Nếu không tìm thấy đoạn code trên thì dán đoạn code bên dưới vào trước thẻ <head>)
<meta content='width=device-width, initial-scale=1, maximum-scale=1' name='viewport'/>
<meta content='text/html; charset=UTF-8' http-equiv='Content-Type'/>
2.4- Dán đoạn code bên dưới trước thẻ: ]]></b:skin>
/*-----Responsive Drop Down Menu by MBT ----*/

body {
margin: 0px;
}
#menu{
background: #50B7DC;
color: #FFF;
height: 40px;
border-bottom: 2px solid #DDD;
box-shadow: 1px 2px 9px #B1B1B1;
border-top: 2px solid #DDD;
}
#menu ul,#menu li{margin:0 auto;padding:0 0;list-style:none}
#menu ul{height:45px;width:1024px}
#menu li{float:left;display:inline;position:relative;font:bold 0.9em Arial;text-shadow: 1px 2px 4px #838383;}
#menu a{display: block;
line-height: 40px;
padding: 0 14px;
text-decoration: none;
color: #FFF;

}


#menu li a:hover{
color: #E4E4E4;
-webkit-transition: all .1s ease-in-out;
-moz-transition: all .1s ease-in-out;
-ms-transition: all .1s ease-in-out;
-o-transition: all .1s ease-in-out;
transition: all .1s ease-in-out;
background: #5FC6EB;
}
#menu input{display:none;margin:0 0;padding:0 0;width:80px;height:30px;opacity:0;cursor:pointer}
#menu label{font:bold 30px Arial;display:none;width:35px;height:36px;line-height:36px;text-align:center}
#menu label span{font-size:16px;position:absolute;left:35px}
#menu ul.menus{
height: auto;
overflow: hidden;
width: 170px;
background: #50B7DC;
position: absolute;
z-index: 99;
display: none;
}
#menu ul.menus li{

display: block;
width: 100%;
font:normal 0.8em Arial;
text-transform: none;
text-shadow: none;
border-bottom: 1px dashed #31AFDB;

}
#menu ul.menus a{
color: #FFF;
line-height: 35px;
}
#menu li:hover ul.menus{display:block}

#menu ul.menus a:hover{
background: #5FC6EB;
color: #FFF;
-webkit-transition: all .1s ease-in-out;
-moz-transition: all .1s ease-in-out;
-ms-transition: all .1s ease-in-out;
-o-transition: all .1s ease-in-out;
transition: all .1s ease-in-out;
}

@media screen and (max-width: 800px){

  #menu{position:relative}
  #menu ul{background:#111;position:absolute;top:100%;right:0;left:0;z-index:3;height:auto;display:none}
  #menu ul.menus{width:100%;position:static;padding-left:20px}
  #menu li{display:block;float:none;width:auto; font:normal 0.8em Arial;}
  #menu input,#menu label{position:absolute;top:0;left:0;display:block}
  #menu input{z-index:4}
  #menu input:checked + label{color:white}
  #menu input:checked ~ ul{display:block}

}
» Tùy chỉnh
  • #50B7DC Là màu nền của menu
  • #FFF Là màu chữ hiển thị trên menu chính.
  • 1024px Chiều rộng của thanh menu
  • #5FC6EB Màu sub menu khi rê chuột vào
  • max-width: 800px Khi màn hình có chiều rộng dưới 800px menu tự động chuyển sang dạng dropdown

2.5- Dán code bên dưới sau thẻ <body> hoặc vị trí bạn muốn thêm menu.
<nav id='menu'>
    <input type='checkbox'/>
    <label>&#8801;<span>Namkna&#160;Blog</span></label>
    <ul>
    <li><a href='/'>Home</a></li>
    <li><a href='#'>About</a></li>
    <li><a href='#'>Drop Down <font size='1'>&#9660;</font></a>
    <ul class='menus'>
    <li><a href='#'>Tab 1</a></li>
    <li><a href='#'>Tab 2</a></li>
    <li><a href='#'>Tab 3</a></li>
    <li><a href='#'>Tab 4</a></li>
    <li><a href='#'>Tab 5</a></li>
    <li><a href='#'>Tab 6</a></li>

    </ul>
    </li>
    <li><a href='#'>Contact</a></li>
    <li><a href='#'>Drop Down <font size='1'>&#9660;</font></a>
    <ul class='menus'>
    <li><a href='#'>Tab 1</a></li>
    <li><a href='#'>Tab 2</a></li>
    <li><a href='#'>Tab 3</a></li>
    </ul>
    </li>
    <li><a href='#'>Advertise</a></li>
           </ul>
</nav>
»  Tùy chỉnh:
  • Thay Namkna&#160;Blog thành tiêu đề blog của bạn.Nếu giữa tên có ký tự khoảng trống bạn dùng ký tự &#160; để thay cho dấu cách.
  • Thay các dấu thăng màu đỏ (#) thành liên kết tới bài viết hoặc nhãn của bạn.
  • Bạn có thể dùng nút xổ dọc ▼ bằng các chèn ký tự sau &#9660; .
Dán đoạn mã bên dưới vào sau thẻ <ul> hoặc trước thẻ </ul> để tạo một menu thả xuống.
<li><a href='#'>Drop Down <font size='1'>&#9660;</font></a>
<ul class='menus'>
<li><a href='#'>Tab 1</a></li>
<li><a href='#'>Tab 2</a></li>
</ul>
</li> 
Menu trên sẽ chỉ tạo ra có một danh sách thả xuống và không thả xuống danh sách đa cấp bởi vì nó làm phức tạp các bố trí mẫu trên các thiết bị di động. Giữ nó đơn giản là tốt nhất.

» Cần giúp đỡ?

Trong ví dụ trên, Menu chính sẽ tự động được thiết lập hiển thị khi chiều rộng kích thước màn hình dưới hoặc bằng 800px. Tôi sử dụng hộp kiểm để giới thiệu các hiệu ứng chuyển đổi. Vì vậy, ngay sau khi kích thước màn hình đạt giảm 800px hoặc hơn nữa, các thuộc tính CSS truy vấn phát hiện ra nó và tự động thiết lập chế độ của hộp để kiểm tra và áp dụng các style. Đây là một kỹ thuật thú vị mà chúng tôi sử dụng ở đây mà loại bỏ sự cần thiết cho chức năng chuyển đổi JQuery.

Tôi đã sử dụng chỉ có hai điểm break quan trọng và đó là chiều rộng: 1024px cho màn hình máy tính để bàn và 800px cho các thiết bị bao gồm máy tính bảng, iPad và điện thoại thông minh. Vì vậy, toàn bộ quá trình được thực hiện rất dễ dàng. Mình chắc chắn những người hiểu các hướng dẫn ở trên sẽ thấy nó thực sự thú vị để tùy chỉnh nhiều hơn nữa và thêm các yếu tố thêm vào menu giống như một hộp tìm kiếm đáp ứng ở góc hoặc một biểu tượng RSS, vv

Xin vui lòng cho tôi biết nếu bạn muốn bất kỳ trợ giúp ở đây. Tôi hy vọng kỹ thuật này sẽ tiếp tục giúp các nhà phát triển để tạo ra các mẫu blogger thú vị hơn và đóng góp nhiều hơn cho cộng đồng thế giới blog. Tôi rất thích nghe phản hồi của bạn về điều này. Xin vui lòng cho chúng mình biết quan điểm quý báu của bạn để chúng tôi có thể cải thiện nó hơn nữa nếu cần thiết.

78 nhận xét:

  1. hay vậy,để tôi bóc tem thử xem .thanks nhìu

    Trả lờiXóa
    Trả lời
    1. Nhớ cho mình biết kết quả nha :)

      Xóa
  2. em làm xong 7 cái menu nó không nằm trên 1 hàng, 1 cái chạy xuống dưới giờ phải làm sao anh.giúp em với.thanks

    Trả lờiXóa
    Trả lời
    1. Do tiêu đề các menu quá dài em nên đặt tên ngắn thôi nha để tránh bị xuống dòng.

      Xóa
  3. anh ơi, cái dấu # em thay bắng nhãn nhưng khi test ko được nó kêu trang ko tồn tại

    Trả lờiXóa
    Trả lời
    1. Dấu thăng em phải thay bằng link nhãn ví dụ như sau:

      Trước khi thay

      <li><a href='#'>Tab 1</a></li>

      sau khi thay:

      <li><a href='http://namkna.blogspot.com/search/label/Blogspot-tips'>Tab 1</a></li>

      Xóa
  4. mình muốn làm như của namkna mà không biết làm thế nào,blog của mình có menu rồi không muốn thay nó ,chỉ muốn thêm menu thả xuống như của namka vừa mới thay đấy

    Trả lờiXóa
    Trả lời
    1. Chỉ cần thay id class trong xml và trong đoạn sau:

      @media screen and (max-width: 800px){

      #menu{position:relative}
      #menu ul{background:#111;position:absolute;top:100%;right:0;left:0;z-index:3;height:auto;display:none}
      #menu ul.menus{width:100%;position:static;padding-left:20px}
      #menu li{display:block;float:none;width:auto; font:normal 0.8em Arial;}
      #menu input,#menu label{position:absolute;top:0;left:0;display:block}
      #menu input{z-index:4}
      #menu input:checked + label{color:white}
      #menu input:checked ~ ul{display:block}

      }

      Xóa
    2. Nhận xét này đã bị quản trị viên blog xóa.

      Xóa
  5. làm sao để ẩn mọi tiện ích, chỉ chừa lại cái menu
    để chèn ứng dụng vào
    như trang này vậy!!!
    http://namkna.blogspot.com/p/photo-editor-online-photoshop-online_24.html

    thanks bạn!

    Trả lờiXóa
    Trả lời
    1. Bạn xem bài này nha: Tên

      Xóa
    2. http://namkna.blogspot.com/2012/02/sidebar-khi-xem-bai-viet.html

      Xóa
  6. thanks pạn!!^^
    nhưng hình như nó chỉ ẩn sidebar thui,
    và nó áp dụng cho toàn bộ pài viết thì phải,!!
    làm sao để thực hiện chỉ với những pài chỉ định,
    và ẩn lun cả phần phía trên và dưới lun như trang này của pạn vậy!?
    http://namkna.blogspot.com/p/photo-editor-online-photoshop-online_24.html
    thanks pạn!

    Trả lờiXóa
    Trả lời
    1. Bạn muốn ẩn phần nào chỉ cần tìm ID và CLASS phần đó sau đó dán vào cú pháp sau:

      #ID,.CLASS{display:none !important}
      #main-wrapper{width:100% !important}


      ví dụ:

      #footer-wrapper,#header-wrapper,#nav,.sidebar,#footer, {display:none !important},#sidebar-wtengah
      #main-wrapper{width:100% !important}

      Xóa
    2. Thêm vào tiện ích HTML/Javácripts

      Demo thu nhỏ trình duyệt đẻ xem DEMOnha:

      Xóa
    3. cái này chèn vào đâu pạn!?
      #footer-wrapper,#header-wrapper,#nav,.sidebar,#footer, {display:none !important},#sidebar-wtengah
      #main-wrapper{width:100% !important}

      Xóa
    4. Trước thẻ: ]]></b:skin>

      Xóa
    5. chỉ áp dụng cho những bài đăng nhất định dc ko pạn!?

      Xóa
    6. Tất nhiên là được bạn ak. Bạn xóa đoạn:

      @media screen and (max-width: 800px){

      #menu{position:relative}
      #menu ul{background:#111;position:absolute;top:100%;right:0;left:0;z-index:3;height:auto;display:none}
      #menu ul.menus{width:100%;position:static;padding-left:20px}
      #menu li{display:block;float:none;width:auto; font:normal 0.8em Arial;}
      #menu input,#menu label{position:absolute;top:0;left:0;display:block}
      #menu input{z-index:4}
      #menu input:checked + label{color:white}
      #menu input:checked ~ ul{display:block}

      }

      Và khi muốn áp dụng với bài viết nào bạn chỉ cần dán đoạn mã sau vào phần HTML của bài viết.

      <style>
      @media screen and (max-width: 800px){

      #menu{position:relative}
      #menu ul{background:#111;position:absolute;top:100%;right:0;left:0;z-index:3;height:auto;display:none}
      #menu ul.menus{width:100%;position:static;padding-left:20px}
      #menu li{display:block;float:none;width:auto; font:normal 0.8em Arial;}
      #menu input,#menu label{position:absolute;top:0;left:0;display:block}
      #menu input{z-index:4}
      #menu input:checked + label{color:white}
      #menu input:checked ~ ul{display:block}

      }
      </style>

      Xóa
    7. chỉ áp dụng để ẩn những thành phần này cho bài đăng nhất định dc ko bạn!?
      #footer-wrapper,#header-wrapper,#nav,.sidebar,#footer, {display:none !important},#sidebar-wtengah
      #main-wrapper{width:100% !important}

      Xóa
    8. Tất nhiên là được bạn chỉ cần thêm chúng vào giữa cặp thẻ style và dán vào phần HTML của bài viết đó thôi :)

      Xóa
  7. anh ơi cái menu chạy xuống cuối trang giờ làm sao anh

    Trả lờiXóa
    Trả lời
    1. Em lưu ý chèn sau thẻ mở <body> chứ không phải thẻ đóng </body>

      Xóa
  8. Mình thả vào thẻ body thì thanh menu nhảy tót lên trên top trang nằm, nhìn xấu lắm, mình cắt nó ra và cho vào một widget riêng đưa nó trên featured post thì thấy nó đẹp, mà ko biết được k Nam http://www.yeutienganh123.com/

    Trả lờiXóa
    Trả lời
    1. Tất nhiên là được bạn có thể dán nó ở đâu tùy thích nha,

      Xóa
  9. anh Namkna xem dùm e lỗi này với vô chỉnh code 1 hồi mới phát hiện
    https://lh5.googleusercontent.com/-tLwCZiAHeRo/UitSzCfCUvI/AAAAAAAABmA/4p3_0OUIKl8/w919-h191-no/Capture.JPG trong bố cục có wigget trang mà lên trang ko có thấy xuất hiện, các wigget nào kéo vào đó cũng mất luôn

    Trả lờiXóa
    Trả lời
    1. Link ảnh đó của em bị xóa bởi tác giả của nó em nên thay bằng link ảnh khác của em nha em :)

      Xóa
  10. anh nam ơi kiểm tra hộ em với
    blog :http://tinnet3s.blogspot.com/

    tại sao trên các liên kết ở menu và các chỗ khác trong tranh đều có gạch chân bên dưới - em muốn gỡ nó ra mà không biết -
    nhừ anh giúp em -
    thanks anh

    Trả lờiXóa
    Trả lời
    1. Em chỉ cần thêm thuộc tính text-decoration:none vào thẻ a:link thôi em ak. Em sửa đoạn code bên dưới:

      a, a:visited{text-decoration:none;color: #004D99}

      thành:

      a:link, a:visited{text-decoration:none;color: #004D99}

      Xóa
  11. được rồi anh ạ - thanks anh nhieu

    Trả lờiXóa
  12. Dùng mẫu mobile mặc định thì có ổn trong SEO không ad nhỉ, còn nữa là em kiểm tra bằng tool.pingdom thấy trang chủ bị load 2 lần, site e là nhacthieunhi.biz. A fix giúp e với, cảm ơn a nhiều

    Trả lờiXóa
    Trả lời
    1. Anh kiểm tra không thấy hiện tượng đó của em. Mẫu mặc định của blogger cũng ổn tuy nhiên cần tùy biến lại đôi chút cho phù hợp với nội dung là lượng từ khóa sử dụng nha.

      Xóa
  13. em có hai lỗi liên quan đến menu nhờ anh giúp cho :
    1.phần banner trên lấn qua phân menu
    2.menu sổ dọc bị khuất bởi slide ảnh nằm bên dưới (làm sao cho các menu sổ xuống nó nằm trên slide ảnh)
    blog em là : http://www.giasuvinh24h.com/

    Trả lờiXóa
  14. Nhận xét này đã bị tác giả xóa.

    Trả lờiXóa
  15. dòng thứ nhất em đã mày mò sửa đực rồi ạ - anh giúp em sửa dòng 2 thôi ạ :
    2.menu sổ dọc bị khuất bởi slide ảnh nằm bên dưới (làm sao cho các menu sổ xuống nó nằm trên slide ảnh)
    blog em là : http://www.giasuvinh24h.com/

    Trả lờiXóa
  16. 2 câu hỏi trên em đã mò ra - an cho em hỏi thêm - với menu này muốn chữ ở các tab1-2-3-4.. lớn hơn thì có cách nao ngoài cách đặt cho từng cái không anh

    Trả lờiXóa
    Trả lời
    1. Em sửa 3 đoạn CSS sau:

      #menu ul,#menu li{margin:0 auto;padding:0 0;list-style:none}
      #menu ul{height:45px;width:1024px}
      #menu li{float:left;display:inline;position:relative;font:bold 0.9em Arial;text-shadow: 1px 2px 4px #838383;}


      thành:

      #menu ul,#menu li{margin:0 auto;padding:0 0;list-style:none;font-size:18px;}
      #menu ul{height:45px;width:1024px}
      #menu li{float:left;display:inline;position:relative;font:bold 0.9em Arial;text-shadow: 1px 2px 4px #838383;
      font-size:14px;}


      font-size:18px; là cỡ chữ của sub menu
      font-size:14px; là cỡ chữ trên menu chính.

      Hãy chỉnh lại theo ý muốn của em nha.

      Xóa
  17. thế màu nên khi dê chuột trên mỗi tab là gì vậy anh- chỉnh ở đâu ạ

    Trả lờiXóa
    Trả lời
    1. Em chỉ cần thay đổi mã màu color và màu nền background ở các đoạn bắt đầu bằng thẻ css a:hover Trong bài anh đã có nói qua nó rồi đó.

      Xóa
  18. Nhận xét này đã bị tác giả xóa.

    Trả lờiXóa
  19. anh xem hình giúp em tí -

    http://2.bp.blogspot.com/-RSxS2PBByYc/Ut520I9GXsI/AAAAAAAAAnI/4wFd7g8T-Mw/s1600/1.jpg

    Trả lờiXóa
  20. Ys em hỏi tại thời điểm con chuột ở vị trí B đó anh ạ

    Trả lờiXóa
    Trả lời
    1. Trong đoạn code có chú thích rồi đó em. E chỉnh lại phần

      #menu li a:hover{
      color:#FFFFFF;
      -webkit-transition: all .1s ease-in-out;
      -moz-transition: all .1s ease-in-out;
      -ms-transition: all .1s ease-in-out;
      -o-transition: all .1s ease-in-out;
      transition: all .1s ease-in-out;
      background:#007700; /*màu menu khi rê chuột - trên menu chính*/
      }

      Xóa
  21. Ý em là khi mình dê chuột xuống các tab nhỏ sổ dọc xuống dưới - thì màu menu khi trên chuột ở trên vẫn không thay đổi - ví dụ trong hnhf ảnh em gửi đó : thì khi em dê chuột vào "danh mục gia sư" nó có màu giống như các tab bên dưới - nhưng khi em dê xuống tab bên dưới (vd:đội ngũ gia sư-gia sư giỏi...) thì màu ở "đội ngũ gia sư nó mất" không giống với các tab nữa - ý em muốn màu ở "danh mục gia sư" không thay đổi khi (giống như ở các tab) khi mình đang dê chuột trên khu vực các tab ạ !!!

    Trả lờiXóa
    Trả lời
    1. Oke, Em sửa đoạn:

      #menu li a:hover{
      color:#FFFFFF;
      -webkit-transition: all .1s ease-in-out;
      -moz-transition: all .1s ease-in-out;
      -ms-transition: all .1s ease-in-out;
      -o-transition: all .1s ease-in-out;
      transition: all .1s ease-in-out;
      background:#007700;/*màu menu khi rê chuột - trên menu chính*/
      }

      Thành:

      #menu li:hover, #menu li a:hover{
      color:#FFFFFF;
      -webkit-transition: all .1s ease-in-out;
      -moz-transition: all .1s ease-in-out;
      -ms-transition: all .1s ease-in-out;
      -o-transition: all .1s ease-in-out;
      transition: all .1s ease-in-out;
      background:#007700;/*màu menu khi rê chuột - trên menu chính*/
      }

      Lưu lại là được nha.

      Xóa
  22. cảm ơn anh đã nhiệt tình giúp đỡ - rất đúng với ý của em ạ ---
    bây giờ nhìn đẹp hơn nhiều :http://www.giasuvinh24h.com/

    Trả lờiXóa
  23. anh ơi có thể thêm menu thành ba cấp được khôn anh - anh chỉ giúp em với

    Trả lờiXóa
    Trả lời
    1. Em có thể xem thêm bài hướng dẫn này để thực hiện nha: XEM

      Xóa
  24. Nhận xét này đã bị tác giả xóa.

    Trả lờiXóa
  25. trang blog của em là : http://lukhachtran.blogspot.com/
    anh giúp em chỉnh cho cân tí nhé-


    hình ảnh đây ạ

    Trả lờiXóa
    Trả lời
    1. Em tìm đoạn:

      #footer{background:#fff;border-bottom:0px solid #000;border-top:0px solid #111;width:100%;padding:0;box-shadow: 0 2px 6px rgba(0,0,0,0.2);margin:3px}

      và thay thế nó thành:

      #footer{background:#fff;border-bottom:0px solid #000;border-top:0px solid #111;width:100%;padding:0;box-shadow: 0 2px 6px rgba(0,0,0,0.2);margin:0 auto;}

      Xóa
  26. thanks anh - tiện thể nhờ anh chỉnh menu này cân em với :
    http://2.bp.blogspot.com/-CEk9K0-bnr0/U2kaUipVlGI/AAAAAAAAAP0/BvSY9EteiFk/s320/p.jpg

    Trả lờiXóa
  27. - E Sửa đoạn:

    .masmenu{background: #ffffff;background: -moz-linear-gradient(top, #ffffff 1%, #eaeaea 100%);background: -webkit-gradient(linear, left top, left bottom, color-stop(1%,#ffffff), color-stop(100%,#eaeaea));background: -webkit-linear-gradient(top, #ffffff 1%,#eaeaea 100%);background: -o-linear-gradient(top, #ffffff 1%,#eaeaea 100%);background: -ms-linear-gradient(top, #ffffff 1%,#eaeaea 100%);background: linear-gradient(top, #ffffff 1%,#eaeaea 100%);color:#333;font:bold 12px Arial;text-shadow: 1px 1px 1px rgba(255,255,255,0.8);display:inline-block;width:100%;border:1px solid #ccc;box-shadow:0 2px 5px rgba(0,0,0,.1)}

    thành:

    .masmenu{background: #ffffff;background: -moz-linear-gradient(top, #ffffff 1%, #eaeaea 100%);background: -webkit-gradient(linear, left top, left bottom, color-stop(1%,#ffffff), color-stop(100%,#eaeaea));background: -webkit-linear-gradient(top, #ffffff 1%,#eaeaea 100%);background: -o-linear-gradient(top, #ffffff 1%,#eaeaea 100%);background: -ms-linear-gradient(top, #ffffff 1%,#eaeaea 100%);background: linear-gradient(top, #ffffff 1%,#eaeaea 100%);color:#333;font:bold 12px Arial;text-shadow: 1px 1px 1px rgba(255,255,255,0.8);display:inline-block;width:100%;border:1px solid #ccc;box-shadow:0 2px 5px rgba(0,0,0,.1);margin:0 auto}


    và nhớ chỉnh lại width ở phần dưới nha:

    .masmenu ul{width:970px;padding:0;margin:0 auto}

    Trả lờiXóa
  28. không hiểu sao - em làm theo như anh mà vẫn không được anh ạ !!!

    Trả lờiXóa
    Trả lời
    1. A đã kiểm tra các thẻ bao ngoài padding đều bằng 1 như vậy có thể phần e nhì thấy do hiệu ứng text-shadow: 1px 1px 1px rgba(255,255,255,0.8) gây ra ta có thể viết lại thành: text-shadow: 1px rgba(255,255,255,0.8)

      nếu vẫn không có tác dụng thì em dùng đoạn:

      .masmenu{background: #ffffff;background: -moz-linear-gradient(top, #ffffff 1%, #eaeaea 100%);background: -webkit-gradient(linear, left top, left bottom, color-stop(1%,#ffffff), color-stop(100%,#eaeaea));background: -webkit-linear-gradient(top, #ffffff 1%,#eaeaea 100%);background: -o-linear-gradient(top, #ffffff 1%,#eaeaea 100%);background: -ms-linear-gradient(top, #ffffff 1%,#eaeaea 100%);background: linear-gradient(top, #ffffff 1%,#eaeaea 100%);color:#333;font:bold 12px Arial;text-shadow: 1px 1px 1px rgba(255,255,255,0.8);display:inline-block;width:100%;border:1px solid #ccc;box-shadow:0 2px 5px rgba(0,0,0,.1);margin-left:-5px;}

      chỉnh lại phần in đậm.

      Xóa
  29. HTML của mình không có <Body>. Chỉ tìm đc body của dòng lệnh này
    <body expr:class='&quot;loading&quot; + data:blog.mobileClass'>
    Mình cũng không biết thêm như thế nào. Nam giải đáp giúp mình với

    Trả lờiXóa
  30. Mình đã tự sửa được rồi. Nhưng nếu như mình muốn dời thanh menu này về vị trí giống như thanh menu blog của nam thì mình đặt nó ở đâu Nam nhỉ ??

    Trả lờiXóa
    Trả lời
    1. Để URL trang của bạn ở đây để mình kiểm tra cho. Trong tiểu sử Google của bạn khong có trang của bạn nên mình không chỉ đoạn cụ thể cho bạn được.

      Xóa
  31. Anh à, em làm như anh chỉ thì lại bị chừa thanh menu ra bên ngoài một chút, em đã chỉnh kích thước chiều rộng xuống còn 900 và 700 nhưng mà kết quả vẫn thế. Anh giúp em sửa nhé. Đây là link ạ: http://www.accu-tech.com.vn/

    Trả lờiXóa
    Trả lời
    1. Do thuộc tính padding trong phần outer-wrapper blog của em. Khắc phục bằng 2 cách:

      Cách 1: Xóa Padding
      TÌm đoạn bên dưới:

      #outer-wrapper {
      width: 960px;
      background:#fff;
      margin:0 auto;
      padding:5px 20px 15px 20px;
      text-align:left;
      font:normal 14px Arial;
      }

      và sửa thành:

      #outer-wrapper {
      width: 960px;
      background:#fff;
      margin:0 auto;
      text-align:left;
      font:normal 14px Arial;
      }

      Cách 2 thêm margin:
      Tìm đoạn bên dưới:

      #menu{
      background: #50B7DC;
      color: #FFF;
      height: 40px;
      border-bottom: 2px solid #DDD;
      box-shadow: 1px 2px 9px #B1B1B1;
      border-top: 2px solid #DDD;
      }

      Và sửa thành:
      #menu{
      background: #50B7DC;
      color: #FFF;
      height: 40px;
      border-bottom: 2px solid #DDD;
      box-shadow: 1px 2px 9px #B1B1B1;
      border-top: 2px solid #DDD;
      margin-left:-10px;
      }

      Chỉnh lại margin-left:-10px; cho thích hợp là được:

      Xóa
    2. Cảm ơn anh nhiều ạ :)

      Xóa

  32. Thanks For Sharing This Website. Really Thanks For This Post.

    Kingtricks

    Trả lờiXóa
    Trả lời
    1. No problem. i hope this post usefull with you.

      thank vissited!

      Xóa
  33. như blog mình: http://aliensf.blogspot.com/ , muốn tạo thêm menu con cấp 2 nữa thì viết code ntn b? vì mình ko am hiểu lắm về cách viết nav

    Trả lờiXóa
  34. Chào anh, cảm ơn vì bài viết rất tuyệt. Em đã áp dụng thành công trên blog của mình, nhưng em muốn trên thiết bị có kích thước nhỏ hơn 800px menu không tự xổ xuống khi rê tay trúng mà phải nhấp vào lần nữa mới xổ thì làm sao vậy anh?

    Trả lờiXóa
  35. Nhận xét này đã bị tác giả xóa.

    Trả lờiXóa
  36. Mình đã áp dụng để chỉnh sửa menu hiện tại của mình theo cách này. Còn một số lỗi mình k biết chỉnh sửa thế nào, mong bạn giúp đỡ.
    Khi co trình duyệt nhỏ lại thì menu của mình đã tự động chuyển đổi, nhưng nó không hiện ngay, phải kéo chuột xuống một chút nó mới hiện ra. Và nó chỉ hiện ra thôi, còn không click vào menu được.
    Bạn chỉnh giúp mình với, blog của mình là http://nhahanoi68.blogspot.com/

    Trả lờiXóa
  37. mình có gần 20 dropdown làm cách nào để chúng chuyển sang thành nhiều cột không nhìn dropdown dài quá

    Trả lờiXóa
  38. mình muốn làm dropdown kiểu dạng như trang này hittravel.vn bạn chỉ cho mình đc ko. thanks

    Trả lờiXóa
  39. a ơi e hỏi này, cái menu của e thì e làm ok rồi, hôm qua vẫn bình thường, hôm nay tự dưng vào bằng di dộng thì chữ "menu" nó nhảy mất xuống dưới :(( a vào vncino1.net xem giúp em nhé, em cảm ơn ạ,

    Trả lờiXóa
  40. Bạn cho mình hỏi muốn đổi màu thanh menu thì phải làm sao ?

    Trả lờiXóa