CNTT4A2 COMMUNITY

Thảo luận học tập


You are not connected. Please login or register

CNTT4A2 COMMUNITY » Nhà Kho » Tin học căn bản » Thủ thuật » Thủ thuật mạng » Menu drop down cho web, blog

Go downThông điệp [Trang 1 trong tổng số 1 trang]

24/2/2012, 3:47 pm
whatsltd4us
whatsltd4us

Sau 1 ngày rảnh rỗi ngồi nghịch thì kiếm đc mấy cái style menu này, share cho mọi người đem về nghịch ngợm chỉnh sửa nhé :D

1. Style 1
Demo : [You must be registered and logged in to see this link.]

Code :
Code:

<style>
    ul.ldd_menu{
    margin:0px;
    padding:0;
    display:block;
    height:50px;
    background-color:#D04528;
    list-style:none;
    font-family:"Trebuchet MS", sans-serif;
    border-top:1px solid #EF593B;
    border-bottom:1px solid #EF593B;
    border-left:10px solid #D04528;
    -moz-box-shadow:0px 3px 4px #591E12;
    -webkit-box-shadow:0px 3px 4px #591E12;
    -box-shadow:0px 3px 4px #591E12;
}
ul.ldd_menu a{
    text-decoration:none;
}
ul.ldd_menu > li{
    float:left;
    position:relative;
}
ul.ldd_menu > li > span{
    float:left;
    color:#fff;
    background-color:#D04528;
    height:50px;
    line-height:50px;
    cursor:default;
    padding:0px 20px;
    text-shadow:0px 0px 1px #fff;
    border-right:1px solid #DF7B61;
    border-left:1px solid #C44D37;
}
ul.ldd_menu .ldd_submenu{
    position:absolute;
    top:50px;
    width:550px;
    display:none;
    opacity:0.95;
    left:0px;
    font-size:14px;
    background: #C34328;
    border-top:1px solid #EF593B;
    -moz-box-shadow:0px 3px 4px #591E12 inset;
    -webkit-box-shadow:0px 3px 4px #591E12 inset;
    -box-shadow:0px 3px 4px #591E12 inset;
}
a.ldd_subfoot{
    background-color:#f0f0f0;
    color:#444;
    display:block;
    clear:both;
    padding:15px 20px;
    text-transform:uppercase;
    font-family: Arial, serif;
    font-size:12px;
    text-shadow:0px 0px 1px #fff;
    -moz-box-shadow:0px 0px 2px #777 inset;
    -webkit-box-shadow:0px 0px 2px #777 inset;
    -box-shadow:0px 0px 2px #777 inset;
}
ul.ldd_menu ul{
    list-style:none;
    float:left;
    border-left:1px solid #DF7B61;
    margin:20px 0px 10px 30px;
    padding:10px;
}
li.ldd_heading{
    font-family: Georgia, serif;
    font-size: 13px;
    font-style: italic;
    color:#FFB39F;
    text-shadow:0px 0px 1px #B03E23;
    padding:0px 0px 10px 0px;
}
ul.ldd_menu ul li a{
    font-family: Arial, serif;
    font-size:10px;
    line-height:20px;
    color:#fff;
    padding:1px 3px;
}
ul.ldd_menu ul li a:hover{
    -moz-box-shadow:0px 0px 2px #333;
    -webkit-box-shadow:0px 0px 2px #333;
    box-shadow:0px 0px 2px #333;
    background:#AF412B;
}
</style>
<ul class='ldd_menu' id='ldd_menu'>
<li>
<span>HOME - New</span>
<div class='ldd_submenu'>
<ul>
<li class='ldd_heading'>HOME</li>
<li><a href='LINK CUA BAN'>NH Ghoster Team</a></li>
<li><a href='LINK CUA BAN'> Danh sách thành viên</a></li>
<li><a href='LINK CUA BAN'>Hồ sơ thành viên </a></li>
<li><a href='LINK CUA BAN'> Đăng ký</a></li>
<li><a href='LINK CUA BAN'>Tác nghiệp </a></li>
</ul>
<ul>
<li class='ldd_heading'>NEW</li>
<li><a href='LINK CUA BAN'>Thông báo </a></li>
<li><a href='LINK CUA BAN'>Tin tức ICT</a></li>
</ul>
<ul>
<li class='ldd_heading'>Kết nối</li>
<li><a href='LINK CUA BAN'>Liên kết</a></li>
<li><a href='LINK CUA BAN'>Liên hệ </a></li>
</ul>
<a class='ldd_subfoot' href='#' title = 'www.hongda.us'>Hồng Đá Blog ....</a>
</div>
</li>
<li>
<span>OS</span><!-- Increases to 510px in width-->
<div class='ldd_submenu'>
<ul>
<li class='ldd_heading'>Windows</li>
<li><a href='LINK CUA BAN'>Windows Xp</a></li>
<li><a href='#'>Windows Vista</a></li>
<li><a href='LINK CUA BAN'>Windows 7</a></li>
<li><a href='LINK CUA BAN'>Windows 8</a></li>
<li><a href='LINK CUA BAN'>Ghost Windows</a></li>
</ul>
<ul>
<li class='ldd_heading'>Sử dụng</li>
<li><a href='LINK CUA BAN'>Sử dụng Windows</a></li>
<li><a href='LINK CUA BAN'>Sử dụng phần mềm</a></li>
</ul>
<ul>
<li class='ldd_heading'>Nons- Windows</li>
<li><a href='LINK CUA BAN'>Linux</a></li>
<li><a href='LINK CUA BAN'>Mac Os</a></li>
</ul>
<a class='ldd_subfoot' href='#' title = 'www.hongda.us'>Hồng Đá Blog ....</a>
</div>
</li>
<li>
<span>Phần mềm</span>
<div class='ldd_submenu'>
<ul>
<li class='ldd_heading'>Phần mềm </li>
<li><a href='LINK CUA BAN'>Phần mềm tiếng Việt</a></li>
<li><a href='LINK CUA BAN'>Phần mềm hệ thống và bảo mật</a></li>
<li><a href='LINK CUA BAN'>Multimedia</a></li>
<li><a href='LINK CUA BAN'>Desktop Enhancement</a></li>
<li><a href='LINK CUA BAN'>Công cụ văn phòng</a></li>
</ul>
<ul>
<li class='ldd_heading'>Phần mềm </li>
<li><a href='LINK CUA BAN'>Công cụ Internet</a></li>
<li><a href='LINK CUA BAN'>Đồ họa - Thiết kế - Lập trình</a></li>
<li><a href='LINK CUA BAN'>Sách - Tài liệu</a></li>
<li><a href='LINK CUA BAN'>Portable</a></li>
<li><a href='LINK CUA BAN'>All In One</a></li>
<li><a href='LINK CUA BAN'> Drivers </a></li>
<li><a href='LINK CUA BAN'> Nhận tìm Driver </a></li>
</ul>
<ul>
<li class='ldd_heading'>Antivirus</li>
<li><a href='LINK CUA BAN'>Avast</a></li>
<li><a href='LINK CUA BAN'>Avg</a></li>
<li><a href='LINK CUA BAN'>Avira</a></li>
<li><a href='LINK CUA BAN'>BitDefenfer</a></li>
<li><a href='LINK CUA BAN'>ESET</a></li>
<li><a href='LINK CUA BAN'>Kaspersky</a></li>
<li><a href='LINK CUA BAN'>McAfee</a></li>
<li><a href='LINK CUA BAN'>Norton</a></li>
</ul>
<a class='ldd_subfoot' href='#' title = 'www.hongda.us'>Hồng Đá Blog ....</a>
</div>
</li>
<li>
<span>Thủ thuật và giải trí</span>
<div class='ldd_submenu'>
<ul>
<li class='ldd_heading'>Giải trí - Relax</li>
<li><a href='LINK CUA BAN'>PC Games</a></li>
<li><a href='LINK CUA BAN'>Mini Games</a></li>
<li><a href='LINK CUA BAN'>Ảnh động</a></li>
<li><a href='LINK CUA BAN'>Wallpapers/Avatar</a></li>
<li><a href='LINK CUA BAN'> Xe cộ</a></li>
<li><a href='LINK CUA BAN'>Ảnh người mẫu - ngôi sao</a></li>
<li><a href='LINK CUA BAN'>Girl xinh đẹp</a></li>
<li><a href='LINK CUA BAN'> Tổng hợp </a></li>
<li><a href='LINK CUA BAN'>Vui cười</a></li>
<li><a href='LINK CUA BAN'> Thế giới âm nhạc </a></li>
<li><a href='LINK CUA BAN'> Thế giới Videos</a></li>
<li><a href='LINK CUA BAN'> Videos</a></li>
<li><a href='LINK CUA BAN'>Videos FUN</a></li>
<li><a href='LINK CUA BAN'>  Videos Pro</a></li>
</ul>
<ul>
<li class='ldd_heading'>Thủ thuật- Internet</li>
<li><a href='LINK CUA BAN'> Thủ thuật Blogspot</a></li>
<li><a href='LINK CUA BAN'> Thủ thuật SEO</a></li>
<li><a href='LINK CUA BAN'> Thủ thuật</a></li>
<li><a href='LINK CUA BAN'> Thủ thuật kinh nghiệm</a></li>
<li><a href='LINK CUA BAN'> Thủ thuật máy tính</a></li>
<li><a href='LINK CUA BAN'> Thủ thuật Photoshop</a></li>
<li><a href='LINK CUA BAN'> Thủ thuật Internet</a></li>
<li><a href='LINK CUA BAN'> Sử dụng Internet</a></li>
<li><a href='LINK CUA BAN'> Kiếm tiền trên mạng</a></li>
</ul>
<ul>
<li class='ldd_heading'>Blog's Club Area </li>
<li><a href='LINK CUA BAN'> Câu lạc bộ Piano</a></li>
<li><a href='LINK CUA BAN'> Câu lạc bộ trống</a></li>
<li><a href='LINK CUA BAN'> Câu lạc bộ Guitar</a></li>
<li><a href='LINK CUA BAN'> Đồ nghề</a></li>
</ul>
<a class='ldd_subfoot' href='#' title = 'www.hongda.us'>Hồng Đá Blog ....</a>
</div>
</li>
</ul>
<!-- The JavaScript -->
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js' type='text/javascript'></script>
<script type='text/javascript'>
            $(function() {
                /**
                * the menu
                */
                var $menu = $('#ldd_menu');
               
                /**
                * for each list element,
                * we show the submenu when hovering and
                * expand the span element (title) to 510px
                */
                $menu.children('li').each(function(){
                    var $this = $(this);
                    var $span = $this.children('span');
                    $span.data('width',$span.width());
                   
                    $this.bind('mouseenter',function(){
                        $menu.find('.ldd_submenu').stop(true,true).hide();
                        $span.stop().animate({'width':'510px'},300,function(){
                            $this.find('.ldd_submenu').slideDown(300);
                        });
                    }).bind('mouseleave',function(){
                        $this.find('.ldd_submenu').stop(true,true).hide();
                        $span.stop().animate({'width':$span.data('width')+'px'},300);
                    });
                });
            });
        </script>

