Thiết kế Menu với CSS ??? - www.phpbasic.com

Thiết kế Menu với CSS ??? 2009-06-25 05:48:59

Chào mọi người,

Tôi đang tập thiết kế thanh Navbar bằng CSS ( không rành CSS ).Tôi có tham khảo 1 số tài liệu trên mạng cũng tạo được mấy cái đơn giản nhưng còn nhiều chổ chưa hiểu trong việc dùng mấy cái hiệu ứng. VD như hiệu ứng khi nhấp chuột và hiệu ứng sau khi chọn ( tức là khi chọn mục nào thì khi chuyển sang trang đó thì mục đó vẫn duy trì trạng thái mà mình đã đặt như đổi màu hoặc sáng lên ). Tôi xem những tài liệu trên mạng thì thấy có mấy thuộc tính hover, active, focus, visit ... nhưng khi áp dụng thì thấy không có tác dụng ( chỉ có cái hover là có tác dụng khi di chuột vào ). Do đó mong các bạn rành về CSS chỉ giúp đỡ cách dùng những thuộc tính khác làm sao để nó có tác dụng.

Xin cám ơn trước.

Tra loi 28 comment(s) nguoimoi 2009-06-25 05:48:59

Về Đâu 2009-06-25 07:24:35

Acitve và focus gần như là giống nhau. dịch tên nó ra bạn cũng hiểu tác dụng rồi ha. Còn về vụ visited thì nó dành cho link bạn đã từng xem rồi. Hover thì như bạn nói nhưng trên IE6 thì chỉ có thẻ A có thuộc tính này.
Còn ví dụ của bạn nếu mình hiểu không sai là như sau. Khi hover lên bạn đổi màu background sang đen chẳng hạn ( đang ở trang a.php) và khi bạn click sang trang b.php thì cái link vẫn màu đen phải không. Nếu vậy thì bạn cần dùng cách khác vì CSS không thể làm được.

nguoimoi 2009-06-25 10:13:21

Tình hình của mình là thế này. Giả sử ban đầu thanh Navbar tất cả các nút đều màu trắng. Mình đã thêm tất cả các thuộc tính hover, active, focus, visit ... vào để nó đổi sang màu khác. Nhưng khi chạy thì chỉ thấy có cái hover là làm việc tức là khi trỏ chuột vào thì nó đổi sang màu đen. Sau đó nhấp vào mục đó ( VD chuyển sang trang_2.php )thì khi chuyển sang trang mới thanh Navbar trở lại như ban đầu ( như chưa đụng gì vào mấy cái nút ) là các nút đều màu trắng ( Tức không đánh dấu được là đang xem ở khu vực nào ).

Theo như mấy cái tài liệu mình xem search trên google thì thấy họ chỉ làm với CSS không thấy đề cập với việc phải kết hợp thêm ngôn ngữ lập trình khác. Nhưng không hiểu sao mình áp dụng không được ( kể cả copy script để test ). Không biết có phải do khi chuyển sang trang khác thì nó load toàn bộ trang lại nên thanh Navbar đồng thời cũng trở lại trạng thái ban đầu ???

TK 2009-06-26 09:07:44

Cái kia là Visited chứ ko phải visit.

Về Đâu 2009-06-26 10:57:12

Nếu bạn không biết làm sao để test các thuộc tính active, focus, visited thì làm sao bạn biết nó có hoạt động hay không.

Còn về việc kết hợp với ngôn ngữ khác nghe ghê quá bạn. Đơn giản là vậy khi ở trang index.php bạn cứ để bình thường. Khi qua cái trang_2.php ( vd như trên nav của bạn là trang2) thì bạn check xem trang hiện tại có phải là trang_2.php không nếu phải thì nhét 1 cái class= active vào cái thẻ chứa cái trang2 của bạn trên nav. Đơn giản thế thôi.

Ken Phan 2009-06-26 11:05:44


acx ... ^^ giờ bạn làm đơn giản thế này, không cần phải selected, visitor gì gì đó hết
tạo trang index.php:

