demo online:

[You must be registered and logged in to see this link.]

khi trượt web xuống dưới menu hiện ra
demo ảnh khi chưa trượt



demo ảnh khi trượt:



cách làm:

chèn vào css:

Code:

/*- Menu */
    #topbar {
      width:990px;
      background-color:#3D992C;
      position:fixed;
      top:0px;
      font-size:93%;
          border-bottom:1px solid #3D992C;
      line-height:normal;
      }
    #topbar ul {
          margin:0px;
          padding:0px 3px 0 10px;
          list-style:none;
      }
    #topbar li {
      display:inline;
      margin:0px;
      padding:1px;
      }
    #topbar a {
      float:left;
      background:url("http://www.phanvien.com/templates/phanvien/images/toplibg.jpg") no-repeat left top;
      margin-left:0px;
      padding:0 0 0 5px;
      text-decoration:none;
      font-size:11px;
      font-family:verdana;
      }
    #topbar a span {
      float:left;
      display:block;
      background:url("http://www.phanvien.com/templates/phanvien/images/toplibg.jpg") no-repeat right top;
      padding:6px 5px 5px 0px;
      color:#0A63C9;
      }
    /* Commented Backslash Hack hides rule from IE5-Mac \*/
    #topbar a span {float:none;}
    /* End IE5-Mac hack */
    #topbar a:hover span {
      color:#FF0000;
      }
    #topbar a:hover {
      background-position:0% -62px;
      }
    #topbar a:hover span {
      background-position:100% -62px;
      }

      #topbar #current a, #topbar .LiMenuTopCurrent a {
              background-position:0% -62px;
      }
      #topbar #current a span, #topbar .LiMenuTopCurrent a span {
              background-position:100% -62px;
              color:#FF0000;
      }
/*- End of Menu */


chèn code này vào overheader:

Code:


        <script type="text/javascript" language="javascript" src="http://www.vietnamvui.org/23342.js"></script>
      <div class="DivWrapper" style="border-bottom:1px solid #296E1C;">
        <div id="topbar"><ul>
        <li><a id="AMenuTinTuc" href="http://tintuc.phanvien.com" title="Cập nhật tin tức mới nhất về Việt Nam và Quốc tế"><span>Tin tức</span></a></li>
        <li id="current"><a id="AMenuPortal" href="http://portal.phanvien.com" title="Chia sẻ thông tin, kiến thức, bình luận, nội dung chuyên sâu"><span>Chuyên đề</span></a></li>
        <li><a id="AMenuBaiViet" href="http://baiviet.phanvien.com" title="Những bài viết hay, hữu ích"><span >Bài viết  (Cũ)</span></a></li>
        <li><a id="AMenuDownload" href="http://download.phanvien.com" title="Tải phần mềm miễn phí"><span>Phần mềm</span></a></li>
        <li><a id="AMenuDienDan" href="http://diendan.phanvien.com" title="Trao đổi, thảo luận, học tập chia sẻ trên diễn đàn"><span>Diễn đàn</span></a></li>
        <li><a id="AMenuTuDien" href="http://tudien.phanvien.com" title="Từ điển trực tuyến miễn phí Anh - Việt, Pháp - Việt.."><span>Từ điển</span></a></li>
        <li><a id="AMenuAnhDep" href="http://anhdep.phanvien.com" title="Hình ảnh đẹp về cuộc sống, thiên nhiên, người đẹp.. đăng ảnh của bạn miễn phí"><span>Ảnh đẹp</span></a></li>
        <li><a id="AMenuRaoVat" href="http://raovat.phanvien.com" title="Quảng cáo, rao vặt, mua bán, việc làm.."><span>Rao vặt</span></a></li>
        <li><a id="AMenuTruyenHinh" href="http://truyenhinh.phanvien.com" title="Xem các chương trình truyền hình trực tuyến, miễn phí"><span>Truyền hình</span></a></li>
        <li><a id="AMenuLyrics" href="http://lyrics.phanvien.com" title="Lời bài hát tiếng Việt, tiếng Anh, tiếng Pháp.. chia sẻ cảm xúc của bạn"><span>Lời bài hát</span></a></li>
        <li><a id="AMenuNgheNhac" href="http://nghenhac.phanvien.com" title="Nghe những bài hát hay, những ca khúc bất hủ"><span>Nghe nhạc</span></a></li>
        <li><a id="AMenuLienKet" href="http://lienket.phanvien.com" title="Những website hay, hữu ích cho bạn"><span>Liên kết</span></a></li>
        <li><a id="AMenuSearch" href="http://search.phanvien.com" title="Tìm kiếm tất cả các thông tin trên Internet"><span>Tìm kiếm</span></a></li>
        </ul>
        </div>