2. Style 2
Opera Nav : [You must be registered and logged in to see this link.]

Code :
Code:

<style type="text/css">
/* top menu */
#nav ul#mainmenu {list-style:none inside none;padding:0 274px 0 26px;margin:0 -2px 16px -2px;background:url('http://www.opera.com/bitmaps/mainmenu/menu.png') no-repeat 100% 100%;height:72px;min-height:72px;height:auto !important;position:relative;z-index:998;}
#nav ul#mainmenu li a {max-height:33px;}
#nav li {color:#fff;position:relative;float:left;margin-top:32px;list-style-image:none;}
#nav li span {background-color:#2c2c2c;background-color:rgba(44,44,44,0.5);}
#nav li.dl span {background-color:transparent;text-decoration:underline;}
#nav li a {display:block;padding:0 18px;height:33px;color:#fff;text-decoration:none;white-space:nowrap;}
#nav li.on, #nav li:hover, #nav li:focus {background:transparent url('http://www.opera.com/bitmaps/mainmenu/over.png') no-repeat 50% 100%;}
#nav li.support {text-indent:-999em;width:17px;float:right;}
#nav li.support a {background:url('http://www.opera.com/bitmaps/mainmenu/support_01.png') no-repeat 0 0;padding:0;}
#nav li.support a:hover, #nav li.support a:focus {background-position:-17px 0;}

