[Code] Thanh nav cùi zách

  • Giựt
    1. [Code] Thanh nav cùi zách
    avatar MOD

    Demo


    http://testduat.forumvi.com/



    Tích góp từ


    Thứ 1 : http://web360plus.com/html-css/cach-tao-menu-da-cap-bang-html-va-css-trong-hoc-lap-trinh-thiet-ke-website-165.html

    Thứ 2 : Cái khung login của skin Chinh phục

    Thứ 3 : http://devs.forumvi.com/t620-tips-huong-dan-su-dung-font-awesome

    P/s : Nhớ rằng forum phải được cài đặt font-awesome
    Sửa lại các thông số phù hợp với forum

    Cách làm


    Vào CSS thêm :

    Code:
    /*Thanh nav*/
    .main_menu li{list-style:none}
    .main_menu a{text-decoration:none;color:#FFF!important;font-size:14px}
    .clear{clear:both}
    .main_menu{background:#00A69B;margin-top:30px;position:fixed;z-index:999;width:71.15%;top:-30px;box-shadow:0 1px 1px #DDD;left:195px}
    .main_menu i{margin-right:2px;font-size:15px}
    .forum-active i{font-size:17px}
    .main_menu>ul>li{float:left;padding:11px 27px;position:relative;border-right:1px dotted #E7E7E7}
    .main_menu>ul>li>ul{display:none;position:absolute;background:#00A69B;top:40px;width:198px;left:0;box-shadow:0 1px 1px #DDD}
    .main_menu>ul>li:hover ul{display:block}
    .main_menu ul li:hover{background:rgba(0,139,139,0.39);transition:all 0.25s}
    .main_menu>ul>li>ul>li{padding:10px 10px}
    .main_menu>ul>li>ul>li{border-bottom:1px dotted #ACACAC}
    .main_menu li:nth-child(1){background:rgba(0,139,139,0.39)}
    .khunglogin input[type="password"],.CPlogin input[type="text"],inputusername{margin-top:5px;width:92%;margin-right:2px;padding:7px;border:1px solid #DDD}
    .khunglogin{position:absolute;background:white;padding:10px;border:1px solid #DDD;border-top:0;display:none;margin-top:11.5px;padding:8px;position:absolute;width:210px;right:162px;top:26px}
    .khunglogin:hover,.btndn:hover+.khunglogin{display:block}
    .khunglogin input[type="text"]{padding:7px!Important;border:1px solid #DDD;width:193px}
    .avatar img{text-align:center!Important;width:100px;position:relative;right:-35px;padding:2px;border:1px solid #DDD;background:white}
    .avatar{background:transparent;border:none}

    Vào overall_header add code :

    HTML :

    Code:
    <!-- BEGIN switch_user_logged_in -->
            <div class="wrapper">
                <div class="main_menu">
                    <ul>
                      <li><a href="/forum"><i class="fa fa-home" aria-hidden="true"></i>  Diễn đàn</a></li>
                      <li><a href="/faq"><i class="fa fa-question-circle" aria-hidden="true"></i>  Trợ giúp</a></li>
                      <li class="lilich"><a href="/profile?mode=editprofile"><i class="fa fa-user" aria-hidden="true"></i>  Lý lịch</a>
                            <ul>
                                 <li><div class="avatar"></div></li>
                                 <script>//<![CDATA[$(".avatar").html(_userdata.avatar);//]]></script>
                                <li><a href="/profile?mode=editprofile"><i class="fa fa-cog" aria-hidden="true"></i> Thông Tin Cá Nhân</a></li>
                                <li><a href="/profile?mode=editprofile&page_profil=preferences"><i class="fa fa-lock" aria-hidden="true"></i> Tùy Chọn Riêng Tư</a></li>
                                <li><a href="/profile?mode=editprofile&page_profil=avatars"><i class="fa fa-picture-o" aria-hidden="true"></i> Thay Ảnh Đại Diện</a></li>
                                <li><a href="/search?search_id=egosearch"><i class="fa fa-list-alt" aria-hidden="true"></i> Bài Viết Của Bạn</a></li>
                                <li><a href="/privmsg?folder=inbox"><i class="fa fa-inbox" aria-hidden="true"></i> Hộp tin nhắn</a></li>
                                <li><a href="/login?logout"><i class="fa fa-sign-out" aria-hidden="true"></i> Đăng Xuất</a></li>
                            </ul>
                        </li>
                      <li><a href="/search"><i class="fa fa-search" aria-hidden="true"></i>  Tìm kiếm</a></li>
                      <li><a href="/memberlist"><i class="fa fa-users" aria-hidden="true"></i>  Thành viên</a></li>
                      <li style="background: rgba(185, 147, 0, 0.62);border-left: 1px dotted #DDD;box-shadow: 0 0px 1px white;text-shadow: 1px 0px 1px #444;"><a href="/h2-page"><i class="fa fa-paw" aria-hidden="true"></i>  Vào shop pet</a></li>
                    </ul>
                    <div class="clear"></div>
                </div>
            </div>
                                      <!-- END switch_user_logged_in -->
                                      
                                       <!-- BEGIN switch_user_logged_out -->
            <div class="wrapper">
                <div class="main_menu">
                    <ul>
                      <li><a href="/forum"><i class="fa fa-home" aria-hidden="true"></i>  Diễn đàn</a></li>
                      <li><a href="/faq"><i class="fa fa-question-circle" aria-hidden="true"></i>  Trợ giúp</a></li>
                      <li><a href="/search"><i class="fa fa-search" aria-hidden="true"></i>  Tìm kiếm</a></li>
                      <li><a href="/memberlist"><i class="fa fa-users" aria-hidden="true"></i>  Thành viên</a></li>
                      <li class="btndn"><a href="/login"><i class="fa fa-sign-in" aria-hidden="true"></i>  Đăng nhập</a></li>
                      <form class="khunglogin" action="/login.forum" method="post" name="form_login">
        <input placeholder="Username" type="text" name="username">
        <input placeholder="Password" type="password" name="password">
        <br>
        <input type="submit" name="login" value="Đăng Nhập" style="float:right;margin-top:10px;vertical-align:top;width:100%;">
        <input type="hidden" name="redirect" value="/">
        </form>
                      <li><a href="/register"><i class="fa fa-user-plus" aria-hidden="true"></i>  Đăng kí</a></li>
                    </ul>
                    <div class="clear"></div>
                </div>
            </div>
                                      <!-- END switch_user_logged_out -->
    #codefm

    Tags: #nav #thanh



    Được sửa bởi trandangduat ngày 28.08.16 16:55; sửa lần 1.

  • Móm Đặc Biệt
    2. Re: [Code] Thanh nav cùi zách
    avatar S-MOD
    Lần sau đăng bài đừng cho vào Spoiler nhe bạn :)


    --Chữ ký--
    Laughing Diễn đàn Rao vặt, anh em rãnh ghé thăm nhé Laughing


    Very Happy Địa chỉ: http://vnraovat.forumvi.com/ Very Happy
  • Giựt
    3. Re: [Code] Thanh nav cùi zách
    avatar MOD
    Ok Very Happy


    --Chữ ký--
    Diễn đàn Kênh Game 360>> Smile
  • Sponsored content

Thông tin tác giả
avatar
MOD
Bài viết :
273
Points :
440
Like :
89
Punbb
Cẩn thận
Status :
Giựt đẹp trai
Xem lý lịch thành viên
Thông tin tác giả
avatar
S-MOD
Bài viết :
285
Points :
592
Like :
157
Punbb
An toàn
Status :
Đành vậy thế thôi
Xem lý lịch thành viên http://vnraovat.forumvi.com/
Thông tin tác giả
avatar
MOD
Bài viết :
273
Points :
440
Like :
89
Punbb
Cẩn thận
Status :
Giựt đẹp trai
Xem lý lịch thành viên
Thông tin tác giả
Sponsored content
Bài viết liên quan
    Đang tải dữ liệu

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