Từ 1 tới 3 trên tổng số 3 kết quả

Đề tài: Menu CSS

  1. #1
    Ngày gia nhập
    03 2009
    Bài viết
    14

    Mặc định Menu CSS

    Em có làm một cái menu thế này, làm sao để khi thay đổi kích thước trình duyệt thì nó không bị biến dạng các bác nhỉ?

    <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
    <title>Example Menu</title>
    <style type="text/css" media="screen">
    <!
    -- *
    {
    margin: 0;
    padding: 0;
    }
    /*body {background: #ffffff; color: #fff; font-size: 12px; font-family: Tahoma; line-height: 14px;}*/
    body
    {
    margin: 0;
    padding: 0;
    background: white;
    font: 80% tahoma;
    line-height: 14px;
    }
    dl, dt, dd, ul, li
    {
    margin: 0;
    padding: 0;
    list-style-type: none;
    width: auto;
    }
    #menu
    {
    position: absolute; /* Menu position that can be changed at will */
    top: 1px;
    left: 1px;
    z-index:100;
    width:auto; /* precision for Opera */
    }
    #menu dl
    {
    float: left;
    line-height: 40px;
    width: 150px;

    }
    #menu dt
    {
    cursor: pointer;
    text-align: center;
    font-weight: bold;
    background: url(Image/banner.JPG) repeat-x bottom left;
    margin: 0px;
    }
    #menu dd
    {
    display: none;
    border: 1px solid gray;
    }
    #menu li
    {
    text-align: center;
    background:#5F96E7;
    }
    #menu dt
    {
    color: #1F232D;
    }
    #menu li a, #menu dt a
    {
    color:#1F232D;
    text-decoration: none;
    display: block;
    height: 100%;
    border: 0 none;
    }
    #menu dt a:hover
    {
    color:Red;
    }
    #menu li a:hover, #menu li a:focus, #menu dt a:focus
    {
    background: #eee;
    color:Red;

    }
    -- ></style>

    <script type="text/javascript">
    window.onload=show;
    function show(id) {
    var d = document.getElementById(id);
    for (var i = 1; i<=10; i++) {
    if (document.getElementById('smenu'+i)) {document.getElementById('smenu'+i).style.display= 'none';}
    }
    if (d) {d.style.display='block';}
    }
    </script>

    </head>
    <body>
    <form id="form1" runat="server">
    <div id="menu">
    <dl style="width:26px;"><dt style="background: url(Image/bleft.JPG) repeat-x bottom left;">&nbsp;</dt></dl>
    <dl>
    <dt onmouseover="javascript:show();"><a href="" title="Return to home">Trang chủ</a></dt>
    </dl>
    <dl>
    <dt onmouseover="javascript:show('smenu1');"><a>Quản lý bài viết</a></dt>
    <dd id="smenu1" onmouseover="javascript:show('smenu1');" onmouseout="javascript:show('');">
    <ul>
    <li><a href="#">Bài viết mới</a></li>
    <li><a href="#">Danh sách bài viết</a></li>
    <li><a href="#">Thêm chủ đề mới</a></li>
    <li><a href="#">Danh sách chủ đề</a></li>
    <li><a href="#">Danh sách góp ý</a></li>
    <li><a href="#">Thùng rác</a></li>
    </ul>
    </dd>
    </dl>
    <dl>
    <dt onmouseover="javascript:show('smenu2');"><a>Quản lý liên kết</a></dt>
    <dd id="smenu2" onmouseover="javascript:show('smenu2');" onmouseout="javascript:show('');">
    <ul>
    <li><a href="#">sub-menu 2.1</a></li>
    <li><a href="#">sub-menu 2.2</a></li>
    <li><a href="#">sub-menu 2.3</a></li>
    <li><a href="#">sub-menu 2.4</a></li>
    </ul>
    </dd>
    </dl>
    <dl>
    <dt onmouseover="javascript:show('smenu3');"><a>Album ảnh</a></dt>
    <dd id="smenu3" onmouseover="javascript:show('smenu3');" onmouseout="javascript:show('');">
    <ul>
    <li><a href="#">sub-menu 3.1</a></li>
    <li><a href="#">sub-menu 3.2</a></li>
    <li><a href="#">sub-menu 3.3</a></li>
    <li><a href="#">sub-menu 3.4</a></li>
    <li><a href="#">sub-menu 3.5</a></li>
    </ul>
    </dd>
    </dl>
    <dl>
    <dt onmouseover="javascript:show('smenu4');"><a>Bảo mật</a></dt>
    <dd id="smenu4" onmouseover="javascript:show('smenu4');" onmouseout="javascript:show('');">
    <ul>
    <li><a href="#">sub-menu 4.1</a></li>
    <li><a href="#">sub-menu 4.2</a></li>
    <li><a href="#">sub-menu 4.3</a></li>
    </ul>
    </dd>
    </dl>
    <dl>
    <dt onmouseover="javascript:show('smenu4');"><a>Bạn bè</a></dt>
    <dd id="Dd1" onmouseover="javascript:show('smenu4');" onmouseout="javascript:show('');">
    <ul>
    <li><a href="#">sub-menu 4.1</a></li>
    <li><a href="#">sub-menu 4.2</a></li>
    <li><a href="#">sub-menu 4.3</a></li>
    </ul>
    </dd>
    </dl>
    <dl style="width:26px;"><dt style="background: url(Image/bright.JPG) repeat-x bottom left;">&nbsp;</dt></dl>
    </div>

    </form>
    </body>
    </html>

  2. #2
    Ngày gia nhập
    09 2006
    Nơi ở
    /usr/share/.hack@
    Bài viết
    1,433

    thế thì đặt kích thước cụ thể cho menu:

    Css Code:
    1. #menu
    2. {
    3. position: absolute; /* Menu position that can be changed at will */
    4. top: 1px;
    5. left: 1px;
    6. z-index:100;
    7. width:auto; /* precision for Opera */ <---- cho kích thước cụ thể, bỏ auto. Áp dụng cả luôn cho Opera
    8. }
    None!

  3. #3
    Ngày gia nhập
    03 2009
    Bài viết
    14

    Bạn ơi mình làm theo cách của bạn được rồi, cảm ơn bạn nhiều nha!

