Выпадающее меню CSS - Как добавить миниатюры - PullRequest
Новая
       13

Выпадающее меню CSS - Как добавить миниатюры

0 голосов
/ 07 октября 2011

У меня есть меню ниже, и я хотел бы добавить миниатюрные изображения на левой стороне, например:

enter image description here
http://i.imgur.com/aK5EJ.jpg

Возможно ли это сделать с помощью css; Я провел поиск в сети, но не нашел меню css с миниатюрами.

ценю любую помощь 

            <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
            <html xmlns="http://www.w3.org/1999/xhtml">
            <head>
            <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
            <title>Menu</title>
            <style type="text/css">

            body {
            behavior: url(csshover.htc);
            font-size:11px;
            font-family:Arial, Helvetica, sans-serif;
            }

            #nav {
            position:absolute;
            left:700px;
            top:10px;
            }

            p a {
            color: #000;
            text-decoration:underline!important;

            }
            a{
            color:#000;
            text-decoration:none;
            }
            p a:hover{  text-decoration: none!important;
            }

            ul#nav {
            list-style: none;
            padding: 0;
            margin: 0;
            }


            ul#nav li a {
            display: block;
            font-weight: bold;
            padding: 2px 10px;
            background:#f9f9f9;
            }

            ul#nav li a:hover{
            background:#888;
            color:#fff;
            list-style:none;
            }

            li {
            float: left;
            position: relative;
            width: 100px;
            text-align: center;
            margin-right:5px;
            border:1px solid #ccc;

            }

            ul#nav li.current a{
            background:#ddd;
            }

            ul#nav li.current a:hover{
            background:#888;
            }

            li ul {
            display: none;
            position:absolute;
            width:100px;
            top: 18px;
            left: 0;
            font-weight: normal;
            padding: 1px 0 10px 0;
            margin-left:-1px;
            }

            ul#nav li ul.sub li{
            border-width:0 1px 1px 1px!important;
            }

            ul#nav li ul.sub li a{
            font-weight: normal!important;  
            }
            li>ul {
            top: auto;
            left: auto;
            }

            li:hover ul, li.over ul {
            display: block;
            }

            .sub li {
            list-style:none;
            }


            </style>
            </head>

            <body>


            <ul id="nav">

                <li><a href="#" title="Menu">Menu</a>
                  <ul class="sub">
                     <li><a href="#" title="Services > Number One">Number One</a></li>
                     <li><a href="#" title="Services > Number Two">Number Two</a></li>
                     <li><a href="#" title="Services > Number Three">Number Three</a></li>
                     <li><a href="#" title="Services > Number Four">Number Four</a></li>
                     <li><a href="#" title="Services > Number Five">Number Five</a></li>
                  </ul>
                </li>



            </ul>

            </body>
            </html>

Ответы [ 3 ]

1 голос
/ 07 октября 2011

Конечно, это возможно. Просто сделайте миниатюру фоновым изображением тега привязки. Смотрите этот пример: http://jsfiddle.net/EyRFW/1

ul#nav li ul.sub li a
{
    font-weight: normal!important;  
    padding-left:20px;
    background-image:url(http://jsfiddle.net/img/ico-add-resource.png);
    background-position: 3px 3px ;
    background-repeat:no-repeat;
}
1 голос
/ 07 октября 2011

Существует свойство CSS: 

list-style-image: { };

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

Вы могли бы использовать это, например, 

li.myimage { list-style-image: url("img/myimage.png"); }
0 голосов
/ 07 октября 2011

1) Сделайте свой стиль тега A (не LI, за исключением float и position).Поэтому переместите другие объявления в тег A.

2) Используйте отступ слева на теге A и используйте фоновое изображение.Сделайте отступ такой же ширины, что и изображение, плюс немного места для текста.

См. "Пользовательские маркеры" в: http://preview.moveable.com/JM/ilovelists/ для получения некоторых советов по стилю.

...