Коллеги, пришлось за ночь изобрести нечто, чего доселе не приходилось делать. Задача: верстка резиновая, без таблиц, лого по центру, пункты меню — по 3 справа и слева от лого, тянутся вправо и влево, меняются расстояния между ними. Вот
работающий пример. Также я решил попробовать на лету масштабировать шрифт, иначе на высоких разрешениях меню становится совсем уже мелким.
Подключены jQuery 1.9.1, Modernizr, normalize.
Все считается исходя из ширины основного враппера
width: 80%;<br>
min-width: 960px;<br>
max-width: 1800px;<br>
Между пунктами меню добавлены
в качестве распорок.
jQuery(document).ready(function ($){<br>
/*при иницализации окна*/<br>
/*считываем ширину враппера*/<br>
var calcWidth = $('#main-wrap').width(); <br>
<br>
/*добавляем ширину распорки*/<br>
$('.top-nav-spacer').css('width', (calcWidth / 96 - 3)|0);<br>
<br>
/*добавляем распорке паддинг для более тонкой настройки ширины*/<br>
$('.top-nav-spacer').css('padding-left', (1 / calcWidth * 700)|0); <br>
<br>
/*изменяем размер шрифта*/<br>
$('.top-nav-link').css('font-size', (calcWidth / 96 + 1.7)|0);<br>
<br>
/*изменяем оступ лого по высоте для подгонки по нижней линии шрифта*/<br>
$('.title').css('margin-top', (calcWidth / 960 + 1)|0);<br>
<br>
/*то же самое, но при изменении размера окна*/<br>
$(window).on('resize', function (){<br>
<br>
var calcWidth = $('#main-wrap').width();<br>
$('.top-nav-spacer').css('width', (calcWidth / 96 - 3)|0);<br>
$('.top-nav-spacer').css('padding-left', (1 / calcWidth * 700)|0);<br>
$('.top-nav-link').css('font-size', (calcWidth / 96 + 1.7)|0);<br>
$('.title').css('margin-top', (calcWidth / 960 + 1)|0);<br>
console.log('resize');<br>
<br>
});<br>
<br>
});<br>
Прошу ваших комментариев, так как писалось всю ночь после трудного дня, бегом и на коленке. Буду благодарен за предложения и указания на ошибки.
Простой
