TẠO MENU VỚI HIỆU ỨNG ẨN HIỆN

TẠO MENU VỚI HIỆU ỨNG ẨN HIỆN - Bản rút gọn

+- F@rum_Haiquan.info (*_*) (http://haiquan.info/F@rum)
+-- Diễn đàn: TIN HỌC- CÔNG NGHỆ (http://haiquan.info/F@rum/forumdisplay.php?fid=101)
+--- Diễn đàn: MÃ NGUỒN (http://haiquan.info/F@rum/forumdisplay.php?fid=102)
+---- Diễn đàn: MYBB (http://haiquan.info/F@rum/forumdisplay.php?fid=103)
+---- Chủ đề: TẠO MENU VỚI HIỆU ỨNG ẨN HIỆN (/showthread.php?tid=1464)

TẠO MENU VỚI HIỆU ỨNG ẨN HIỆN - PCNDL - 31-07-2013

Đầ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

RE: TẠO MENU VỚI HIỆU ỨNG ẨN HIỆN - ngocvu1403 - 01-08-2013

Thank PCNDL nhìu!!!!

Demo: http://haiquan.info/F@rum/

:soldier_baby10:

RE: TẠO MENU VỚI HIỆU ỨNG ẨN HIỆN - ngocvu1403 - 01-08-2013

Nhưng mã màu đơn giản các bạn có thể chọn tại đây nhé

http://test.haiquan.info/mamau/

RE: TẠO MENU VỚI HIỆU ỨNG ẨN HIỆN - PCNDL - 01-08-2013

(01-08-2013, 02:50 AM)ngocvu1403 Đã viết: Nhưng mã màu đơn giản các bạn có thể chọn tại đây nhé

http://test.haiquan.info/mamau/

Sao nó báo có trojan zdậy? :soldier_baby10:

(01-08-2013, 01:51 AM)ngocvu1403 Đã viết: Thank PCNDL nhìu!!!!

Demo: http://haiquan.info/F@rum/

HÌ HÌ KIỂU CÁM ƠN NÀY MỚI THẤY ĐÓ NHA! :soldier_baby11:

RE: TẠO MENU VỚI HIỆU ỨNG ẨN HIỆN - ngocvu1403 - 01-08-2013

hihihi. cảm ơn với cây kẹo mút nak :sm9bekytu14: