отзывчивый оправданный меню

Question

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

Первая проблема заключается в том, что логотип и элементы меню не строятся правильно. Вторая проблема - отзывчивый элемент. Я пытаюсь правильно использовать precentages, но я думаю, что им что-то не хватает? внутренний DIV может быть стилизовано неправильно ..

Отъезд jsfiddle http://jsfiddle.net/5Kbuq/

Вот HTML элемент в строке меню:

<div class="subMenu" >  
    <h1> Site Name </h1> 
    <div class="inner"> 
     <a href="#" id="sTop" class="subNavBtn">Home</a> 
     <a href="#" id="s1" class="subNavBtn">About</a> 
     <a href="#" id="s2" class="subNavBtn">Team</a> 
     <a href="#" id="s3" class="subNavBtn">Work</a> 
     <a href="#" id="s4" class="subNavBtn">Clients</a> 
     <a href="#" id="Contact" class="ContactBtn">Contact</a> 
    </div>   
</div> 

Вот CSS для строки меню:

.subMenu { 
    position: absolute; 
    top: 0px; 
    height: 55px; 
    z-index: 1000; 
    width: 100%; 
    background: rgba(255,255,255,0.95); 
    box-shadow: 0px 1px 10px rgba(31, 50, 63, 0.25); 

} 

.subMenu .inner { 
    padding:0; 
    font-weight: 400; 
} 

.subNavBtn { 
    display: block; 
    height: 40px; 
    width: 12%; 
    float: left; 
    margin: 0px 0px 0 0; 
    text-decoration: none; 
    font-size: 14px; 
    padding: 15px 0 0 0; 
    text-align: center; 
    color: rgb(119, 119, 119); 
} 

.end { 
    margin: 0; 
} 

.ContactBtn { 
    display: block; 
    height: 40px; 
    width: 12%; 
    float: left; 
    margin: 0px 0px 0 0; 
    text-decoration: none; 
    font-size: 14px; 
    padding: 15px 0 0 0; 
    text-align: center; 
    color: rgb(119, 119, 119); 
} 

Answer 1

Многие люди предпочитают делать свои панели меню, используя списки. Это хорошая практика, и я рекомендую вам попробовать ее. Нельзя сказать, что вы делаете это неправильно.

Когда дело доходит до отзывчивости вы можете использовать что-то вроде этого

body 
{ 
    width: 100%; 
    display: -webkit-box; 
    -webkit-box-pack: center; 
} 
#page 
{ 
max-width: 1500px; 
margin: 20px 20px; 
    display: -webkit-box; 
    -webkit-box-orient: horizontal; /*responsive layout*/ 
    -webkit-box-flex: 1; /*1=flexible, 0=fixed*/ 
    background-color: #f2f2eb; 

} 

с WebKit приписывать вы получите автоматическую отзывчивую страницу. Если вы хотите установить пиксели, которые ваш сайт будет преобразовывать в мобильную форму , вы должны использовать то, что упоминалось выше Travis или препроцессор , например sass, когда вы можете сохранить в переменных желаемые значения высоты и ширины.

О логотипе попробуйте сделать еще один div.Think это как головоломка. Иногда рисование на бумаге может помочь вам.