Responsive web design – responsywne menu w stylu Metro UI

Demo:

Bardzo popularny ostatnio jest ostatnio termin Responsive Web Design. O co w tym właściwie chodzi? Odpowiedz jest bardzo prosta, a mianowicie jest to sztuka tworzenia stron internetowych, które dostosowują się do okna przeglądarki.

A więc strona będzie wyglądała bardzo dobrze zarówno na standardowym monitorze, na tablecie oraz na smartfonie, czy telefonie komórkowym. Większość stron, jakie przeglądamy w internecie nie jest dostosowana do urządzeń przenośnych. Nie znaczy to, że nie będzie się dało przeglądać takiej strony, jednak duże firmy, głównie informatyczne mają swoje strony responsywne.

Moda ta rozszerza się bardzo szybko i obecnie tworzenie nowych stron jest w tej nowej technologii.

Aby stworzyć w pełni skalowalną stronę można skorzystać z gotowych frameworków, takich jak np.: Bootstrap, UI Kit, Foundation, czy jeszcze parę innych. Budowa strony za pomocą tych gotowych narzędzi jest zazwyczaj bardzo prosta. Wystarczy nauczyć się pewnego schematu, zobaczyć działanie skryptu i składanie całości strony z gotowych klocków.

Czasami jednak w bardziej zaawansowanej budowie stron może okazać się, że ten, czy inny framework w pewien sposób nas ogranicza. Dlatego warto zapoznać się z architekturą budowy stron w technologii responsive i samemu stworzyć szkielet takiej strony.

Poniższy przykład przedstawia responsywne menu z dodatkiem elementu Metro UI.

Krok 1 – układ strony HTML 5

Z racji tego, że jest to nowoczesna metoda tworzenia stron internetowych całość musi mieć szkielet HTML 5. Dodatkowo w znaczniku < head > umieszczamy linie:


<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

Znacznik ten odpowiada za zdefiniowanie okna szerokości okna przeglądarki.

Krok 2 – układ menu

Nasze menu ma standardowy układ, składa się z 5 pozycji:

<nav id="ewd_res_menu" class="clearfix">
		<ul class="clearfix">
			<li>				
				<a class="home" title="Home" href="#">
					<img src="ico/color/Home.png" />
					<span>Home</span>
				</a>
			</li>
			<li>				
				<a title="About" class="about" href="#">
					<img src="ico/color/Windows-8-Login.png" />
					<span>About</span>
				</a>
			</li>
			<li>				
				<a title="Tools" class="tools" href="#">
					<img src="ico/color/Microsoft-Office-2013-03.png" />
					<span>Tools</span>
				</a>
			</li>
			<li>				
				<a title="Web Design" class="web_design" href="#">
					<img src="ico/color/Network.png" />
					<span>Web 2.0</span>
				</a>
			</li>
			<li>				
				<a title="Contact" class="contact" href="#">
					<img src="ico/color/Message-Mail.png" />
					<span>Contact</span>
				</a>
			</li>
			<li>				
				<a title="Home" class="info" href="#">
					<img src="ico/color/Bull-Horn.png" />
					<span>Info</span>
				</a>
			</li>	
		</ul>
		<a href="#" id="down">Menu</a>
	</nav>

Pod naszą listą z menu znajduje się jeszcze jeden znacznik a . Jest on niewidoczny, ale będzie nam potrzebny i pokaże się jeśli rozdzielczość ekranu ulegnie zmniejszeniu co pokaże w dalszej części kursu.

Krok 3 – dodanie styli css

Serce i płuca naszego responsywnego elementu znajdują się w stylach css.


