Объединить флажок и кнопку в том же CSS-меню Horitonzal

0

Элементы меню для частей Zoom, которые мне нужны, чтобы они функционировали как кнопки. Test1-4 Мне нужно функционировать как флажок. Кнопки Zoom to работают правильно. Тест1-4 работают неправильно

<body>
<div id='cssmenu'>
<ul>
   <li class='active'><a href='index.html'><span>Home</span></a></li>
    <li><a title='Zoom to U.S' input type='button' name='US' onclick='US();'><span>Zoom to U.S.</span></a></li>
    <li><a title='Zoom to Canada' input type='button' name='Canada' onclick='Canada();'><span>Zoom to Canada</span></a></li>
    <li><a title='Zoom to Mexico' input type='button' name='Mexico' onclick='Mexico();'><span>Zoom to Mexico</span></a></li>    
    <li><a title='Test 1 KML' input type='checkbox' id='kml-Test1-check' name='kml-Test1-check' onclick="toggleKml('Test1');"><span>Test 1 KML</span></a></li>
    <li><a title='Test 2 KML' input type='checkbox' id='kml-Test2-check' name='kml-Test2-check' onclick="toggleKml('Test2');"><span>Test 2 KML</span></a></li>
    <li><a title='Test 3 KML' input type='checkbox' id='kml-Test3-check' name='kml-Test3-check' onclick="toggleKml('Test3');"><span>Test 3 KML</span></a></li>
    <li><a title='Test 4 KML' input type='checkbox' id='kml-Test4-check' name='kml-Test4-check' onclick="toggleKml('Test4');"><span>Test 4 KML</span></a></li>
    <li><a title='Additional KMLs'input type='button' name='AKML' onclick='open_win();'><span>Additional KMLs</span></a></li>
    <li><a title='Remove all KMLs on the screen'input type='button' name='RKML' onclick='killKML();'><span>Remove All KMLs</span></a></li>
    <li class='last'><a title="Contact"><span>Contact</span></a></li>
</ul>
</div>
</body>

#cssmenu {
  border: none;
  border: 0px;
  margin: 0px;
  padding: 0px;
  font: 67.5% 'Lucida Sans Unicode', 'Bitstream Vera Sans', 'Trebuchet Unicode MS', 'Lucida Grande', Verdana, Helvetica, sans-serif;
  font-size: 14px;
  font-weight: bold;
  width: auto;
}
#cssmenu ul {
  background: #333333;
  height: 35px;
  list-style: none;
  margin: 0;
  padding: 0;
}
#cssmenu li {
  float: left;
  padding: 0px;
}
#cssmenu li a {
  background: #333333 url('images/seperator.png') bottom right no-repeat;
  display: block;
  font-weight: normal;
  line-height: 35px;
  margin: 0px;
  padding: 0px 25px;
  text-align: center;
  text-decoration: none;
}
#cssmenu > ul > li > a {
  color: #cccccc;
}
#cssmenu ul ul a {
  color: #cccccc;
}
#cssmenu li > a:hover,
#cssmenu ul li:hover > a {
  background: #2580a2 url('images/hover.png') bottom center no-repeat;
  color: #FFFFFF;
  text-decoration: none;
}
#cssmenu li ul {
  background: #333333;
  display: none;
  height: auto;
  padding: 0px;
  margin: 0px;
  border: 0px;
  position: absolute;
  width: 225px;
  z-index: 200;
  /*top:1em;
    /*left:0;*/

}
#cssmenu li:hover ul {
  display: block;
}
#cssmenu li li {
  background: url('images/sub_sep.png') bottom left no-repeat;
  display: block;
  float: none;
  margin: 0px;
  padding: 0px;
  width: 225px;
}
#cssmenu li:hover li a {
  background: none;
}
#cssmenu li ul a {
  display: block;
  height: 35px;
  font-size: 12px;
  font-style: normal;
  margin: 0px;
  padding: 0px 10px 0px 15px;
  text-align: left;
}
#cssmenu li ul a:hover,
#cssmenu li ul li:hover > a {
  background: #2580a2 url('images/hover_sub.png') center left no-repeat;
  border: 0px;
  color: #ffffff;
  text-decoration: none;
}
#cssmenu p {
  clear: left;
}
  • 0
    Если есть проблема с вашим JS, вы должны также предоставить эту часть кода и лучше определить, что означает «не работает должным образом». Также вы можете предоставить jsfiddle, чтобы вам было легче помочь
  • 0
    "часть флажка не будет работать загрузить элемент", что флажок?
Показать ещё 5 комментариев
Теги:

1 ответ

4
Лучший ответ

Ваш HTML правильный, вместо

<li><a title='Zoom to U.S' input type='button' name='US' onclick='US();'><span>Zoom to U.S.</span></a></li>

использование

<li><a title='Zoom to U.S'><input type='button' name='US' onclick='US();'/><span>Zoom to U.S.</span></a></li>

DEMO

Поделиться
  • 0
    Это решило проблему, однако флажок отображается. Я бы хотел, чтобы это выглядело как кнопка. Я попытался добавить скрытый ввод в CSS, однако это снимает флажок. Любая идея?

Ещё вопросы

Сообщество Overcoder
Наверх
Меню