最好的方式來做這樣的菜單

下面是一個網站的圖像，hase用戶照片的，他們鏈接到配置文件，但在圖像上，你會看到一個+號，這部分鏈接添加一個朋友。最好的方式來做這樣的菜單

我想做類似的事情，但不是隻有加號部分是一個鏈接，我想單擊加號，並有幾個鏈接出現，有點像一個下拉列表。

這樣的事情可能只是CSS或將JavaScript需要？

alt text http://img2.pict.com/e6/20/e8/1544808/0/screenshot2b28.png

2009-08-30 JasonDavis

基於你想點擊加號並且做一些事情而不是轉到另一頁面的事實，JavaScript是必需的。 – jimyi 2009-08-30 23:20:47

<?xml version="1.0" encoding="utf-8"?> 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> 

<head> 
    <title></title> 
    <link rel="stylesheet" type="text/css" href="css/stylesheet.css" /> 

    <style type="text/css" media="all"> 

ul li ul {display: none; } 

ul li {position: relative; 
    display: block; 
    height: 91px; /* the size of the image */ 
    width: 91px; 
     } 

ul li span 
    {display: block; 
    position: absolute; 
    bottom: 0; 
    right: 0; 
    border: 1px solid #f90; 
    background-color: #fff; 
    color: #000; 
    z-index: 1000; 
    width: 1em; 
    height: 1em; 
    } 

ul li:hover ul 
    {display: block; /* and style as you require */ 
    position: absolute; 
    left: 91px; /* moving left by the width of the image for a 'flyout' effect. for drop down, use the height instead */ 
    top: 0; 
    background-color: #fff; 
    } 

ul li ul li 
    {display: block; 
    height: 1.2em; 
    width: 8em; 
    } 

#xx {background: #fff url(img/xx.jpeg) top left no-repeat; 
    } /* I figure that it'd make sense to use the id of the user/person represented, you may disagree; amend as you require */ 

#joanne {background: #fff url(img/joanne.jpeg) top left no-repeat; 
    } 


    </style> 

</head> 

<body> 


<div id="wrap"> 

    <ul> 
    <li id="xx"><span>?</span> 
     <ul> 
     <li><a href="#">link 1</a></li> 
     <li><a href="#">link 2</a></li> 
     </ul></li> 

    <li id="joanne"><span>?</span> 
     <ul> 
     <li><a href="#">link 1</a></li> 
     <li><a href="#">link 2</a></li> 
     </ul></li> 
    </ul> 

</div> 

</body> 

</html>

這使得假設圖像列表都是同一列表的一部分，並且您不介意使用普通css。此外，這是純粹的CSS，它不依賴任何形式的onClick事件。對於onClick，你需要js。

我還沒有做一個測試案例，但我認爲這應該工作。

測試案例：my site。

來源

2009-08-30 23:25:54

而不是：懸停，怎麼樣：重點？其次，這在IE6中不起作用（如果有的話），因爲只有錨點支持懸停在垃圾瀏覽器中。至於IE 7，你可能安全使用這種方法。 – Zoidberg 2009-09-01 11:56:48

是的，'：focus'可能會起作用。當然，除了IE6 ...... – 2009-09-01 12:26:53

是的，我相信將需要的JavaScript，但使用jQuery的幫助下，它不會是非常困難的。你通常會創建一個下拉列表（有很多教程），並將其放在你想要的地方。有趣的部分是當你點擊圖像的+符號部分時打開列表。您可以使+符號成爲一個單獨的圖像，位於第一個圖像的頂部。這很容易註冊點擊，否則你將不得不使用其他方法在某個地方註冊點擊，比如相對定位的不可見元素。：D

來源

2009-08-30 23:24:08

最好的方式來做這樣的菜單

回答

相關問題