[PCNDL]

Đầu tiên bạn vào template/style chọn themes bạn đang sử dụng.

Bấm vào Adstylesheet .

Mục File Name: diền vào: spotlightmenu.css

Bấm vào: Write my own content, chép cái này vào:

<style type="text/css">

.spotlightmenu{
width: 100%;
overflow:hidden;
}

.spotlightmenu ul{
margin: 0;
padding: 0;
font: bold 14px Verdana; /* font style and size */
list-style-type: none;
text-align: center; /* "left", "center", or "right" align menu */
}

.spotlightmenu li{
display: inline-block;
position:relative;
padding: 5px;
margin: 0;
margin-right: 5px; /* right margin between menu items */
}


.spotlightmenu li a{
display:inline-block;
padding: 5px;
min-width:20px; /* horizontal diameter of spotlight */
height:20px; /* vertical diameter of spotlight */
text-decoration: none;
color: black;
margin: 0 auto;
overflow:hidden;
-moz-transition: all 0.5s ease-in-out; /* CSS3 transition to animate all A properties */
-webkit-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-ms-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}

.spotlightmenu li:hover a{
color: white;
background: #0055A8; /* background color of spotlight */
-webkit-border-radius: 50%; /* large radius to create circular borders */
-moz-border-radius: 50%;
border-radius: 50%;
}

.spotlightmenu li a span{
position:relative;
top:35%; /* move text down so it appears centered within menu item */
}

</style>

SAVE LẠI

Tiếp tục phần 2

Vào header chép cái này vào theo chổ bạn muốn nó hiển thị:

<div class="spotlightmenu">
                <ul>
                    <li><a href="{$mybb->settings['bburl']}/index.php">Index</a></li>
                    <li><a href="{$mybb->settings['bburl']}/memberlist.php">Member List</a></li>
                    <li><a href="{$mybb->settings['bburl']}/calendar.php">Calender</a></li>
                    <li><a href="{$mybb->settings['bburl']}/misc.php?action=help">Help</a></li>
                    <li><a href="{$mybb->settings['bburl']}/showteam.php">Forum Team</a></li>
</ul>   
            </div>

SAVE LẠI

NÊU BẠN MUỐN THAY ĐƯỜNG DẪN THÌ THAY ĐỊA CHỈ TẠI:

href="{$mybb->settings['bburl']}/memberlist.php"> THEO Ý CỦA BẠN.

NẾU MUỐN THAY ĐỖI CÁCH HIỂN THỊ TRÒN HAY ELIP THÌ THAY THÔNG SỐ TẠI:

min-width:20px; /* horizontal diameter of spotlight */
height:20px; /* vertical diameter of spotlight */

Mặc định là 50px

Thay màu khi rê chuột là;

background: #0055A8;

Thay màu chử khi áp dụng:

color: white

Chú ý;
Các code nên chép qua notepad rồi copy vào mới không bị lổi.

Chúc các bạn thành công

PCNDL

Có thể liên quan đến chủ đề...
Tạo menu với hiệu ứng khi rê chuột (Phần 2)
Hướng dẫn Hiện chatbox mọi trang cho mybb