.clearfix:before,
.clearfix:after {
    content: " ";
    display: table;
}
.clearfix:after {
    clear: both;
}
nav#ewd_res_menu {
	height: 120px;
	width: 100%;
	background: #f3f3f3;
	font-size: 11pt;
	font-family: 'PT Sans', Arial, sans-serif;
	font-weight: bold;
	position: relative;
	border-bottom: 2px solid #283744;
}
nav#ewd_res_menu ul {
	padding: 0;
	margin: 0 auto;
	width: 665px;
	height: 100%;
}
nav#ewd_res_menu li {
	display: inline;
	float: left;
	height:100%;
}
nav#ewd_res_menu li img
{
	display:block;
	margin:10px auto;
	width:35px;
	
}
nav#ewd_res_menu a {
	color: #333;
	display: inline-block;
    height: 100px;
    margin: 10px 5px;
    padding: 10px 12px;
    text-align: center;
    text-decoration: none;
    width: 100px;
	text-transform:uppercase;
}
nav#ewd_res_menu li a {
	border-top:3px solid transparent;
	border-bottom:3px solid transparent;
	box-sizing:border-box;
	-moz-box-sizing:border-box;
	-webkit-box-sizing:border-box;
	transition: all .8s ease-in-out;
	background:#fff;
}
nav#ewd_res_menu a#down {
	display: none;
}
nav#ewd_res_menu a.home
{
	color:#deb058;
}
nav#ewd_res_menu a.home:hover
{
	border-top:3px solid #deb058;
	border-bottom:3px solid #deb058;
}
nav#ewd_res_menu a.about
{
	color:#639ab6;
}
nav#ewd_res_menu a.about:hover
{
	border-top:3px solid #639ab6;
	border-bottom:3px solid #639ab6;
}
nav#ewd_res_menu a.tools
{
	color:#ff7f66;
}
nav#ewd_res_menu a.tools:hover
{
	border-top:3px solid #ff7f66;
	border-bottom:3px solid #ff7f66;
}
nav#ewd_res_menu a.web_design
{
	color:#bad80a;
}
nav#ewd_res_menu a.web_design:hover
{
	border-top:3px solid #bad80a;
	border-bottom:3px solid #bad80a;
}
nav#ewd_res_menu a.contact
{
	color:#35e75f;
}
nav#ewd_res_menu a.contact:hover
{
	border-top:3px solid #35e75f;
	border-bottom:3px solid #35e75f;
}
nav#ewd_res_menu a.info
{
	color:#515477;
}
nav#ewd_res_menu a.info:hover
{
	border-top:3px solid #515477;
	border-bottom:3px solid #515477;
}	  
@media screen and (max-width: 665px) {
	nav#ewd_res_menu { 
  		height: auto;
  	}
  	nav#ewd_res_menu ul {
  		width: 370px;
  		display: block;
  		height: auto;
  	}
	nav#ewd_res_menu li {
		display: inline;
		float: left;
		border-right: 1px solid #576979;
		height: 45px;
                width: 60px;
	}
	nav#ewd_res_menu li img
{
	display:block;
	width:30px;
	float:inherit;
	padding:0 5px;
	margin:0 auto;
}
  	nav#ewd_res_menu li a {
		border:0;
		width:100%;
		height:100%;
		margin:0;
		padding:7px;
	}
	nav#ewd_res_menu li a:hover
	{
		border:0 !important;
		background:#d3d3d3;
	}
  	nav#ewd_res_menu li a span{
	display:none;
	
	}
  	nav#ewd_res_menu a {
	  	text-align: left;
	  	width: 100%;
	  	text-indent: 25px;

  	}
}

@media only screen and (max-width : 480px) {
	nav#ewd_res_menu {
		border-bottom: 0;
		height:50px;
	}
	nav#ewd_res_menu ul {
		display: none;
		height: auto;
		width:auto;
	}
	nav#ewd_res_menu a#down {
		display: block;
		background-color: #283744;
		width: 100%;
		position: relative;
		color:#DEDEDE;
		height:30px;
		margin:0;
		padding:10px 0;
	}
	nav#ewd_res_menu a#down:after {
		content:"";
		background-image: url('ico/white/Blinklist.png');
		background-size:40px;
		background-repeat:no-repeat;
		width: 33px;
		height: 30px;
		display: inline-block;
		position: absolute;
		right: 18px;
		top: 5px;
	}
	 nav#ewd_res_menu li {
  		width: 100%;
  		float: left;
  		position: relative;
		border:0;
  	} 
	nav#ewd_res_menu li a:hover
	{
		border-bottom:1px solid #576979 !important;
		background:#d3d3d3;		
	}
	nav#ewd_res_menu li a span{
	display:block;	
	}
	nav#ewd_res_menu li a img
	{
		float:left;
	}
	nav#ewd_res_menu li a {
		border-bottom: 1px solid #576979;

	}
}

@media only screen and (max-width : 320px) {
	nav#ewd_res_menu li {
	display: block;
	float: none;
	width: 100%;
	}
	nav#ewd_res_menu li a {
	border-bottom: 1px solid #576979;
	}
}

	.ewd_demo
	{
     width:90%;
     height:auto;
     margin:0 auto;
    -moz-appearance: textfield-multiline;
    -webkit-appearance: textarea;
    border: 1px solid gray;
    font: medium -moz-fixed;
    font: -webkit-small-control;
    overflow: auto;
    padding: 2px;
    resize: both;
	}
.ewd_demo object {
    width: 100%;
    min-height: 100%;
} 

Trochę jest tych styli, jak na tak mały efekt, ale w większości tych stylów wiążą się z dostosowaniem wyglądu to standardu Metro UI.
Ale co jest ważne i na co należy koniecznie zwrócić uwagę w tych stylach? A no na znaczniki:

@media screen and (max-width: 665px) 
{

}

W tej funkcji piszemy style dla naszego menu, które będzie wyświetlane dla rozdzielczości poniżej 665px. Dalej mamy jeszcze takie 2 funkcje dla rozdzielczości 480px i 320px.

Krok 4 – dodanie skryptów jQuery

Nasze menu działa prawidłowo do czasu, aż zejdzie poniżej 320px. I dlatego trzeba dodać ostatni element, a więc skrypt jQuery

var pull = $('#down');
menu = $('nav#ewd_res_menu ul');
menuHeight= menu.height();

			$(pull).on('click', function(e) {
				e.preventDefault();
				menu.slideToggle();
			});

			$(window).resize(function(){
        		var w = $(window).width();
        		if(w > 320 && menu.is(':hidden')) {
        			menu.removeAttr('style');
        		}
    		});

Nasz skrypt sprawia, że nasze menu w najmniejszym układzie będzie działo prawidłowo, a więc będzie się rozwijać.

Dodaj komentarz

Twój adres email nie zostanie opublikowany. Pola, których wypełnienie jest wymagane, są oznaczone symbolem *

CAPTCHA
Change the CAPTCHA codeSpeak the CAPTCHA code