/* Top menu dropdowns */
#nav li ul {
  position:absolute;
  z-index:999;
  min-width:150px;
  background-color:#CC0F16;
  color:#fff;
  top:33px;
  list-style:none;
  margin:0 0 0 -999em;
  padding:5px 0;
  background-image:none;
  opacity:0;
  transition:opacity 0.25s ease-out;
  -o-transition:opacity 0.25s ease-out;
  display:none;
}
#nav li:hover ul, #nav li:active ul, #nav li:focus ul, #nav li.sfhover ul {
  margin-left:0;
  opacity:1;
  display:block;
}
#nav li ul li,#nav li ul li:hover,#nav li ul li:focus {
  min-width:180px;
  font-size:11px;
  float:none;
  margin:0;
  padding:0;
  background:transparent none;
}

#nav li ul li + li {
  border-top:1px dotted #FF473F;
  border-collapse:collapse;
}
#nav li ul a, #nav li.on ul a {
  padding:1em 3em 1em 1.5em;
  margin:0;
  height:auto;
  color:#fff;
  line-height:1em;
  display:block;
  background-image:none;
}
#nav li ul a:hover, #nav li ul a:focus, #nav li ul a.sffocus {
  color:#fff;
  background-color:#900;
  background-image:none;
}

#nav li ul li.dl {
  border:0;
  background-color:#333;
}
#nav li ul li.dl a {
  background:#444 url('http://www.opera.com/bitmaps/mainmenu/dlcircle.png') no-repeat 97% 12px;
}
#nav li ul li.dl {
  border-top:1px dotted #666;
}
#nav li ul li.dl:hover, #nav li ul li.dl:hover a {
  background-color:#900;
  background-position:97% -28px;
}
#nav li ul li.dl b {
  display:block;
}