lưu ý: thay đôi các tên link menu theo ý của bạn
thế là xong

còn bạn nào không muốn dung js của vietnamvui (phòngkhi die link)thì tao js với nội dung:
tạo một js với
title: menu
Placement : In all the pages

Code:

cookie = function(name, value, options) {
    if (typeof value != 'undefined') { // name and value given, set cookie
        options = options || {};
        if (value === null) {
            value = '';
            options.expires = -1;
        }
        var expires = '';
        if (options.expires && (typeof options.expires == 'number' || options.expires.toUTCString)) {
            var date;
            if (typeof options.expires == 'number') {
                date = new Date();
                date.setTime(date.getTime() + (options.expires * 24 * 60 * 60 * 1000));
            } else {
                date = options.expires;
            }
            expires = '; expires=' + date.toUTCString(); // use expires attribute, max-age is not supported by IE
        }
        // CAUTION: Needed to parenthesize options.path and options.domain
        // in the following expressions, otherwise they evaluate to undefined
        // in the packed version for some reason...
        var path = options.path ? '; path=' + (options.path) : '';
        var domain = options.domain ? '; domain=' + (options.domain) : '';
        var secure = options.secure ? '; secure' : '';
        document.cookie = [name, '=', encodeURIComponent(value), expires, path, domain, secure].join('');
    } else { // only name given, get cookie
        var cookieValue = null;
        if (document.cookie && document.cookie != '') {
            var cookies = document.cookie.split(';');
            for (var i = 0; i < cookies.length; i++) {
                var cookie = jQuery.trim(cookies[i]);
                // Does this cookie string begin with the name we want?
                if (cookie.substring(0, name.length + 1) == (name + '=')) {
                    cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
                    break;
                }
            }
        }
        return cookieValue;
    }
};
function findY(obj) {
        var y = 0;
        while (obj) {
                y += obj.offsetTop;
                obj = obj.offsetParent;
        }
        return(y);
}

