c# - how to use menu from a png file in asp.net -
i have 2 menu called menu1 , menu2 png file similar different background color. want when hold mouse on item1 of menu1, item1 of menu2 replace , on until end.
i use following method, did not receive correct answer....
.img{ width: 500px; height: 50px; background-image:url('images/example.png'); background-position:-20px -30px; background-repeat:no-repeat;} .img:hover{ width: 500px; height: 50px; background-image:url('images/example.png'); background-position:-20px -50px; background-repeat:no-repeat;} <div class="img"> </div>
so, since want use 1 image full menu, have best "size" each little image block little.
you can define shared sprite css class, , each single css item, , define there mouse on counterparts, best make sprites same size, cause @ moment don't seem :)
an easier way keep menu text, , swap backgrounds, in lower menu in example snippet
.menu-sprite { background-image: url('http://i.imgur.com/pexvdxx.png'); background-repeat: no-repeat; background-position: top left; } .menu-block { display: block; width: 70px; height: 30px; } .menu1 { background-position: -84px -91px; } .menu1:hover { background-position: -84px -164px; } .menu2 { background-position: -154px -91px; } .menu2:hover { background-position: -154px -164px; } .menu3 { background-position: -224px -91px; } .menu3:hover { background-position: -224px -164px; } .menu4 { background-position: -294px -91px; } .menu4:hover { background-position: -294px -164px; } .menu5 { background-position: -364px -91px; } .menu5:hover { background-position: -364px -164px; } .menu6 { background-position: -434px -91px; } .menu6:hover { background-position: -434px -164px; } .menu7 { background-position: -504px -91px; } .menu7:hover { background-position: -504px -164px; } .menu8 { background-position: -574px -91px; } .menu8:hover { background-position: -574px -164px; } .menu9 { background-position: -644px -91px; } .menu9:hover { background-position: -644px -164px; } .menu { list-style-type: none; display: inline-block; } .menu li { float: left; } .menu li { display: block; position: absolute; width: 70px; height: 30px; text-align: center; vertical-align: middle; text-decoration: none; padding-top: 5px; } .menu-item { background-image: linear-gradient(to bottom, #efefef 0%, #efefef 75%, #dfdfdf 100%); } .menu-item:hover { background-image: linear-gradient(to bottom, #ddefef 0%, #ccefef 75%, #ccdfdf 100%); }<ul class="menu"> <li class="menu-sprite menu-block menu1"><a href="#" /> </li> <li class="menu-sprite menu-block menu2"><a href="#" /> </li> <li class="menu-sprite menu-block menu3"><a href="#" /> </li> <li class="menu-sprite menu-block menu4"><a href="#" /> </li> <li class="menu-sprite menu-block menu5"><a href="#" /> </li> <li class="menu-sprite menu-block menu6"><a href="#" /> </li> <li class="menu-sprite menu-block menu7"><a href="#" /> </li> <li class="menu-sprite menu-block menu8"><a href="#" /> </li> <li class="menu-sprite menu-block menu9"><a href="#" /> </li> </ul> <ul class="menu"> <li class="menu-item menu-block"><a href="#">item 1</a> </li> <li class="menu-item menu-block"><a href="#">item 2</a> </li> <li class="menu-item menu-block"><a href="#">item 3</a> </li> <li class="menu-item menu-block"><a href="#">item 4</a> </li> <li class="menu-item menu-block"><a href="#">item 5</a> </li> <li class="menu-item menu-block"><a href="#">item 6</a> </li> <li class="menu-item menu-block"><a href="#">item 7</a> </li> <li class="menu-item menu-block"><a href="#">item 8</a> </li> <li class="menu-item menu-block"><a href="#">item 9</a> </li> <li class="menu-item menu-block"><a href="#">item 10</a> </li> </ul>
Comments
Post a Comment