tạo menu chính cố định và lên trên cùng

mình muốn làm cái menu nó lên trên cùng và dc giữ cố định khi cuộn chuột như hình, ai giúp mình với và cho nó kéo dài ra luôn, nhưng vẩn có cái header ở dưới thanh menu nhé !

 

hay mình xin ăn ké nhá

 

ko ai giúp hết hả

 

giống cái này ah http://xf.sinhvienepu.com

 

thêm đoạn css vào extra

.banner {

font-size: 80% /*smaller*/;
font-weight: bold;

position: fixed;
top: 2em;
left: auto;
width: 8.5em;
right: 2em;


rồi sau đó làm cái thẻ <div class="banner"> nội dung bạn muốn hiện ở cái thanh ấy</div>

 

cái này chỉ là banner thui mà, còn thanh menu lên trên và giữ cố định lại, bỏ cái đăng nhập luôn vì mình dùng cách đăng nhập khác rùi?
http://vietso.info/forum

 

cái này thì đẹp rùi, nhưng mình ko thích, giống như trong hình là dc, hi

 

hướng dẫn cụ thể anh cofee ơi

 

giúp em làm 2 cái này nhá cảm ơn anh trước

 

Cái navigation:
Code Css:

Mã:

#navigation .pageContent
{
    /*height: {xen:calc '@headerTabHeight * 2 + 2'}px;*/
    height: @headerTabHeight;
    position: relative;
}
 
    .navTabs
    {
        @property "navTabs";
        font-weight: bold;
        font-size: 11px;
        @property "/navTabs";
 
        height: @headerTabHeight;
    }
 
.navTabs.primary_nav{
    float: left;
}
 
.navTabs.user_bar{
    float: right;
}
 
        .navTabs .publicTabs
        {
            float: left;
        }
 
        .navTabs .visitorTabs
        {
            float: right;
        }
 
            .navTabs .navTab
            {
                float: left;
                white-space: nowrap;
                word-wrap: normal;
            }
 
 
/* ---------------------------------------- */
/* Links Inside Tabs */
 
.navTabs .navLink,
.navTabs .SplitCtrl
{
    @property "navLink";
    display: block;
    float: left;
    vertical-align: text-bottom;
    text-align: center;
    outline: 0 none;
    @property "/navLink";
 
    height: @headerTabHeight;
    line-height: @headerTabHeight;
}
 
    .navTabs .publicTabs .navLink
    {
        padding: 0 20px;
    }
 
    .navTabs .visitorTabs .navLink
    {
        padding: 0 10px;
    }
 
    .navTabs .navLink:hover
    {
        text-decoration: none;
    }
 
    /* ---------------------------------------- */
    /* unselected tab, popup closed */
 
    .navTabs .navTab.PopupClosed .navLink
    {
        @property "navTabDefault";
        color: @primaryNavLinkHover;
        @property "/navTabDefault";
    }
 
        .navTabs .navTab.PopupClosed:hover .navLink
        {
        @property "navTabHover";
        color: rgb(76, 76, 76);
        @property "/navTabHover";
        }
 
            .navTabs .navTab.PopupClosed:hover .navLink,
            .navTabs .navTab.PopupClosed .navLink:hover
            {
                color: @navTabHover.color;
            }
 
    .navTabs .navTab.PopupClosed .arrowWidget
    {
        /* circle-arrow-down-light */
        background-position: -64px 0;
    }
 
    .navTabs .navTab.PopupClosed .SplitCtrl,
    .navTabs .navTab.PopupOpen .SplitCtrl
    {
        opacity: 0.1;
        margin-left: -14px;
        width: 14px;
    }
 
    .navTabs .navTab.PopupClosed:hover .SplitCtrl,
    .navTabs .navTab.PopupOpen:hover .SplitCtrl
    {
        opacity: 1;
    }
 
        .navTabs .navTab.PopupClosed .SplitCtrl
        {
            background: transparent url('@imagePath/xenforo/widgets/nav_menu_gadget.png') no-repeat center left;
        }
 
        .navTabs .navTab.PopupOpen .SplitCtrl
        {
            background: transparent url('@imagePath/xenforo/widgets/nav_close_menu_gadget.png') no-repeat center left;
        }
 
    /* ---------------------------------------- */
    /* selected tab */
 
    .navTabs .navTab.selected .navLink,
    .navTabs .navTab.selected .navLink:hover,
    .navTabs .navTab.selected.PopupClosed:hover .navLink
    {
        @property "navTabSelected";
        font-weight: bold;
        color: #FFF;
        border-top: 2px solid rgb(221, 75, 57);
        @property "/navTabSelected";
    }
 
    .navTabs .navTab.selected .SplitCtrl
    {
        display: block;
    }
 
    .navTabs .navTab.selected .arrowWidget
    {
        /* circle-arrow-down */
        background-position: -63px 0;
    }
 
        .navTabs .navTab.selected.PopupOpen .arrowWidget
        {
            /* circle-arrow-up */
            background-position: -47px 0;
        }
 
    /* ---------------------------------------- */
    /* unselected tab, popup open */
 
    .navTabs .navTab.PopupOpen .navLink
    {
        color: @navTabHover.color;
    }
 
 
    /* ---------------------------------------- */
    /* selected tab, popup open (account) */
 
    .navTabs .navTab.selected.PopupClosed:hover .navLink,
    .navTabs .navTab.selected.PopupClosed .navLink:hover
    {
        color: @navTabSelected.color;
    }
 
    .navTabs .navTab.selected.PopupOpen .navLink
    {
        @property "popupControl";
        color: @whiteColor;
        background-color: @primaryNavLinkActive;
        border-top-left-radius: 3px;
        border-top-right-radius: 3px;
        border-bottom-right-radius: 0px;
        border-bottom-left-radius: 0px;
        @property "/popupControl";
    }
 
/* ---------------------------------------- */
/* Second Row */
 
.navTabs .navTab.selected .tabLinks
{
    display: none;
    @property "navTabSelected.background";
 
    @property "/navTabSelected.background";;
 
    width: 100%;
    padding: 0;
    border: none;
    overflow: hidden; zoom: 1;
    position: absolute;
    left: 0px;
    /*top: {xen:calc '@headerTabHeight + 2'}px;*/
    top: @headerTabHeight;
    height: @headerTabHeight;
    background-position: 0px -@headerTabHeight;
    *clear:expression(style.width = document.getElementById('navigation').offsetWidth + 'px', style.clear = "none", 0);
 
}
 
    .navTabs .navTab.selected .blockLinksList
    {
        background: none;
        padding: 0;
        border: none;
    }
 
    .navTabs .navTab.selected .tabLinks .menuHeader
    {
        display: none;
    }
 
    .navTabs .navTab.selected .tabLinks li
    {
        float: left;
        padding: 5px 0;
    }
 
        .navTabs .navTab.selected .tabLinks li:first-child
        {
            margin-left: 8px;
        }
 
        .navTabs .navTab.selected .tabLinks a
        {
            @property "navTabLink";
            font-size: 11px;
            color: @primaryNavLinkHover;
            padding: 0 10px;
            display: block;
            @property "/navTabLink";
     
            line-height: {xen:calc '@headerTabHeight - 10'}px;
        }
 
            .navTabs .navTab.selected .tabLinks a:hover,
            .navTabs .navTab.selected .tabLinks a:focus
            {
                @property "navTabLinkHover";
                color: @primaryDark;
                text-decoration: none;
                background-color: @primaryLighterStill;
                padding: 0 10px;
                outline: 0;
                @property "/navTabLinkHover";
         
            }
 
/* ---------------------------------------- */
/* Alert Balloons */
 
.navTabs .navLink .itemCount
{
    @property "alertBalloon";
    font-weight: bold;
    font-size: 9px;
    color: white;
    background-color: #e03030;
    padding: 0 2px;
    border-radius: 2px;
    position: absolute;
    right: 2px;
    top: -6px;
    line-height: 16px;
    min-width: 12px;
    _width: 12px;
    text-align: center;
    text-shadow: none;
    white-space: nowrap;
    word-wrap: normal;
    box-shadow: 2px 2px 5px rgba(0,0,0, 0.25);
    height: 16px;
    @property "/alertBalloon";
}
 
    .navTabs .navLink .itemCount .arrow
    {
        @property "alertBalloonArrow";
        border: 3px solid transparent;
        border-top-color: #e03030;
        border-bottom: 1px none black;
        position: absolute;
        bottom: -3px;
        right: 4px;
        line-height: 0px;
        text-shadow: none;
        _display: none;
/* Hide from IE6 */
width: 0px;
        height: 0px;
        @property "/alertBalloonArrow";
    }
 
.navTabs .navLink .itemCount.Zero
{
    display: none;
}
 
/* ---------------------------------------- */
/* Account Popup Menu */
 
.navTabs .navTab.account .navLink
{
    font-weight: bold;
}
 
#AccountMenu
{
    width: 274px;
}
 
#AccountMenu .menuHeader
{
    position: relative;
}
 
    #AccountMenu .menuHeader .avatar
    {
        float: left;
        margin-right: 10px;
    }
 
    #AccountMenu .menuHeader .visibilityForm
    {
        margin-top: 10px;
        color: @primaryMedium;
    }
 
    #AccountMenu .menuHeader .links .fl
    {
        position: absolute;
        bottom: 10px;
        left: {xen:calc '10 + 10 + 96'}px;
    }
 
    #AccountMenu .menuHeader .links .fr
    {
        position: absolute;
        bottom: 10px;
        right: 10px;
    }
 
#AccountMenu .menuColumns
{
    overflow: hidden; zoom: 1;
    padding: 2px;
}
 
    #AccountMenu .menuColumns ul
    {
        float: left;
        padding: 0;
        max-height: none;
        overflow: hidden;
    }
 
        #AccountMenu .menuColumns a,
        #AccountMenu .menuColumns label
        {
            width: 115px;
        }
 
#AccountMenu .statusPoster textarea
{
    width: 245px;
    margin: 0;
    resize: vertical;
    overflow: hidden;
}
 
#AccountMenu .statusPoster .submitUnit
{
    margin-top: 5px;
    text-align: right;
}
 
    #AccountMenu .statusPoster .submitUnit .statusEditorCounter
    {
        float: left;
        line-height: 23px;
        height: 23px;
    }
 
/* ---------------------------------------- */
/* Inbox, Alerts Popups */
 
.navPopup
{
    width: 260px;
}
 
.navPopup a:hover,
.navPopup .listItemText a:hover
{
    background: none;
    text-decoration: underline;
}
 
    .navPopup .menuHeader .InProgress
    {
        float: right;
        display: block;
        width: 20px;
        height: 20px;
    }
 
.navPopup .listPlaceholder
{
    max-height: 350px;
    overflow: auto;
}
 
    .navPopup .listPlaceholder ol.secondaryContent
    {
        padding: 0 10px;
    }
 
        .navPopup .listPlaceholder ol.secondaryContent.Unread
        {
            background-color: @inlineModChecked.background-color;
        }
 
.navPopup .listItem
{
    overflow: hidden; zoom: 1;
    padding: 5px 0;
    border-bottom: 1px solid @primaryLighterStill;
}
 
.navPopup .listItem:last-child
{
    border-bottom: none;
}
 
.navPopup .PopupItemLinkActive:hover
{
    margin: 0 -8px;
    padding: 5px 8px;
    border-radius: 5px;
    background-color: @primaryLighterStill;
    cursor: pointer;
}
 
.navPopup .avatar
{
    float: left;
}
 
    .navPopup .avatar img
    {
        width: 32px;
        height: 32px;
    }
 
.navPopup .listItemText
{
    margin-left: 37px;
}
 
    .navPopup .listItemText .muted
    {
        font-size: 9px;
    }
 
    .navPopup .unread .listItemText .title,
    .navPopup .listItemText .subject
    {
        font-weight: bold;
    }
 
.navPopup .sectionFooter .floatLink
{
    float: right;
}

Code html:

HTML:

<xen:edithint template="navigation.css" />
 
<div id="navigation">
    <div>
        <nav>
<div id="nav_bar">
<div class="navTabs primary_nav">
    <ul class="publicTabs">
 
        <!-- what new -->
            <li class="navTab forums {xen:if $tabs.forums.selected, 'selected'} Popup PopupControl PopupClosed"><a href="{xen:link 'find-new/threads'}" class="navLink">{xen:phrase whats_new}</a></li>
 
        <!-- forums -->
        <xen:if is="{$tabs.forums}">
            <li class="navTab forums {xen:if $tabs.forums.selected, 'selected'} Popup PopupControl PopupClosed">
                <a href="{$tabs.forums.href}" class="navLink">{$tabs.forums.title}</a>
            </li>
        </xen:if>
 
    </ul>
</div>
 
<div class="navTabs user_bar">
    <xen:if is="{$visitor.user_id}">
        <xen:include template="navigation_visitor_tab" />
    <xen:else />
        <ul class="visitorTabs">
            <li class="navTab PopupClosed">
                <h3 id="loginBarHandle">
                    <label for="LoginControl"><a href="{xen:link login}" class="navLink"><img src="@imagePath/xenforo/xenfocus/user_login.png" class='user_icon' style="top:0" alt='' /> {xen:if $xenOptions.registrationSetup.enabled, {xen:phrase log_in_or_sign_up}, {xen:phrase log_in}}</a></label>
                </h3>
            </li>
        </ul>
    </xen:if>
</div>
 
<span class="helper"></span>
</div>     
        </nav>
    </div>
</div>

Cái tiếp: khoanh tròn
Code html:

HTML:

            <div class="head_button">
                <ul id="nav">
                    <li>
                        <a href="{$tabs.forums.href}" title="{$tabs.forums.title}" class="but_link"><span class="home_btn"></span></a>
                        <ul>
                            <xen:if is="{$visitor.user_id}"><li><a href="{xen:link 'forums/-/mark-read', $forum, 'date={$serverTime}'}" class="OverlayTrigger">{xen:phrase mark_forums_read}</a></li></xen:if>
                            <xen:if is="{$canSearch}"><li><a href="{xen:link search, '', 'type=post'}">{xen:phrase search_forums}</a></li></xen:if>
                            <xen:if is="{$visitor.user_id}"><li><a href="{xen:link 'watched/threads'}">{xen:phrase watched_threads}</a></li></xen:if>
                            <li><a href="{xen:link 'find-new/threads'}">{xen:phrase whats_new}</a></li>
                        </ul>
                    </li>
                    <li><a href="http://xf.sinhvienepu.com/watched/threads" title="Chủ đề theo dõi" class="but_link"><span class="photo_btn"></span></a></li>
                    <li>
                        <a href="{$tabs.members.href}" title="Thành viên" class="but_link"><span class="pro5_btn"></span></a>
                        <ul>
                            <li><a href="{xen:link members}">{xen:phrase registered_members}</a></li>
                            <li><a href="{xen:link online}">{xen:phrase current_visitors}</a></li>
                            <xen:if is="{$xenOptions.enableNewsFeed}"><li><a href="{xen:link recent-activity}">{xen:phrase recent_activity}</a></li></xen:if>
                        </ul>
                    </li>
                    <li>
                        <a href="{$tabs.help.href}" title="{$tabs.help.title}" class="but_link"><span class="friend_btn"></span></a>
                        <ul>
                            <li><a href="{xen:link help/smilies}">{xen:phrase smilies}</a></li>
                            <li><a href="{xen:link help/bb-codes}">{xen:phrase bb_codes}</a></li>
                            <li><a href="{xen:link help/trophies}">{xen:phrase trophies}</a></li>
                        </ul>
                    </li>
                </ul>
            </div>

Code css:

Mã:

.head_button {float:left;margin-left: 21px; margin-top: 27px; display: block;}
.but_link {border: 1px solid #D9D9D9;height: 27px;margin-right: -4px;text-align: center;vertical-align: middle;width: 44px;display: inline-block;background-color: #F3F3F3;}
.but_link:first-child {border-radius: 2px 0 0 2px; -webkit-border-radius: 2px 0 0 2px; -moz-border-radius: 2px 0 0 2px; -khtml-border-radius: 2px 0 0 2px;-moz-border-radius: 2px 0 0 2px;-webkit-border-radius: 2px 0 0 2px;}
.but_link:active {background: -o-linear-gradient(top,#EEE,#E0E0E0);background: -webkit-gradient(linear,left top,left bottom,from(#EEE),to(#E0E0E0));background: -moz-linear-gradient(top,#EEE,#E0E0E0);background: -o-linear-gradient(top,#EEE,#E0E0E0);border-color: #BBB;box-shadow: inset 0 1px 5px #ccc; -webkit-box-shadow: inset 0 1px 5px #ccc; -moz-box-shadow: inset 0 1px 5px #ccc; -khtml-box-shadow: inset 0 1px 5px #ccc;-moz-box-shadow: inset 0 1px 5px #ccc;-webkit-box-shadow: inset 0 1px 5px #ccc;z-index: 2;}
.but_link:hover {background: #F3F3F3;background: -webkit-gradient(linear,left top,left bottom,from(whiteSmoke),to(#F1F1F1));background: -moz-linear-gradient(top,whiteSmoke,#F1F1F1);background: -o-linear-gradient(top,whiteSmoke,#F1F1F1);border: 1px solid #D9D9D9;height: 27px;margin-right: -4px;text-align: center;vertical-align: middle;width: 44px;}
.but_link span {width: 18px; height: 18px;display: inline-block;margin-top: 5px;}
.but_link .home_btn {background: url(styles/img-button.png) 0 -90px;}
.but_link:hover .home_btn {background: url(styles/img-button.png) 0 -137px;}
.but_link .photo_btn {background: url(styles/img-button.png) 0 -71px;}
.but_link:hover .photo_btn {background: url(styles/img-button.png) 0 -52px;}
.but_link .pro5_btn {background: url(styles/img-button.png) 0 -33px;}
.but_link:hover .pro5_btn {background: url(styles/img-button.png) 0 -156px;}
.but_link .friend_btn {background: url(styles/img-button.png) 0 0px;}
.but_link:hover .friend_btn {background: url(styles/img-button.png) 0 -175px;}
 
 
#nav li { /*margin: 0 5px;*/ padding: 0 0 8px; float: left; position: relative; list-style: none; } /* dropdown */ #nav li:hover > ul { display: block; } /* level 2 list */ #nav ul { display: none; margin: 0; padding: 0; left: 0; width: 200px; position: absolute; background-color: #F5F6F7; border: solid 1px #D9D9D9; -webkit-box-shadow: 0px 5px 5px rgba(0, 0, 0, 0.2); -moz-box-shadow: 0px 5px 5px rgba(0, 0, 0, 0.2); box-shadow: 0px 5px 5px rgba(0, 0, 0, 0.2); -webkit-box-shadow: 0px 5px 5px rgba(0, 0, 0, 0.2); -moz-box-shadow: 0px 5px 5px rgba(0, 0, 0, 0.2); -khtml-box-shadow: 0px 5px 5px rgba(0, 0, 0, 0.2); } #nav ul li { float: none; margin: 0; padding: 0; }
#nav ul a {
font-weight: normal;
padding: 5px 10px;
display: block;
text-shadow: 0 0 0 transparent, 0 1px 0 #fff;
}

Link ảnh tự lấy nhé

 

Cậu kéo xuống dưới chọn style ver 3 nó có cái float bar giống ý cậu

 

Em chi

em chỉ cần làm cái menu mà em khoanh tròn thôi sao khó thê ko đc cái nào cả

 

hi, mình thì muốn nguyên cả thanh menu lên trên cùng, kéo nó ra hết chiểu ngang, bỏ luôn cái kéo thả đăng ký, đăng nhập luôn, có ai làm dc thì có thể làm trực tiếp cho mình dc ko? qua teemview ak

 

khiếp ăn sẵn thế tự mà cài đị không bao giờ muốn sửa không biết đường nào mà sửakhiếp ăn sẵn thế tự mà cài đị không bao giờ muốn sửa không biết đường nào mà sửa

 

hì, thì nhờ ng ta làm lần rùi nhìn vào là biết cách làm, những cái khác cũng tương tự

 

Cái khoanh tròn đấy còn gì nữa

 

Mình còn ko thấy bạn khoang tròn cái gì =w=

 

hướng dẫn em lại chứ em làm toàn lỗi

 

@nhoccute: đọc lại post trên đi. Cái dưới là cái khoanh tròn đấy