Карта сайта на CSS

Красиво оформленая карта сайта (sitemap)

- Ссылка на загрузку и описание


Исполняемый код:

<div class="sitemap"> <nav class="utnav"> <ul> <li><a href="https://www.instagram.com/remontmskk/"> <s class="bg-soc_inst"></s>Instagram</a></li> <li><a href="https://vk.com/remontmskk"> <s class="bg-soc_vk"></s>VK</a></li> </ul> </nav> <nav class="prnv"> <ul> <li id="home"><a href="https://styazhka-pola-v-moskve.ru"><s class="bg-home"></s>Главная</a></li> <li><a href="/about.html"><s class="bg-kat_o"></s>О нас</a> <ul> <li><a href="/kontakt.html"><s class="bg-map"></s>Контакты</a></li> <li><a href="/foto/"><s class="bg-foto"></s>Фотоальбом</a></li> <li><a href="/cena.html"><s class="bg-zirka"></s>Цены</a></li> </ul> </li> <li><a href="/mehan/"><s class="bg-kat_o"></s> Механизированная стяжка</a> <ul> <li><a href="/mehan/kvartira.html"><s class="bg-stor"></s> Стяжка в квартире</a></li> <li><a href="/mehan/dom.html"><s class="bg-stor"></s> Стяжка в доме</a></li> <li><a href="/mehan/sklad.html"><s class="bg-stor"></s> Стяжка склада</a></li> <li><a href="/mehan/mashinaya.html"><s class="bg-kat"></s> Машинная стяжка</a></li> <ul> <li><a href="/mehan/"><s class="bg-stor"></s>----- </a></li> <li><a href="/mehan/"><s class="bg-stor"></s>----- </a></li> </ul> </li> </ul> </li> <li><a href="/shtykatyrka/"><s class="bg-kat_o"></s> Механизированная штукатурка</a> <ul> <li><a href=""><s class="bg-stor"></s>Штукатурные работы</a></li> <li><a href=""><s class="bg-stor"></s>Механическая штукатурка</a></li> </ul> </li> <li><a href="https://www.astuteo.com/demo/contact"><s class="bg-kat_o"></s> Contact</a> <ul> <li><a href="https://www.astuteo.com/demo/offices"><s class="bg-meil"></s>Offices</a> <ul> <li><a href="https://www.astuteo.com/demo/form"><s class="bg-telefon"></s>telefon<s class="bg-t_ks"></s><s class="bg-t_life"></s><s class="bg-t_vodaf"></s></a> <ul> <li><a href="https://www.astuteo.com/demo/quote"><s class="bg-pr_ua"></s>uk - <s class="bg-pr_rus"></s>rus</a></li> <li><a href="https://www.astuteo.com/demo/media"><s class="bg-pr_eng"></s>eng - <s class="bg-pr_pl"></s>pl</a></li> <li><a href="https://www.astuteo.com/demo/suppliers"> <s class="bg-kalend"></s><s class="bg-ik_zakl"></s><s class="bg-youtobe"></s> <s class="bg-soc_vatsap"></s><s class="bg-soc_viber"></s><s class="bg-soc_telegr"></s><s class="bg-soc_ok"></s><s class="bg-tw"></s></a> </li> </ul> </li> <li><a href="https://www.astuteo.com/demo/map"><s class="bg-lost_pas"></s>Locations</a></li> </ul> </li> <li><a href="vhod/"><s class="bg-login"></s>login</a> <li><a href="shop/"><s class="bg-korz"></s>Shop</a> </ul> </li> </ul> </nav> </div> <style> .sitemap {margin: 20px 2em;font-family: "Proxima Nova", Helvetica, Arial, sans-serif;font-size: 16px;line-height: 1;padding: 0.5em;color: black;} /* -------- Top Level --------- */ .prnv {clear: both;width: 100%;margin-top: 3em;} .prnv #home {position: absolute;margin-top: -3em;margin-bottom: 0;min-width: 11.5em;width: 100%;} .prnv #home:before {display: none;} .prnv ul {display: flex;flex-wrap: wrap;list-style: none;position: relative;} .prnv li {flex: 1;flex-basis: 11.5em;padding-right: 1.25em;position: relative;} .prnv > ul > li {margin-top: 3em;} .prnv li a {margin: 0;padding: .875em .9375em .9375em .9375em;display: block;font-size: .9375em;font-weight: bold;color: white;background: #0090ff;text-shadow: 0 0 10px rgba(0,0,0,.1);border: 1px solid rgba(0,0,0,.025);box-shadow: 0px 2px 1px rgba(0,0,0,0.15);text-decoration: none;} .prnv li a:hover {background-color: #0070f9;} .prnv a:link:after, .prnv a:visited:after, .utnav a:link:after, .utnav a:visited:after {content: " "attr(href)" ";display: block;font-weight: 600;font-size: .75em;margin-top: .25em;word-wrap: break-word;color: rgba(255,255,255,.75);} /* -------- Second Level --------- */ .prnv ul ul {display: block;} .prnv ul ul li {padding-top: .6875em;padding-right: 0;} .prnv ul ul li a {background-color: #28bf5e;} .prnv ul ul li a:hover {background-color: #09a63e;} .prnv ul ul li:first-child {padding-top: 2em;} /* -------- Third Level --------- */ .prnv ul ul ul {margin-top: .6em;padding-top: .6em;padding-bottom: .625em;} .prnv ul ul ul li {padding-top: .3125em;padding-bottom: .3125em;} .prnv ul ul ul li a {background-color: #ff9d00;font-size: .75em;padding: .75em;width: 90%;margin-right: 0;margin-left: auto;} .prnv ul ul ul li a:hover {background-color: #ff831b;} .prnv ul ul ul li:first-child {padding-top: 1em;} .prnv ul ul ul li a:link:after, .prnv ul ul ul li a:visited:after {font-size: .75em;} /* -------- Fourth Level --------- */ .prnv ul ul ul ul {margin-top: 0;padding-top: .3125em;padding-bottom: .3125em;} .prnv ul ul ul ul li a {background-color: #de003a;padding: .75em ;width: 80%;} .prnv ul ul ul ul li a:hover {background-color: #c20035;} .prnv ul ul ul ul li a:link:after, .prnv ul ul ul ul li a:visited:after {display: none;} /* ----------Connecting Lines:Uncomment 'border-color: red' for debugging */ .prnv ul:before, .prnv ul:after, .prnv ul li:before, .prnv ul li:after {display: block;content: '';position: absolute;border-width: 0;border-color: #e3e3e3;border-style: solid;z-index: -1;} .prnv > ul > li:before {height: 1.375em;top: -1.375em;right: calc(50% + .625em);width: calc(100% - 2px);border-top-width: 2px;border-right-width: 2px;} .prnv > ul > li:first-child + li:before {border-top-width: 0;height: 5em;top: -5em;} .prnv ul ul li:after {width: 50%;height: .6875em;top: 0;right: 1px;border-left-width: 2px;;} .prnv ul ul li:first-child:before {width: 50%;height: 1.3125em;top: .6875em;right: 1px;border-left-width: 2px;} .prnv > ul > li:last-child:after {border-bottom-width: 0;} .prnv ul ul ul li:before {width: calc(50% - 5px) !important;height: calc(100% - 2px);top: -50%;left: 0;border-left-width: 2px;border-bottom-width: 2px;} .prnv ul ul ul li:first-child:before {height: 2.125em;top: -1px;border-top-width: 2px;} .prnv ul ul ul:before {width: 50%;height: 1.25em;top: -10px;right: 1px;border-left-width: 2px;} .prnv ul ul ul li:after {border-width: 0;} .prnv ul ul ul ul li:before, .prnv ul ul ul ul li:first-child:before {display: none;} .prnv ul ul ul ul:before {width: 1px;height: calc(100% + 2.5em);top: -2.5em;left: 0;border-left-width: 2px;} /* ----------Utility Navigation */ .utnav {float: right;margin-top: 0;margin-bottom: -.25em;margin-right: 1.25em;max-width: 48%;list-style-type: none;} .utnav li {padding: 0 0 .625em .625em;display: inline-block;} .utnav li:first-child { } .utnav li a {display: block;font-size: .75em;font-weight: 700;padding: .75em 1em;font-weight: bold;text-align: left;color: white;background-color: #ff9d00;border: 1px solid rgba(0,0,0,.025);box-shadow: 0px 2px 0 rgba(0,0,0,0.15);text-shadow: 0 0 10px rgba(0,0,0,.15);text-decoration: none;} .utnav li a:hover {background-color: #ff831b;} .utnav li a:link:after, .utnav li a:visited:after {color: rgba(255,255,255,.75);font-size: .75em;font-weight: 600;margin-top: .25em;} /* --Responsive Styles-- */ @media screen and (max-width: 30em) {.prnv ul {display: block;}.prnv li {width: 100%; padding-right: 0;}.prnv #home {width: 100%; position: relative; margin-bottom: -1em; margin-top: 0;}.utnav {float: none; display: block; width: 100%; text-align: right; margin-bottom: 2.5em; max-width: 100%;} } /* two column */@media screen and (min-width: 30em) {.prnv > ul > li {max-width: 50%;}} /* three column */@media screen and (min-width: 38.5em) {.prnv > ul > li {max-width: 33%;}} /* four column */@media screen and (min-width: 50em) {.prnv > ul > li {max-width: 25%;}} [class*='bg-']{display:block; background:url(https://layout.rullan.in.ua/uploads/posts/2021-02/1614336865_sprit.png) no-repeat; float:left; margin-right:5px;} .bg-foto {width: 24px; height: 24px;background-position: -226px -174px;} .bg-korz {width: 24px; height: 24px;background-position: -192px -160px;} .bg-login {width: 24px; height: 24px;background-position: -226px -143px;} .bg-youtobe {width: 21px; height: 21px;background-position: -191px -52px;} .bg-ik_zakl {width: 24px; height: 24px;background-position: -10px -10px;} .bg-kalend {width: 16px; height: 16px;background-position: -103px -98px;} .bg-inf {width: 24px; height: 24px;background-position: -54px -10px;} .bg-kat {width: 16px; height: 16px;background-position: -133px -182px;} .bg-kat_o {width: 16px; height: 16px;background-position: -169px -182px;} .bg-home {width: 16px; height: 16px;background-position: -233px -10px;} .bg-telefon {width: 16px; height: 16px;background-position: -233px -46px;} .bg-meil {width: 16px; height: 16px;background-position: -233px -82px;} .bg-lost_pas {width: 25px; height: 20px;background-position: -10px -142px;} .bg-map {width: 24px; height: 24px;background-position: -10px -54px;} .bg-pr_eng {width: 29px; height: 17px;background-position: -54px -98px;} .bg-pr_pl {width: 29px; height: 17px;background-position: -142px -10px;} .bg-pr_rus {width: 29px; height: 17px;background-position: -142px -47px;} .bg-pr_ua {width: 29px; height: 17px;background-position: -142px -84px;} .bg-zirka {width: 24px; height: 24px;background-position: -54px -54px;} .bg-sitemap {width: 20px; height: 20px;background-position: -137px -142px;} .bg-soc_fb {width: 21px; height: 21px;background-position: -191px -93px;} .bg-soc_inst {width: 21px; height: 21px;background-position: -191px -134px;} .bg-soc_ok {width: 21px; height: 21px;background-position: -10px -182px;} .bg-soc_telegr {width: 21px; height: 20px;background-position: -55px -142px;} .bg-soc_viber {width: 22px; height: 22px;background-position: -191px -10px;} .bg-soc_vatsap {width: 21px; height: 21px;background-position: -51px -182px;} .bg-soc_vk {width: 21px; height: 20px;background-position: -96px -142px;} .bg-stor {width: 16px; height: 16px;background-position: -233px -118px;} .bg-t_ks {width: 24px; height: 24px;background-position: -98px -10px;} .bg-t_life {width: 24px; height: 24px;background-position: -98px -54px;} .bg-t_vodaf {width: 24px; height: 24px;background-position: -10px -98px;} .bg-tw {width: 21px; height: 21px;background-position: -92px -182px;} </style