Các đề tài tương tự

  1. Dựng 1 menu Asp.net bằng thẻ <ul> <li> hay Control [ Menu , SiteMap , Repeater , Treeview]
    Gửi bởi teodainhan trong diễn đàn Thắc mắc lập trình ASP.NET
    Trả lời: 8
    Bài viết cuối: 30-05-2013, 01:04 PM
  2. Source Code menu thêm item vào Menu Context
    Gửi bởi babyboy_pk trong diễn đàn Dự án & Source code C#, ASP.NET
    Trả lời: 0
    Bài viết cuối: 25-03-2013, 01:56 PM
  3. Googlechomre không hiển thị menu con khi dùng sitemapth để load menu đa cấp
    Gửi bởi thitcholaotien trong diễn đàn Thắc mắc lập trình ASP.NET
    Trả lời: 6
    Bài viết cuối: 09-04-2012, 02:19 PM
  4. Tạo menu theo dạng Menu cha - con như thế nào?
    Gửi bởi tuanvu199x trong diễn đàn Thắc mắc lập trình ASP.NET
    Trả lời: 3
    Bài viết cuối: 06-11-2011, 10:45 PM
  5. Hight light menu trong C như của Menu HirentBoot?
    Gửi bởi manhdt trong diễn đàn Thắc mắc lập trình C/C++/C++0x
    Trả lời: 3
    Bài viết cuối: 08-09-2011, 09:54 AM

Quyền hạn của bạn

  • Bạn không thể gửi đề tài mới
  • Bạn không thể gửi bài trả lời
  • Bạn không thể gửi các đính kèm
  • Bạn không thể chỉnh sửa bài viết của bạn