Перейти к содержимому

Реферальная программа Мегаплана


Совместимость с разрешениями экранов любых размеров

#1 basilio

basilio
  • Пользователь
  • 79 сообщений
  • Репутация: 0
0

Отправлено 16 Март 2012 - 13:02

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

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

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

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

 

 

  • 0

#2 Sosnovskij

Sosnovskij
  • Администратор
  • 3 883 сообщений
  • Репутация: 565

Отправлено 16 Март 2012 - 13:53

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

Не стесняйтесь ставить оценки темам :) Правила форума. Мой блог http://sosnovskij.ru/.



#3 c0ns0l3

c0ns0l3
  • Пользователь
  • 264 сообщений
  • Репутация: 49

Отправлено 21 Март 2012 - 17:56

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

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

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

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


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

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

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

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

#4 c0ns0l3

c0ns0l3
  • Пользователь
  • 264 сообщений
  • Репутация: 49

Отправлено 21 Март 2012 - 18:25

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

Менюшка.
Каркас:
<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 - массив цветов, на которые будут менять кнопки. Слева на право соответственно.

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


  • 1

#5 basilio

basilio
    Topic Starter
  • Пользователь
  • 79 сообщений
  • Репутация: 0

Отправлено 28 Март 2012 - 18:42

Спасибо вам огромное!!! ;)
  • 0


Оформление форума – IPBSkins.ru