<?
a { color:#000 }
a:hover  { color:#f30 }
a.here { color:#090 }
<a href="index.php" class="here">home</a>
<a href="test.php">test</a>
?>

tạo trang test.php:

<?
a { color:#000 }
a:hover  { color:#f30 }
a.here { color:#090 }
<a href="index.php">home</a>
<a href="test.php" class="here">test</a>
?>

:D thế thui chứ có gì đâu ghê gớm

namnt 2009-06-27 11:32:59

Bạn test thử xem,bình thường css trên các trình duyệt như firefox thì chỉ cần thuộc tính a:active là active đc,còn ở ie6 bạn phải thêm thuộc tính focus thì sẽ active trên ie6 đc ... :)

<html>
<head>
<style>
a{color:#333;}
a:hover{color:#456;}
a:active,a:focus{text-decoration:none}
</style>
</head>
<body>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Dowload</a></li>
<li><a href="#">Music</a></li>
<li><a href="#">Forum</a></li>
</ul>
</body>
</html>

Về Đâu 2009-06-28 07:01:33

không ai hiểu mình nói gì hê hê. Mình thật là điên rồ.

gaulucky92 2009-06-28 10:06:36

đương nhiên là hiểu chứ :D cái này chỉ có cách dùng php thôi... css nào làm nổi =.= cái a:active chỉ là hiệu ứng khi click vào link thôi, chứ ko phải là link dc click sau cùng.
vấn đề là, nếu nó chung 1 file thì đơn giản quá, vd như phpbasic có menu show các category, có chung 1 cấu trúc, dạng như index.php?cat=cat_name
chẳng hạn như:
<a href="index.php?cat=general">General</a>
href="index.php?cat=php">PHP</a>

khi đó chỉ cần đặt 1 đoạn kiểm tra $_GET['cat'] trong file index.php để set active là xong...

Nhưng nếu trường hợp mỗi link dẫn tới 1 file khác nhau thì cách này rất bất tiện. VD:

href="index.php">General</a>
href="about.php">About us</a>

chẳng lẽ phải nhét code vào từng file để set active?

Về Đâu 2009-06-28 11:34:18

Hic gấu à gấu exit và die khác nhau chỗ nào chắc gấu biết. Gợi ý thì không nhất thiết phải nói chính xác cụ thể. Còn cụ thể bạn ở trên chơi kiểu nào cũng chịu có nói đâu sao mà mò.
Còn thích bắt bí thì ok chuyển như con thỏ thôi.
Nếu chơi nhiều file thì tất nhiên vẫn phải có những file global. Nhét nó vào file global mà xử.

nguoimoi 2009-06-29 12:03:47

Kiểu mình đang làm là thế này. Mình làm 1 file navbar.php riêng để thiết kế navbar, 1 file css định dạng cho cái navbar.php. Còn các trang trong đường dẫn thì là các trang khác nhau ( VD: trang_1.php, trang_2.php ... ). Trong mỗi trang mình gọi file navbar.php cho nó hiển thị thanh navbar.

Do đó, trường hợp của mình không biết có phải khi chuyển sang 1 trang mới nó load lại từ đầu và thanh navbar cũng load lại từ đầu nên không hiển thị được hiệu ứng hay không ?

Cám ơn.

Về Đâu 2009-06-30 12:00:34

@nguoimoi sang trang mới sẽ load lại từ đâu. Hiệu ứng không thể hiển thị được. Bạn nói đúng rồi đó.

nguoimoi 2009-06-30 09:22:56

Vậy có cách nào giải quyết nó không ? Làm sao để dù cho nhấn vào nút hay mở trực tiếp trang nào đó ra thì nó vẫn hiển thị được hiệu ứng tương ứng với nút link trang đó ?

choncon 2009-07-01 11:07:30

Có 3 cách:
+Lưu Cookie||Session để xử lí HTML
+Dùng location.href để xử lí qua javascript
+Dùng thuộc tính a:active của CSS

Về Đâu 2009-07-01 08:21:35

Hoàn toàn không thể xử lý bằng HTML và CSS

choncon 2009-07-01 09:13:07

Hừ, nếu ko biết thì cũng không nên khẳng định
Hiệu ứng collapse dùng với Cookie trong PHP là một ví dụ ko cần JS.
Các menu thay đổi background của tab cũng sử dụng a:active.

----
Nếu dùng JS thì tốt nhất là phải qua một thư viện JS chứ viết không thì thường ko tốt lắm mà lại rườm rà.

Ken Phan 2009-07-01 09:13:55

Hoàn toàn không thể xử lý bằng HTML và CSS

o la la la to thế :D
dùng cookie thì okie cả ...

gaulucky92 2009-07-01 11:17:01

+Dùng thuộc tính a:active của CSS

không dùng dc.
Thuộc tính này chỉ có tác dụng set hiệu ứng cho đối tượng khi được click vào thôi, cụ thể là đối tượng URL <a>
Thẻ <a> có 4 thuộc tính:
- (bình thường): hiệu ứng mặc định đối với các url trên web
- hover: hiệu ứng khi rê chuột đến url
- active: hiệu ứng khi click vào url
- visited: hiệu ứng đối với các url từng click vào
tất cả đều là hiệu ứng tức thời thôi (trừ visited là hiệu ứng lâu dài), không thể làm menu current-item dc.
Phải xài cookie+js thôi

Hoàn toàn không thể xử lý bằng HTML và CSS

xem lại bài của bác Ken bên trang 1 :D

choncon 2009-07-02 12:24:54

được mà, active là hiệu ứng mà href của tag a trùng với location.href .Hình như bác hiểu sai ( đơn giản thế này nhé: nếu click vào rồi thì luôn chuyển qua trang khác đúng ko khi đó css cho cái tag bị click đó làm gì nữa vì trang cũ đã bị chuyển rồi)

Về Đâu 2009-07-02 08:09:05

@Ken Phan
Vậy bạn viết bài hướng dẫn sử dụng Cookies = HTML và CSS đi. Chú ý chỉ HTML và CSS nha. Không Server-side Scripting ko client-side scripting. Được thì thua gì cũng thua.

Ken Phan 2009-07-03 02:18:24

Không Server-side Scripting ko client-side scripting

_ _! cái nào cũng ko thì chạy bằng cái rì ?

Về Đâu 2009-07-03 09:28:47

Thì HTML và CSS như câu tui phủ định là không thể. Ông kêu xài cookies thì tui cũng hiểu xài sao. Nên phải đợi ông hướng dẫn thêm cho tui về HTML và CSS thôi chứ sao giờ.

choncon 2009-07-03 10:59:51

Cha này bị gì ấy nhỉ ?
Sao ko cấm luôn sử dụng HTML luôn đi.
NHững gì chúng ta đang bàn đến là ở phần client còn sever thì làm gì chả được.Bởi vậy nếu không dùng javascript thì tất nhiên phải cookie từ sever rồi.

TG 2009-07-03 12:41:16

grum, bà con cứ cãi không à, ai nó được thì làm demo cui, giúp cho nguoimoi và cũng test kỹ năng luôn, cứ người nói được người nói không thì ai biết là được hay không :D

Ken Phan 2009-07-03 01:46:15

thì HTML và CSS thì sao mà làm đc ^^
Tớ chỉ bảo là dùng cookie và js có thể đc thui :D bác về đâu còn thắc mắc gì nữa hem :p hehe

Về Đâu 2009-07-03 03:19:45

Nhìn lại cái bài ông viết đi. Khác gì cười và mặt tui vì tui ngu ko biết xài coookies bằng cái HTML và CSS?

gaulucky92 2009-07-03 09:43:15

grum, bà con cứ cãi không à, ai nó được thì làm demo cui, giúp cho nguoimoi và cũng test kỹ năng luôn, cứ người nói được người nói không thì ai biết là được hay không :D

bác TG lên tiếng rồi ;))
Nếu như cùng 1 file xuất ra nhiều module thì tiện quá rồi, làm giống phpbasic này... Còn bây giờ là nhiều links khác nhau dẫn tới các file khác nhau, xem ra không có 1 giải pháp nào tối ưu hết rồi... chỉ còn cách đặt biến SESSION vào từng file thôi =.=

nguoimoi 2009-07-05 11:17:54

Có bạn nào có thể demo mấy cách dùng Cookie hay SESSION không ? Mình chưa rõ lắm cách làm sao để navbar nhận ra nó đang ở link nào ?

gaulucky92 2009-07-06 08:43:26


À há, có cách làm bằng js + cookie rồi :D

Đầu tiên cần có 3 hàm js xử lí cookie, lấy trên w3schools :D tất nhiên là sửa lại 1 tí cho nó phù hợp (hàm checkCookie)
<?
function getCookie(c_name)
{
if (document.cookie.length>0)
  {
  c_start=document.cookie.indexOf(c_name + "=");
  if (c_start!=-1)
    {
    c_start=c_start + c_name.length+1;
    c_end=document.cookie.indexOf(";",c_start);
    if (c_end==-1) c_end=document.cookie.length;
    return unescape(document.cookie.substring(c_start,c_end));
    }
  }
return "";
}

function setCookie(c_name,value,expiredays)
{
var exdate=new Date();
exdate.setDate(exdate.getDate()+expiredays);
document.cookie=c_name+ "=" +escape(value)+
((expiredays==null) ? "" : ";expires="+exdate.toGMTString());
}

function checkCookie()
{
tab=getCookie('tab');
if (tab!=null && tab!="")
  {
  document.getElementById(tab).background='red';
  }
else
  {
    setCookie('tab','home',365);
  }
}
?>

Sau đó đặt onload cho body là checkCookie()
<?
<body onload="checkCookie()">
?>

Xong rồi thì làm cái menu...
<?
<ul class="menu">
<li><a href="index.php" id="home" onclick="setCookie('tab','home',365)">Home</a></li>
<li><a href="index.php" id="forum" onclick="setCookie('tab','forum',365)">Forum</a></li>
<li><a href="index.php" id="about" onclick="setCookie('tab','about',365)">About</a></li>
<li><a href="index.php" id="contact" onclick="setCookie('tab','contact',365)">Contact</a></li>
</ul>
?>

Giải thích: khi vừa load trang web thì sẽ chạy hàm checkCookie để kiểm tra biến cookie tên 'tab' đã tồn tại chưa. Nếu có thì đổi màu nền của 1 link có id tương ứng trên menu, nếu không thì tạo cookie 'tab' có giá trị mặc định là 'home', tương ứng với link đầu tiên.
Các link trên menu khi click vào thì chạy hàm setCookie để định lại giá trị của biến tab => đổi màu của link tương ứng.

Demo: http://gaulucky92.uni.cc/test/menu

* Vẫn còn 1 lỗi là: nếu ko click vào link trên menu mà đổi url trên thanh address thì script sẽ đổi màu sai link! Chưa biết sửa sao =.=

Login | Register

W3 Search Engine Optimization
Thiet ke web mien phi tai VINH LONG