31-07-2013, 11:36 PM
Đầ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
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
Xin chào mọi người PCNDL tự hào là thành viên đã lâu rồi của Diễn đàn SV khoa Kinh Doanh Quốc Tế. Rất mong mọi người kính nể nha !!!
=======haiquan.info=====
=======haiquan.info=====