Лучший способ сделать такое меню - PullRequest
Новая
       4

Лучший способ сделать такое меню

0 голосов
/ 31 августа 2009

Ниже приведено изображение с сайта, на котором есть пользовательские фотографии, они ссылаются на профиль, но на изображении вы увидите знак +, эта часть указывает на добавление друга.

Я хочу сделать что-то похожее, но вместо того, чтобы часть со знаком плюс была ссылкой, я хочу щелкнуть знак плюс и у меня появится пара ссылок, вроде выпадающего списка.

Возможно ли что-то подобное с помощью только CSS, или необходим javascript?

альтернативный текст http://img2.pict.com/e6/20/e8/1544808/0/screenshot2b28.png

Ответы [ 2 ]

2 голосов
/ 31 августа 2009 
<?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, он опирается на :hover, а не на любую форму события onClick. Для onClick вам понадобится js.

Я еще не тестировал, но думаю, что это должно сработать.

Тест-кейс по адресу: мой сайт .

0 голосов
/ 31 августа 2009

Да, я верю, что javascript понадобится, но с помощью jquery это будет не очень сложно. Вы бы обычно создавали выпадающий список (там много учебников) и располагали его там, где вам было нужно. Интересная часть будет открывать список, когда вы нажимаете на + знак части изображения. Вы можете сделать знак + отдельным изображением, расположенным поверх первого. Это будет легко регистрировать клики, в противном случае вам придется использовать какой-то другой метод регистрации клика в определенном месте, например, невидимый элемент, расположенный относительно. : D

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...