css выпадающее меню с миниатюрой - PullRequest
Новая
       20

css выпадающее меню с миниатюрой

0 голосов
/ 02 сентября 2011

привет, я строю выпадающее меню, которое должно иметь миниатюру слева. в данный момент я использую <ul>&<li>s для создания меню, и у меня работает выпадающий список. проблема, с которой я сталкиваюсь, заключается в том, что, когда я пытаюсь добавить изображение к левой стороне, оно просто добавляет себя в конец списка, если это имеет смысл.

на данный момент у меня все работает, но я надеюсь, кто-то может предложить лучший способ

вот мой код 

<!--the css for the nav bar-->
#navbar
{
     clear: both;
      position: absolute;
     left: 488px;
     width: 466px;
}

#navbar ul{


float:left;
display:block;
}   
#navbar ul li img
{
padding:0px;
margin:0px;
border:none;

}
#navbar ul li{
text-align: center;
display:block;
float:left;
width:55px;
border-left:thin #666 solid;
border-right:thin #666 solid;
}




#navbar li li, #navbar li li a{
height:0px;
margin-top: -100px;
text-align: center;
  zoom: 1;
  background-color:#666;
text-decoration: none;
-webkit-transition:all .2s ease-in-out;
-moz-transition:all .2s ease-in-out;
-o-transition:all .2s ease-in-out;
transition:all .2s ease-in-out;
border:thin #000 solid;
width:93px;
display:table-row;

}

 .navbar link{
color: #ff6600;
text-decoration: none;
}

#navbar li:hover li{
height:auto;
margin-top:0px;
margin-bottom: 0px;
}



#navbar li:hover li a{
color:#FFF;

text-decoration: none;
}

#navbar li li a:hover{
color:#333;
}

#navbar ul ul{
background:black;
}   

#navbar li li:hover li li{
height:auto;
margin-top:0px;
margin-bottom: 0px;
margin-left:-100px;
margin-top:-30px;

}

#navbar li:hover li li{
height:77px;
margin-top:-79px;
margin-bottom: 0px;
margin-left:-96px;
}

#thum
{
width:70px;
z-index:-2;
}

#thum li
{
height:auto;
z-index:-50;
 }


<!--html of nav bar-->
<div id="navbar">
        <ul id="items" >
            <li><a href="#"><img src="img/home_button_56_44.png"/></a></li>
            <li><a href="#"><img src="img/product_56_42.png"/></a>
                    <ul>

                        <li><a href="#">About</a></li>
                        <li><a href="#">About2</a></li>
                        <li><a href="#">About3</a></li>
                        <li>about4
                        <ul id="thum"><li><img src="img/home_button_56_44.png"/></li>     </ul>
                        </li>


                    </ul>


            <li><a href="#"><img src="img/lifestyle_57_42.png"/></a></li>

            <li><a href="#"><img src="img/about_54_42.png" /></a></li>
            <li><a href="#"><img src="img/contact_54_42.png"  /></a></li>
        </ul>
        </div>
}

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

спасибо дан

1 Ответ

0 голосов
/ 02 сентября 2011

Я бы поместил изображение большого пальца в первое li подменю. Дайте ему класс и поместите его влево. Это может потребовать несколько настроек в зависимости от размера вашего изображения. Это должно позволить следующим li с упасть рядом с ним. 

 <html>
<head>
<style type="text/css">
<!--the css for the nav bar-->
#navbar
{
     clear: both;
      position: absolute;
     left: 488px;
     width: 466px;
}

#navbar ul{


float:left;
display:block;
}   
#navbar ul li img
{
padding:0px;
margin:0px;
border:none;

}
#navbar ul li{
text-align: center;
display:block;
float:left;
width:55px;
border-left:thin #666 solid;
border-right:thin #666 solid;
}




#navbar li li, #navbar li li a{
height:0px;
margin-top: -100px;
text-align: center;
  zoom: 1;
  background-color:#666;
text-decoration: none;
-webkit-transition:all .2s ease-in-out;
-moz-transition:all .2s ease-in-out;
-o-transition:all .2s ease-in-out;
transition:all .2s ease-in-out;
border:thin #000 solid;
width:93px;
display:table-row;

}

 .navbar link{
color: #ff6600;
text-decoration: none;
}

#navbar li:hover li{
height:auto;
margin-top:0px;
margin-bottom: 0px;
}



#navbar li:hover li a{
color:#FFF;

text-decoration: none;
}

#navbar li li a:hover{
color:#333;
}

#navbar ul ul{
background:black;
}   

#navbar li li:hover li li{
height:auto;
margin-top:0px;
margin-bottom: 0px;
margin-left:-100px;
margin-top:-30px;

}

#navbar li:hover li li{
height:77px;
margin-top:-79px;
margin-bottom: 0px;
margin-left:-96px;
}

#thum
{
width:70px;
z-index:-2;
}

#thum li
{
height:auto;
z-index:-50;
 }
#navbar li li.my-thumb {width:40px;}
#navbar li .thumb-menu {width:140px;padding:0;}
</style>
</head>
<body>

<!--html of nav bar-->
<div id="navbar">
        <ul id="items" >
            <li><a href="#">Item 1</a></li>
            <li><a href="#">Item 2</a>
                    <ul class="thumb-menu">
                        <li class="my-thumb"><img width="40" height="40" src="img/home_button_56_44.png"/></li>
                        <li><a href="#">About</a></li>
                        <li><a href="#">About2</a></li>
                        <li><a href="#">About3</a></li>
                    </ul>
            <li><a href="#">Item 3 </a></li>

            <li><a href="#">Item 4</a></li>
            <li><a href="#">Item 5</a></li>
        </ul>
        </div>
</body>
</html>
...