diff --git a/mobile-tab-navigation/index.html b/mobile-tab-navigation/index.html new file mode 100644 index 00000000..0c474309 --- /dev/null +++ b/mobile-tab-navigation/index.html @@ -0,0 +1,39 @@ + + + + + + + + Mobile Tab Navigation + + +
+ home + work + blog + about + +
+ + + diff --git a/mobile-tab-navigation/script.js b/mobile-tab-navigation/script.js new file mode 100644 index 00000000..8ae9fcfd --- /dev/null +++ b/mobile-tab-navigation/script.js @@ -0,0 +1,21 @@ +const contents = document.querySelectorAll('.content') +const listItems = document.querySelectorAll('nav ul li') + +listItems.forEach((item, idx) => { + item.addEventListener('click', () => { + hideAllContents() + hideAllItems() + + item.classList.add('active') + contents[idx].classList.add('show') + }) +}) + +function hideAllContents() { + contents.forEach(content => content.classList.remove('show')) +} + + +function hideAllItems() { + listItems.forEach(item => item.classList.remove('active')) +} \ No newline at end of file diff --git a/mobile-tab-navigation/style.css b/mobile-tab-navigation/style.css new file mode 100644 index 00000000..56b48b97 --- /dev/null +++ b/mobile-tab-navigation/style.css @@ -0,0 +1,74 @@ +@import url('https://fonts.googleapis.com/css?family=Open+Sans&display=swap'); + +* { + box-sizing: border-box; +} + +body { + background-color: rgba(155, 89, 182, 0.7); + font-family: 'Open Sans', sans-serif; + display: flex; + align-items: center; + justify-content: center; + height: 100vh; + margin: 0; +} + +.phone { + position: relative; + overflow: hidden; + border: 3px solid #eee; + border-radius: 15px; + height: 600px; + width: 340px; +} + +.phone .content { + opacity: 0; + object-fit: cover; + position: absolute; + top: 0; + left: 0; + height: calc(100% - 60px); + width: 100%; + transition: opacity 0.4s ease; +} + +.phone .content.show { + opacity: 1; +} + +nav { + position: absolute; + bottom: 0; + left: 0; + margin-top: -5px; + width: 100%; +} + +nav ul { + background-color: #fff; + display: flex; + list-style-type: none; + padding: 0; + margin: 0; + height: 60px; +} + +nav li { + color: #777; + cursor: pointer; + flex: 1; + padding: 10px; + text-align: center; +} + +nav ul li p { + font-size: 12px; + margin: 2px 0; +} + +nav ul li:hover, +nav ul li.active { + color: #8e44ad; +}