Web-дизайн. Лабораторное занятие №3. Адаптация Google material

Вам нужно оформить свой блог по принципам google-material. Для этого:

А) Вы адаптируете все шрифты, цветовые схемы и иллюстрации под его требования (глубина изображения, контраст меню и слайдера и т.д.)

B) Создаете интерфейс dropdown-menu на основе google-material

Чтобы получить меню в google-material нужно заменить пункт-кнопки на привязку картинка-линк. 

Нужно сделать такое меню в двух кнопках по два уровня в каждой. Лучше использовать вторую и четвертую, чтобы они не

наплывали друг на друга.

То есть у вас было:

<li>

                            <a href="#" class="drop-down my-links">

                                пункт меню

                                <svg class="icon icon-arrow-down"><use xlink:href="#icon-arrow-down"></use></svg>

                                <svg class="icon icon-arrow-up"><use xlink:href="#icon-arrow-up"></use></svg>

                            </a>

                            <!-- NAVIGATION SECOND LEVEL -->

                            <ul class="nav-sl">

                                

                                    <li><a class="link-validate" href="/">пункт выпадающего меню</a></li>

                                

                                

                                    <li><a class="link-validate" href="/">второй пункт выпадающего меню</a></li>

                                

                            </ul>

                        </li>

1) От прошлого кода берем класс стилей меню:

<li>

                            <a href="#" class="drop-down">

                                проекты

                                <svg class="icon icon-arrow-down"><use xlink:href="#icon-arrow-down"></use></svg>

                                <svg class="icon icon-arrow-up"><use xlink:href="#icon-arrow-up"></use></svg>

                            </a>

2) Затем вносим коррективы во второй уровень меню, с указанием, что линки будут привязаны к картинкам:

<!-- NAVIGATION SECOND LEVEL -->

                            <ul class="nav-sl image-dd-menu">

                                <li class="image-dd-cat image-cat-1">

<div class="image-dd-pic">

3) Далее вы даете ссылку на картинку (загрузить ее можно на любой внешний ресурс, в моем случае на платформе google: https://sites.google.com/site/названиевашегоблога/system/app/pages/admin/attachments

 , но можно и в статику tumblr). параметры не более 200х65 px.

То есть картинка будет иметь вид:

 <img src="https://sites.google.com/site/konoplevmedia/button10.png">

4)Следом выводите ссылку с кнопки и надпись в этой кнопке:                                  

                                           

  <div class="image-dd-links">

                                        

<a class="link-validate" href="http://konoplevtech.blogspot.com/">результаты</a>

  </div>    

  </li>

5) Далее для второй кнопки - то же самое (меняется только цифра в классе). 

                                <li class="image-dd-cat image-cat-2">

                                    

                                    

                                    <div class="image-dd-pic">

                                        <img src="https://sites.google.com/site/konoplevmedia/button20.png">

                                        

                                           

                                    <div class="image-dd-links">

                                        

                                        <a class="link-validate" href="https://konoplevtech.blogspot.com/2017/05/2017.html">задания</a>

                                        

                                        

                                        

                                    </div>    

                                </li>

                                       

6) В первом случае вы можете менять цвета надписи-ссылки (активная/неактивная) в меню интерфейса. 

7) В случае со вторым блоком меню задайте статичный цвет

для надписи-ссылки - он добавляется через тег <font> внутри ссылки - то есть: <font color="blue">текст выпадающей кнопки</font>

Ссылки на выполненное задание принимаются до 18:00 10 октября.