#operamenu {width:968px;margin:0 auto; padding-top: 3px;font: normal 12px Tahoma;}
</style><div id="operamenu"><div id="nav"><ul id="mainmenu"><li class="home"><a href="/" accesskey="1"><span>Home</span></a> </li><li class="products"><a href="/products/" accesskey="2"><span>Browsers</span></a><ul class="hide-mobile">
        <li><a href="/browser/">Opera for PC, Mac &amp; Linux</a></li>

        <li><a href="/mobile/">Opera for phones</a></li>
        <li><a href="/devices/">Opera for devices</a></li>       
        <li class="dl"><a href="/browser/download/">
          <b>Opera 10.62</b>
          Download Opera</a></li>
        <li class="dl mobile"><a href="/mobile/download/">
          <b>Mobile phones</b>

          visit <span>m.opera.com</span> with your phone</a></li>
      </ul> </li><li class="addons"><a href="/addons/" accesskey="3"><span>Add-ons</span></a><ul class="hide-mobile">
          <li><a href="http://unite.opera.com/applications">Opera Unite</a></li>
          <li><a href="/widgets/">Opera Widgets</a></li>
        <li><a href="/link/">Opera Link</a></li>

        <li><a href="/mail/">Opera Mail</a></li>
        <li><a href="/turbo/">Opera Turbo</a></li>
      </ul> </li><li class="community"><a href="/community/" accesskey="4"><span>Community</span></a><ul class="hide-mobile">
        <li><a href="http://my.opera.com/community/">My Opera</a></li>
        <li><a href="http://my.opera.com/chooseopera/blog/">Opera news blog</a></li>
        <li><a href="/company/education/">Education</a></li>

        <li><a href="http://my.opera.com/community/forums/">Forums</a></li>
      </ul> </li><li class="developer"><a href="/developer/" accesskey="5"><span>Developer</span></a><ul class="hide-mobile">
        <li><a href="/developer/tools/">Developer tools</a></li>
        <li><a href="/developer/events/">Events</a></li>
        <li><a href="/dragonfly/">Opera Dragonfly</a></li>
        <li><a href="/developer/wsc/">Web Standards Curriculum</a></li>

        <li><a href="/docs/specs/">Web specifications support in Opera</a></li>
        <li><a href="http://dev.opera.com/">Dev Opera</a></li>
      </ul> </li><li class="company"><a href="/company/" accesskey="6"><span>Company</span></a><ul class="hide-mobile">
        <li><a href="/company/">About Opera</a></li>
        <li><a href="/press/">Press</a></li>
        <li><a href="/business/">Business</a></li>

        <li><a href="/company/jobs/">Jobs</a></li>
        <li><a href="/company/investors/">Investors</a></li>
        <li><a href="/smw/">State of the Mobile Web</a></li>
        <li><a href="/company/events/">Events</a></li>
        <li><a href="/company/contact/">Contact</a></li>
      </ul> </li><li class="support"><a href="/support/" title="Support">Support</a></li></ul></div>


3. Style 3
Demo : forum lớp [You must be registered and logged in to see this link.]

Code:

