Яндекс.Метрика

Дизайн-журнал №1. Актуальная информация для дизайнеров, веб дизайнеров, программистов и разработчиков сайтов.

Создание адаптивного веб-дизайна для меню, изображений и рекламы

4 сентября 2015 | Опубликовано в css | 1 Комментарий »

Этот урок — продолжение темы урока Адаптивный веб-дизайн с использованием CSS3. Мы уже объяснили, как создать простую адаптивную веб-страницу с помощью CSS3 и библиотеки JavaScript Modernizr для ранних версий браузеров. В этом уроке мы хотим показать, как создать адаптивное сворачивающееся меню, изображения и рекламу для разных устройств.

 

 

Демонстрация работы – Скачать исходный код

Посмотрите, как выглядит демонстрация работы на экранах с разным разрешением.

Изображения 

Адаптивный дизайн для изображений очень прост, нужно только задать ширину и высоту равными 100%.

Код HTML

<div class="responsiveImage">
<img src="image.jpg" />
</div>

 

Код CSS

.responsiveImage { width: 100%; clear: both;}
.responsiveImage img{ max-width: 100%; max-height: 100%; }

 

Меню 

Сворачивающееся меню для мобильных устройств, чтобы освободить пространство экрана.

Код HTML

<div class="menubar">
<div>
Menu <a href="javascript:void(0);"><span class="menuicon"></span></a>
</div>

<ul>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
.....
.....
</ul>
</div>
<div style="clear:both;"></div>

 

Код CSS @media 768px + 

Здесь тегу li, который является дочерним по отношению к классу .menu, задано всплывать влево.

a { text-decoration: none; }
.menubar { width:100%; height:39px; background-color: #006699; }
.menu { float: left; position: relative; padding: 10px; }
.menubar .menu > li { float: left; line-height: 20px; }
.menu > li > a { color: #ffffff; font-size: 15px; padding:10px 15px 10px; }
.menu > li > a:hover, .menu > li > a:active { background-color:#4682b4; border-radius:4px; }
.responsive-menu { display: none; color: #ffffff; font-weight: bold; padding: 5px; border-bottom: 2px solid #ffffff;width:100%; }

 

Код CSS @media 768px — 

Здесь тегу li, который является дочерним по отношению к классу .menu, задана ширина 100%.

@media (max-width: 767px) {
.menubar{clear:left; height:auto !important; display: table; }
.menu{ float: none; width:100%; padding:0px !important; display: none; }
.menubar .menu > li { width:100%; border-bottom: 1px solid #dedede; cursor: pointer; padding-top: 5px; padding-bottom: 5px; }
.menu > li:hover, .menu > li:active { background-color:#4682b4;}
.responsive-menu { display: inline-block !important; }
}

 

Код CSS для кнопки, разворачивающей меню

/* Символ кнопки, разворачивающей меню */
.menuicon {
width: 0;
height: 0;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
border-top: 10px solid #ffffff;
position: absolute;
right: 8px;
top:11px;
}

JavaScript 

Содержит код JavaScript $(«.menuicon»).click(function(){}, в котором .menuicon — название класса кнопки, разворачивающей меню. Используем функцию slideToggle (переключить состояние развернутости) $(«.menu»).slideToggle(); для того, чтобы сделать меню выпадающим.

<script src="jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function()
{

$(".menuicon").click(function()
{
$(".menu").slideToggle();
});
// Функция изменения размера окна
$(window).resize(function()
{
if($(this).width() < 767)
{
$(".menu").hide();
}
else
{
$(".menu").show();
}
});
});
</script>

 

$(window).resize(function() определяет разрешение экрана и, в зависимости от его ширины, покажет или спрячет то, что относится к классу .menu.

Блоки рекламы 

Код HTML

Мы создали три горизонтальных блока: .ad_big (большая реклама) шириной 728px, .ad_medium (средняя реклама) шириной 468px и .ad_small (маленькая реклама) шириной 300px.

<div>728px Ad</div>
<div>467px Ad</div>
<div>300px Ad</div>

 

Код CSS 

В зависимости от разрешений экрана будет показан тот или иной блок рекламы:

.ad_big,.ad_medium,.ad_small{ padding:5px;margin:5px; }
.ad_medium,.ad_small { display:none; }

/* Выбор рекламного блока в зависимости от размера устройства */
@media (min-width: 478px) and (max-width: 738px) {
.ad_medium{
display: block !important;
}
.ad_big,.ad_small {
display: none;
}
}

@media (min-width: 325px) and (max-width: 477px) {
.ad_small {
display:block !important;
}
.ad_big,.ad_medium {
display: none !important;
}

}
@media (min-width: 0px) and (max-width: 324px) {
.ad_small {
display:block !important;
}
.ad_big,.ad_medium {
display: none !important;
}
}






Автор урока Srinivas Tamada


Перевод — Дежурка


Смотрите также:


						

                        

                            

                        













                        			
		      
			

			
	
                        

                            

                                
                            

                        



                        
 
                            

                                
                            


                            


                                

                                

                            


                            

                                

                            

                            
                            
                            

                                
                            
      

                            

                                �
                            


                            
        
                                
                            

                            
                            

                        


                        

						
        


  Комментарии



  
    
                
  1.  BETEPAH            
    
      4 сентября 2015 в 15:30
            
      
      
      
     Thumb up Thumb down +4
    
      
    при копипасте кода вы потеряли некоторые классы (.responsive-menu, .menu). Без них урок не всем будет понятен, добавьте в разметку.
    

    
    2. 
              















        
		
                        

                            
Похожие статьи
                        



                        

                            

        Случайные статьи                            

                                                
                       
                        
 


    
            

        

    






    

        
        
        
        
        
        

    



        

                        

                

            

        


    


    

		








    


		
    











                 
    


	
	

	





	

	








    

        

            
        



    






  
Друзья

	






 








 

 
 



 
        
	

		
    • 	
    
	
    	




        

    
  
    Самые комментируемые