[X] Помощник

[basilio Topic Starter]

Как сделать совместимость с разрешениями экранов любых размеров на сайте?
Например как тут: http://css-tricks.com/

Теперь другой вопрос: Откуда взять такое меню как на сайте выше? Искал повсюду, но безрезультатно. Такое же меню стоит на сайте http://pcvector.net/ (да что там меню, полностью слямзин дизайн ).

Я знаю, что можно спереть часть дизайна, использую например "Просмотр кода элемента" в Google Chrome. Ну или аналогичные функции других браузеров. Вопрос для гуру, как это сделать?

Заранее спасибо!

[sosnovskij]

Переместил в приемы верстки.

[c0ns0l3]

Как сделать совместимость с разрешениями экранов любых размеров на сайте?
Например как тут: http://css-tricks.com/

Теперь другой вопрос: Откуда взять такое меню как на сайте выше? Искал повсюду, но безрезультатно. Такое же меню стоит на сайте http://pcvector.net/ (да что там меню, полностью слямзин дизайн ).

Я знаю, что можно спереть часть дизайна, использую например "Просмотр кода элемента" в Google Chrome. Ну или аналогичные функции других браузеров. Вопрос для гуру, как это сделать?

Заранее спасибо!

Ну что могу сказать, до чтения этого поста не обращал внимания на их дизайн...
Пройдусь по вопросам...

Как сделать совместимость с разрешениями экранов любых размеров на сайте?
Использовать шаблоны типа 980(940) фиксированный, или резиновый на всю страницу (на приведенных примерах он так и сделан, только с кучей нюансов)

Откуда взять такое меню как на сайте выше?
Ну меню ничего сложного из себя не представляет на самом деле то... jQuery с анимацией bgcolor, можно написать самому, или уже слямзить, как это делают во 2м примере.

Разобрав немного структуру ксс-триксов, увидел у них 4 варианта дизайна сразу на страницу... которые меняются в зависимости от ширны страницы, притом на лету.
По факту, тригерить изменение ширины окна, и в зависимости от его ширны, менять "классы" (как с лягушкой справа и менюшкой), и скрывать блоки (как "дата поста" и "хот линкс").
Идея конечно заслуживает внимания )

[c0ns0l3]

Вопрос для гуру, как это сделать?

Менюшка.
Каркас:

<div id="menu-container">
    <ul id="menu">
        <li><a href="#">Menu 1</a></li>
        <li><a href="#">Menu 2</a></li>
        <li><a href="#">Menu 3</a></li>
        <li><a href="#">Menu 4</a></li>
    </ul>
</div>

Все как обычно
Далее немного CSS для более приятного просмотра...

* {padding:0; margin: 0}
    div#menu-container {
        background: white;
        padding: 20px;
        display: inline-block;
    }
    ul#menu {
        list-style: none;
    }
    ul#menu > li{
        padding: 1px;
        float: left;
        position: relative;
    }
    ul#menu > li >a {
        border: solid 1px gray;
        line-height: 40px;
        padding: 20px;
        text-decoration: none;
      
    }

Подгружаем библиотеки jquery-1.7.1.min.js и jquery.color.js

Пишем небольшой скрипт:

$(document).ready(function() {
        var colorSwitch = new Array(
            '#ff0000',
            '#00ff00',
            '#fff00f',
            '#0000ff'
        );
        console.log(colorSwitch)
        var menuContainer = $('ul#menu');
        var menuElements  = menuContainer.find('>li');
      
        menuElements.hover(function(){
            /* over */
            indexEr =  menuElements.index($(this));
            $(this).find('>a').stop().animate({'background-color':colorSwitch[menuElements.index($(this))]})
        },function(){
            /* out */
            $(this).find('>a').stop().animate({'background-color':'transparent'})
        })
      
      
});

colorSwitch - массив цветов, на которые будут менять кнопки. Слева на право соответственно.

Прикрепленные файлы

 menu-css-tricks.rar ( 36,52 килобайт ) Кол-во скачиваний: 166

 

[basilio Topic Starter]

Спасибо вам огромное!!!

Замечание модератора: Эта тема была закрыта автоматически ввиду отсутствия активности в ней на протяжении 100+ дней. Если Вы считаете ее актуальной и хотите оставить сообщение, то воспользуйтесь кнопкой или обратитесь к любому из модераторов.