css - Making HTML Widget resize Dynamically -
i attempting make html widget responsive , resize when browser resized. here html:
<nav class="navigation"> <ul class="menu"> <li class="menu__item"> <a href="" class="menu__link" target="_blank"> <span class="menu__title"> <span class="menu__first-word" data-hover="executive"> executive </span> <span class="menu__second-word" data-hover="summary"> summary </span> </span> </a> </li> <li class="menu__item"> <a " class="menu__link" target="_blank"> <span class="menu__title"> <span class="menu__first-word" data-hover="display"> display </span> <span class="menu__second-word" data-hover="summary"> summary </span> </span> </a> </li> <li class="menu__item"> <a href="" class="menu__link" target="_blank"> <span class="menu__title"> <span class="menu__first-word" data-hover="facebook"> facebook </span> <span class="menu__second-word" data-hover="summary"> summary </span> </span> </a> </li> <li class="menu__item"> <a href="" class="menu__link" target="_blank"> <span class="menu__title"> <span class="menu__first-word" data-hover="linkedin"> linkedin </span> <span class="menu__second-word" data-hover="summary"> summary </span> </span> </a> </li> <li class="menu__item"> <a href="" class="menu__link" target="_blank"> <span class="menu__title"> <span class="menu__first-word" data-hover="search"> search </span> <span class="menu__second-word" data-hover="summary"> summary </span> </span> </a> </li> <li class="menu__item"> <a href="" class="menu__link" target="_blank"> <span class="menu__title"> <span class="menu__first-word" data-hover="google"> google </span> <span class="menu__second-word" data-hover="analytics"> analytics </span> </span> </a> </li> </ul> </nav> here css:
body { display: flex; align-items: center; height: ; background: #fff; } { outline: 0; text-decoration: none; } .navigation { width: 100%; border-bottom: 3px solid #000; font-family: 'pathway gothic one', sans-serif; font-size: 22px; } .menu { display: flex; justify-content: center; max-width: 1150px; margin: 0 auto; padding-left: 0; } .menu__item { display: inline-block; white-space: nowrap; } @media screen , (max-width: 480px) { .menu__item:nth-child(n + 3) { display: none; } .menu__item:nth-child(2) .menu__link { border-right: 0; } } @media screen , (max-width: 768px) { .menu__item:nth-child(n + 4) { display: none; } .menu__item:nth-child(3) .menu__link { border-right: 0; } } @media screen , (max-width: 992px) { .menu__item:nth-child(n + 5) { display: none; } .menu__item:nth-child(4) .menu__link { border-right: 0; } } .menu__item:last-child .menu__link { border-right: 0; } .menu__link { display: block; padding: 6px 30px 3px; border-right: 2px dotted #ccd7d7; } .menu__link:hover .menu__first-word, .menu__link:focus .menu__first-word { transform: translate3d(0, -105%, 0); } .menu__link:hover .menu__second-word, .menu__link:focus .menu__second-word { transform: translate3d(0, 105%, 0); } @media screen , (min-width: 768px) { .menu__link { padding: 6px 40px 3px; } } .menu__title { display: inline-block; overflow: hidden; } .menu__first-word, .menu__second-word { display: inline-block; position: relative; transition: transform .3s; } .menu__first-word::before, .menu__second-word::before { position: absolute; content: attr(data-hover); } .menu__first-word { color: #000000; } .menu__first-word::before { top: 105%; color: #000000; } .menu__second-word { color: #f37421; } .menu__second-word::before { bottom: 105%; color: #f37421; } please advice on best method adjust make dynamic. have removed url references through html, side now.
please let me know if have questions.
thank you,
html not made responsive, used structure page. css used "design" it. add javascript script dynamically resize element !
if you're not used javascript, don't worry, pretty simple started.
here's useful documentation :
hope helped ;)
Comments
Post a Comment