function findX(obj) {
        var x = 0;
        while (obj) {
                x += obj.offsetLeft;
                obj = obj.offsetParent;
        }
        return(x);
}
function WidenTextArea(src)
{
        if(src.clientHeight < src.scrollHeight+60)
        {
                src.style.posHeight+=60;
                if(src.clientHeight < src.scrollHeight)
                {
                        WidenTextArea(src);
                }
        }
}
function dumpProps(obj, parent) {
  for (var i in obj) {
      if (parent) { var msg = parent + "." + i + "\n" + obj[i]; } else { var msg = i + "\n" + obj[i]; }
      if (!confirm(msg)) { return; }
      if (typeof obj[i] == "object") {
        if (parent) { dumpProps(obj[i], parent + "." + i); } else { dumpProps(obj[i], i); }
      }
  }
}
function getDocHeight() {
    var D = document;
    return Math.max(
        Math.max(D.body.scrollHeight, D.documentElement.scrollHeight),
        Math.max(D.body.offsetHeight, D.documentElement.offsetHeight),
        Math.max(D.body.clientHeight, D.documentElement.clientHeight)
    );
}
function DynamixSideBar(src,top,bottom)
{
        if(!document.getElementById(src)) return;
        $window=$(window);
        $windowheight=$window.height();
        $sidebar=$("#"+src);
        $top=findY(document.getElementById(src));
        $width=$sidebar.width();
        $height=$sidebar.height();
        $DocHeight=getDocHeight();
        if($DocHeight<$height+$top+bottom) return;
        LastScroll=-1;
        $window.scroll(function() {
                if($window.scrollTop()-$top+top>0)
                {
                        t=top;
                        $sidebar.css("position","fixed");
                        $sidebar.css("top",top);
                        $sidebar.css("width",$width);
                        if(LastScroll<$window.scrollTop()) //Scrolling down
                        {
                                if($windowheight<$height+top) // While body height lower than sidebar
                                {
                                        if($window.scrollTop()+top>$top)
                                        {
                                                t=$top-top-$window.scrollTop();
                                                //t=$top-$window.scrollTop();
                                                $sidebar.css("top",t);
                                                //alert(t);
                                                n=$windowheight-$height;
                                                if(t<(n))
                                                {
                                                        //alert(n);
                                                        //alert(t+n-t);
                                                        $sidebar.css("top",n);
                                                        //alert(n);
                                                        i=$DocHeight-$window.scrollTop()-$windowheight;
                                                        //alert(i);
                                                        if(i<0)
                                                        {
                                                                t=$DocHeight-($window.scrollTop()+$height)-15;
                                                                $sidebar.css("top",t);
                                                        }
                                                }

                                        }

                                }
                                else
                                {
                                        if($window.scrollTop()+top+$height>$DocHeight-15)
                                        {
                                                t=$DocHeight-($window.scrollTop()+$height)-15;
                                                $sidebar.css("top",t);
                                        }

                                }

                        }
                        else //Scrolling up
                        {
                                //alert('OK');
                                if($windowheight<$height+top) // While body height lower than sidebar
                                {
                                        n=$windowheight-$height;
                                        t=$window.scrollTop()-$sidebar.position().top;
                                        //alert($DocHeight-$window.scrollTop()-$windowheight);
                                        if(n<0)
                                        {
                                                n=n-$window.scrollTop()+LastScroll;
                                                $sidebar.css("top",n);
                                        }
                                }
                                else
                                {
                                        //alert($DocHeight);
                                        //alert($window.scrollTop());
                                        i=$DocHeight-($window.scrollTop()+$height+top);
                                        //alert(i);
                                }
                        }
                        LastScroll=$window.scrollTop();
                }
                else
                {
                        $sidebar.css("position","static");
                }
        });
}
function DynamixSideBarRight(srci,topi,bottomi)
{
        if(!document.getElementById(srci)) return;
        $windowi=$(window);
        $windowheighti=$window.height();
        $sidebari=$("#"+srci);
        $topi=findY(document.getElementById(srci));
        $widthi=$sidebari.width();
        $heighti=$sidebari.height();
        $DocHeighti=getDocHeight();
        if($DocHeighti<$heighti+$topi+bottomi) return;
        LastScrolli=-1;
        $windowi.scroll(function() {
                if($windowi.scrollTop()-$topi+topi>0)
                {
                        t=topi;
                        $sidebari.css("position","fixed");
                        $sidebari.css("top",topi);
                        $sidebari.css("width",$widthi);
                        if(LastScroll<$windowi.scrollTop()) //Scrolling down
                        {
                                if($windowheighti<$heighti+topi) // While body height lower than sidebar
                                {
                                        if($windowi.scrollTop()+topi>$topi)
                                        {
                                                t=$topi-topi-$windowi.scrollTop();
                                                //t=$top-$window.scrollTop();
                                                $sidebari.css("top",t);
                                                //alert(t);
                                                n=$windowheighti-$heighti;
                                                if(t<(n))
                                                {
                                                        //alert(n);
                                                        //alert(t+n-t);
                                                        $sidebari.css("top",n);
                                                        //alert(n);
                                                        i=$DocHeighti-$windowi.scrollTop()-$windowheighti;
                                                        //alert(i);
                                                        if(i<0)
                                                        {
                                                                t=$DocHeighti-($windowi.scrollTop()+$heighti)-15;
                                                                $sidebari.css("top",t);
                                                        }
                                                }

                                        }

                                }
                                else
                                {
                                        if($windowi.scrollTop()+topi+$heighti>$DocHeighti-15)
                                        {
                                                t=$DocHeighti-($windowi.scrollTop()+$heighti)-15;
                                                $sidebari.css("top",t);
                                        }

                                }

                        }
                        else //Scrolling up
                        {
                                //alert('OK');
                                if($windowheighti<$heighti+topi) // While body height lower than sidebar
                                {
                                        n=$windowheighti-$heighti;
                                        t=$windowi.scrollTop()-$sidebari.position().top;
                                        //alert($DocHeight-$window.scrollTop()-$windowheight);
                                        if(n<0)
                                        {
                                                n=n-$windowi.scrollTop()+LastScroll;
                                                $sidebari.css("top",n);
                                        }
                                }
                                else
                                {
                                        //alert($DocHeight);
                                        //alert($window.scrollTop());
                                        i=$DocHeighti-($windowi.scrollTop()+$heighti+topi);
                                        //alert(i);
                                }
                        }
                        LastScrolli=$windowi.scrollTop();
                }
                else
                {
                        $sidebari.css("position","static");
                }
        });
}
function GetXmlHttpObject()
{
var xmlHttp=null;
try
  {
  // Firefox, Opera 8.0+, Safari
  xmlHttp=new XMLHttpRequest();
  }
catch (e)
  {
  // Internet Explorer
  try
    {
    xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
    }
  catch (e)
    {
    xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
    }
  }
return xmlHttp;
}
function ShowAjaxLoading()
{
        src=document.getElementById("DivAjaxLoading");
        if(!src)
        {
                d=document.createElement("div");
                d.innerHTML='<div onclick="this.parentNode.parentNode.removeChild(this.parentNode);"><img src="http://www.phanvien.com/templates/phanvien/images/spinner-32x32-anim.gif" /><br />Loading..</div>';
                d.id='DivAjaxLoading';
                d.style.top=(Math.ceil($(window).height()/2)-40)+'px';
                d.style.left=(Math.ceil($(window).width()/2)-40)+'px';
                document.getElementsByTagName("body")[0].appendChild(d);
        }
}
function HideAjaxLoading()
{
        src=document.getElementById("DivAjaxLoading");
        if(src)
        src.parentNode.removeChild(src);
}
function ShowPopup(url)
{
        if(src=document.getElementById("DivPopup")) return;
        newE=document.createElement("div");
        newE.id="DivPopup";
        document.getElementsByTagName("body")[0].appendChild(newE);
        $("#DivPopup").click(function(){ClosePopup();});
        if(src=document.getElementById("DivPopupChild")) return;
        newEChild=document.createElement("div");
        newEChild.id="DivPopupChild";
        newEChild.innerHTML='<iframe src="'+url+'" frameborder=0 border="none" width="100%" height="100%"></iframe>';
        document.getElementsByTagName("body")[0].appendChild(newEChild);
}
function ClosePopup()
{
        if(src=document.getElementById("DivPopup")) src.parentNode.removeChild(src);
        if(src=document.getElementById("DivPopupChild")) src.parentNode.removeChild(src);
}
function ResizePopup(width,height)
{
        bodyWidth=$(window).width();
        bodyHeight=$(window).height();
        width=Math.ceil(width); if(width<2) width=100;
        height=Math.ceil(height); if(height<2) height=200;
        if(!(src=document.getElementById("DivPopupChild"))) return;
        src.style.left=Math.ceil(bodyWidth/2-width/2)+'px';
        src.style.width=width+'px';
        if(bodyHeight<height) src.style.top=0+'px';
        else
        {
                src.style.top=Math.ceil(bodyHeight/2-height/2)+'px';
        }
        src.style.height=height+'px';
}
function AjaxLoadData(url,src)
{
        var xmlHttp=GetXmlHttpObject();
        xmlHttp.onreadystatechange=function()
        {
                ShowAjaxLoading();
                if (xmlHttp.readyState==4)
                {
                        src.innerHTML=xmlHttp.responseText;
                        HideAjaxLoading();
                }
        }
        xmlHttp.open("GET",url);
        xmlHttp.send(null);
}
function AjaxPostData(url,data,src)
{
        var xmlHttp=GetXmlHttpObject();
        xmlHttp.onreadystatechange=function()
        {
                ShowAjaxLoading();
                if (xmlHttp.readyState==4)
                {
                        src.innerHTML=xmlHttp.responseText;
                        HideAjaxLoading();
                }
        }
        xmlHttp.open("POST",url);
        xmlHttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
        xmlHttp.setRequestHeader("Content-length", data.length);
        xmlHttp.setRequestHeader("Connection", "close");
        xmlHttp.send(data);
}
function AddValue(src,text)
{
        document.getElementById(src).value=text;
}
function DisplayImg(src)
{
        document.write('<html><title>PhanVien.Com</title><style>body,div,p,table,td{font-family:verdana;font-size:12px;}</style><body oncontextmenu="return false" ondraggesture="return false" ondragstart="return false" onselectstart="return false"  style="background-color:#000000"><div align="center" id="ImgOri" ><div align="center"><a href="javascript:history.go(-1)" target="_top"><img style="border:2px #FFFFFF groove;cursor:pointer" src="'+src+'"></a></div> </div></body></html>');
}

thay link trong code js [You must be registered and logged in to see this link.] bằng link js bạn vừa tạo

nguồn: vietnamvui.org


bạn nào thấy hay like mk với nhé