LI парить и отображать дополнительные ссылки на отдельном слое? - PullRequest
Новая
       0

LI парить и отображать дополнительные ссылки на отдельном слое?

1 голос
/ 14 декабря 2011

В предыдущем вопросе я решил, что нужно иметь LI-зависание, которое показывает дополнительные ссылки (/6827968/css-ili-javascript-href-hover-ili-mouseover-pokazyvayschii-dopolnitelnye-klikabelnye-ssylki).

Теперь я пытаюсь решить, нужно ли UL и LI оборачиваться в узкиеDIV. В настоящее время, когда отображаются скрытые ссылки, они переносятся на следующую строку. Я бы хотел, чтобы они переполнялись по мере необходимости, чтобы ссылки появлялись на одной строке без изменения ширины оболочки. Другими словами, я хотел быэто зависание, используя что-то вроде z-index, который представляет линию наведения как отдельный слой. Это возможно с помощью CSS?

Вот скрипка: http://jsfiddle.net/zenfiddle/a88Cz/

<html>
<style>
#box1 {width:100px; background-color:yellow; z-index:1}
li a img  {display:none; margin-right:3px; z-index:1000}
li:hover img {display:inline-block;}
a {margin-right:20px;}
a.extras {margin-right:3px;}
</style>
<body>

<div id="box1">
<ul>
    <li><a href="#">Link1</a><a class="extras" href="#"><img src="http://urlgreyhot.com/files/icons/png/12x12/doc-txt.png" /></a><a class="extras" href="#"><img src="http://urlgreyhot.com/files/icons/png/12x12/flag.png" /></a><a class="extras" href="#"><img src="http://urlgreyhot.com/files/icons/png/12x12/bubble.png" /></a><a class="extras" href="#"><img src="http://urlgreyhot.com/files/icons/png/12x12/checkbox.png" /></a></li>
    <li><a href="#">Link1</a><a class="extras" href="#"><img src="http://urlgreyhot.com/files/icons/png/12x12/doc-txt.png" /></a><a class="extras" href="#"><img src="http://urlgreyhot.com/files/icons/png/12x12/flag.png" /></a><a class="extras" href="#"><img src="http://urlgreyhot.com/files/icons/png/12x12/bubble.png" /></a><a class="extras" href="#"><img src="http://urlgreyhot.com/files/icons/png/12x12/checkbox.png" /></a></li>
    <li><a href="#">Link1</a><a class="extras" href="#"><img src="http://urlgreyhot.com/files/icons/png/12x12/doc-txt.png" /></a><a class="extras" href="#"><img src="http://urlgreyhot.com/files/icons/png/12x12/flag.png" /></a><a class="extras" href="#"><img src="http://urlgreyhot.com/files/icons/png/12x12/bubble.png" /></a><a class="extras" href="#"><img src="http://urlgreyhot.com/files/icons/png/12x12/checkbox.png" /></a></li>
</ul>
</div>

</body>
</html>

Ответы [ 2 ]

0 голосов
/ 14 декабря 2011

Я изменил вашу разметку, чтобы было легче работать с: 

<div id="box1">
<ul>
    <li><a href="#">Link1</a>
        <ul>
            <li><a href="#"><img src="" /></a></li>
            <li><a href="#"><img src="" /></a></li>
            <li><a href="#"><img src="" /></a></li>
            <li><a href="#"><img src="" /></a></li>
        </ul>      
    </li>
</ul>
</div>

И CSS: 

#box1 {width:60px; background-color:yellow;}
#box1 ul > li {position:relative;}
#box1 ul li ul{display:none; background:yellow;}
#box1 ul ul li {display:inline;}
#box1 ul > li:hover ul{display:block; background:red; position:absolute; top:0; left:0;}

Я использую некоторые селекторы, которые не поддерживаются старыми браузерами, но вы можете реализовать те же концепции с классами.

Демо

0 голосов
/ 14 декабря 2011

Хотя скрипка, которую я связал в моем комментарии , работает как быстрое и грязное решение с использованием white-space: nowrap и overflow: visible, я думаю, это больше похоже на то, что вы имели в виду:

http://jsfiddle.net/wTwAd/1/

Он использует абсолютно позиционированный div ваших ссылок, расположенных вне каждого элемента списка.

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

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

...