html - Create responsive sub navigation items with CSS -
i have create navigation based on mockup design created in photoshop. mockup looks this:
i managed create main navigation points , facing problems sub navigation. should responsive, means maximal number of items in sub navigation should 4, minimal number of items should 2. possible css position single elements next each other automatically?
this have:
<div id="topnavigation"> <ul> <li><a href="#">portrait</a></li> <li id="restaurants"><a href="#" class="active">restaurants</a></li> <li id="restaurants_sub"> <div class="wrapper_boxes"><div id="restaurants_sub_content" class="sub_boxes"><span>lövenstube</span><br>master deanse bes-<br>poke brooklyn, wiliams-<br>burg minim id wayfa</div></div> <div class="wrapper_boxes"><div id="restaurants_sub_content" class="sub_boxes"><span>lövenstube</span><br>master deanse bes-<br>poke brooklyn, wiliams-<br>burg minim id wayfa</div></div> <div class="wrapper_boxes"><div id="restaurants_sub_content" class="sub_boxes"><span>lövenstube</span><br>master deanse bes-<br>poke brooklyn, wiliams-<br>burg minim id wayfa</div></div> <div class="wrapper_boxes"><div id="restaurants_sub_content" class="sub_boxes"><span>lövenstube</span><br>master deanse bes-<br>poke brooklyn, wiliams-<br>burg minim id wayfa</div></div> <div class="wrapper_boxes"><div id="restaurants_sub_content" class="sub_boxes"><span>lövenstube</span><br>master deanse bes-<br>poke brooklyn, wiliams-<br>burg minim id wayfa</div></div> <div class="wrapper_boxes"><div id="restaurants_sub_content" class="sub_boxes"><span>lövenstube</span><br>master deanse bes-<br>poke brooklyn, wiliams-<br>burg minim id wayfa</div></div> <div class="wrapper_boxes"><div id="restaurants_sub_content" class="sub_boxes"><span>lövenstube</span><br>master deanse bes-<br>poke brooklyn, wiliams-<br>burg minim id wayfa</div></div> <div class="wrapper_boxes"><div id="restaurants_sub_content" class="sub_boxes"><span>lövenstube</span><br>master deanse bes-<br>poke brooklyn, wiliams-<br>burg minim id wayfa</div></div> </li> <li><a href="#">hotel</a></li> <li><a href="#">feste</a></li> <li><a href="#">seminare</a></li> <li><a href="#">veranstaltungen</a></li> </ul> </div>
all hints appreciated! thx.
float .sub_boxes
left , set min-width , max-width on #restaurants_sub
hold 2-4 .sub_boxes
.
something in css
#topnavigation li { clear: left; } #restaurants_sub { max-width: 400px; } .sub_boxes { width: 100px; float: left; }
Comments
Post a Comment