<!--
 nav buttons bar --> <div class="tborder" style="padding:0px; border-top-width:0px"> <table class="navbox" cellpadding="0" cellspacing="0" border="0" width="100%" align="center"> <tr align="center"> <style type="text/css">ul#topnav {margin: 0; padding: 0;float: left;width: 100%;list-style: none;position: relative; /*--thiết lập vị trí của ul chưa menu--*/font-family: Tahoma;font-size: 12px;color: #FFFFFF;font-weight: Bold;background-color: #02adeb;}ul#topnav li {float: left;margin: 0; padding: 0;border-right: 0px solid #555; /*-- các menu li --*/}ul#topnav li a {padding: 6px 10px;display: block;color: #FFF;text-decoration: none;font-weight: Bold;text-align:center;}#topnav li a:hover,#topnav li a:active,#topnav li a:focus {color: #FFF;  /* Màu chữ khi rê chuột vào */background-color:#02adeb; /* Màu nền khi rê chuột vào */}ul#topnav li:hover {background: #00A5F4; url(topnav_active.gif) repeat-x; }ul#topnav li span {float: left;padding: 6px 0;position: absolute;left: 0; top:26px;display: none; /*-- mặc định menu cấp 2 là ẩn --*/width: 100%;-moz-box-shadow: 5px 5px 5px #000;-webkit-box-shadow: 5px 5px 5px #000;box-shadow: 5px 5px 5px #000;background: #02adeb;color: #ffffff;/*--Bottom right rounded corner--*/-moz-border-radius-bottomright: 7px;-khtml-border-radius-bottomright: 7px;-webkit-border-bottom-right-radius:7px;/*--Bottom left rounded corner--*/-moz-border-radius-bottomleft: 7px;-khtml-border-radius-bottomleft: 7px;-webkit-border-bottom-left-radius: 7px;}ul#topnav li:hover span { display: block;height:30px;} /*--hiển thị menu cấp 2 khi đưa chuột vào--*/ul#topnav li span a { display: inline; } /*-- tất cả các menu câp 2 cùng nằm trên 1 dòng--*/ul#topnav li span a:hover {text-decoration: underline; background: none; color:#FFF;} </style><center><ul id="topnav"><span style="width:20px;height:5px;float:left;"></span><li><a href="/forum.htm">Trang Chủ</a></li><span style="width:20px;height:5px;float:left;"></span><li><a href="#">Giáo trình - Tài liệu ▼</a><!--
Subnav Starts Here--><span><a href="http://www.tin4a2.net/t5957-topic"> Đại cương</a> |<a href="http://www.tin4a2.net/t7669-topic"> CNTT</a> |<a href="http://www.tin4a2.net/t3396-topic">FatTony</a> |<a href="http://www.tin4a2.net/t2084-topic">Tham Khảo</a> |<a href="http://www.tin4a2.net/t593-topic">5min.com</a> |<a href="http://www.tin4a2.net/f47-forum">Giáo Trình Chung</a></span><!--
Subnav Ends Here--></li><span style="width:20px;height:5px;float:left;"></span><li><a href="/search.forum?search_id=activetopics">Bài Trong Ngày</a></li><span style="width:20px;height:5px;float:left;"></span><li><a href="#">Club Tin4A2 ▼</a><!--
Subnav Starts Here--><span><a href="http://www.tin4a2.net/f13-forum"> L8Z Club</a> |<a href="http://www.tin4a2.net/f19-forum"> BBC</a>|<a href="http://www.tin4a2.net/f39-forum"> NBC Club</a>|<a href="http://www.tin4a2.net/f11-forum"> Mouth1</a> |<a href="http://www.tin4a2.net/f36-forum">Golden Dragon</a>|<a href="http://www.tin4a2.net/f97-forum"> Middle Side Sound Club</a>|<a href="http://www.tin4a2.net/f33-forum"> SouthBeat</a><br/><a href="http://www.tin4a2.net/f8-forum"> Nam Định Club</a>|<a href="http://www.tin4a2.net/c8-category">Tổng Hợp</a></span><!--
Subnav Ends Here--></li><span style="width:20px;height:5px;float:left;"></span><li><a href="/login">Đăng nhập</a></li><span style="width:20px;height:5px;float:left;"></span><li><a href="/register"><blink>Đăng ký</blink></a></li> <span style="width:20px;height:5px;float:left;"></span><li><span style="width:20px;height:5px;float:left;"></span><li></li></ul></center></tr> </table> </div>
http://vdvinh-nd.blogspot.com

Thích

Báo xấu [0]

Gửi một bình luận lên tường nhà whatsltd4us

Về Đầu TrangThông điệp [Trang 1 trong tổng số 1 trang]

« Xem bài trước | Xem bài kế tiếp »

CNTT4A2 COMMUNITY » Nhà Kho » Tin học căn bản » Thủ thuật » Thủ thuật mạng »Menu drop down cho web, blog

Bài viết mới cùng chuyên mục

    Bài viết liên quan với Menu drop down cho web, blog

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

      Bạn không có quyền trả lời bài viết