Создание нижней панели навигации HTML CSS

В этом уроке вы узнаете, как создать нижнюю панель навигации HTML CSS . Ранее я поделился еще одним уроком по созданию нижнего навигационного меню . Этот тип вкладки CSS мы видим в основном в случае отзывчивых устройств. 

Этот тип HTML-кода нижней панели навигации используется в основном в мобильных приложениях. Этот дизайн может быть создан только с помощью HTML CSS. 

Хотя я использовал немного JavaScript, чтобы анимация, используемая здесь, работала. Если вы опустите анимацию, вы можете создать эту мобильную нижнюю панель навигации с помощью HTML CSS.

Нижняя панель навигации HTML CSS

Для вашего удобства я дал превью ниже. Иконки использовались вместо текста для меню. Если вам нужен только исходный код, используйте кнопку под статьей.

Во-первых, на веб-странице была создана базовая структура фиксированной нижней панели навигации . Белый цвет был использован в качестве фона навигационной панели. 

Затем я использовал 5 иконок здесь. Вы можете увеличить количество меню в соответствии с вашими потребностями. Здесь цвет активного значка будет красным. К активным значкам были добавлены границы с помощью CSS до и после. 

Над и под пунктом меню, который будет активен, можно увидеть границу шириной 8 пикселей. Когда вы щелкнете по другому значку, его границы будут удалены и добавлены к этому значку.

Как создать нижнее меню навигации

Ниже я поделился пошаговым руководством и показал, как создать дизайн нижней панели навигации. Для этого нужно иметь представление о HTML, CSS и javascript. 

Однако, если вы новичок, следуйте инструкциям ниже. Если вы создаете это нижнее меню навигации с помощью флажков HTML, вам не нужно использовать JavaScript.

Шаг 1: Базовая структура нижней панели навигации

Во-первых, была создана базовая структура фиксированной нижней панели навигации.

<nav class=”navigation-bar”>
  <ul class=”list-items”>
     
  </ul>
</nav>

Я разработал веб-страницу, используя приведенный ниже код, и добавил цвет фона.

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
body {
  min-height: 100vh;
  background-color: #f2f2f2;
  display: flex;
  align-items: center;
  justify-content: center;
}

Я использовал минимальную высоту: 30 пикселей, минимальную ширину: 200 пикселей этой панели навигации, а цвет фона белый.

.navigation-bar {
  background: #fff;
  border-radius: 3px;
  min-height:30px;
  min-width:200px;
  overflow: hidden;
  box-shadow: 0 15px 25px rgba(0, 0, 0, 0.1);
}
.navigation-bar .list-items {
  list-style: none;
  display: flex;
  position: relative;
}

Шаг 2. Добавьте пункты меню на панель навигации.

Теперь я добавил пункты меню. Здесь я добавил пять пунктов меню. Вы можете добавить значки по вашему выбору здесь. Текст здесь не использовался. Вместо текста использовались значки.

<li class=”item active”>
  <a class=”link” href=”#”>
    <i class=”fas fa-home fa-2x”></i>
  </a>
</li>
<li class=”item”>
  <a class=”link” href=”#”>
     <i class=”fas fa-search fa-2x”></i>
  </a>
</li>
<li class=”item”>
  <a class=”link” href=”#”>
     <i class=”fas fa-heart fa-2x”></i>
  </a>
</li>
<li class=”item”>
  <a class=”link” href=”#”>
    <i class=”fas fa-bell fa-2x”></i>
  </a>
</li>
<li class=”item”>
  <a class=”link” href=”#”>
    <i class=”fas fa-user fa-2x”></i>
  </a>
</li>

Следующий CSS был использован для дизайна значков меню, добавленных выше. Высота: 4 бэр, ширина: 4,5 бэр каждого блока меню.

.navigation-bar .list-items .item {
  flex: 1 1 0px;
  position: relative;
  z-index: 2;
}
.navigation-bar .list-items .item .link {
  display: inline-block;
  height: 4rem;
  width: 4.5rem;
  line-height: 4.5;
  text-align: center;
  color: #acb8c1;
}
.navigation-bar .list-items .item.active .link {
  color: #ff767d;
}

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

.list-items .item .link i {
  font-size: 1.6rem;
  transition: font-size 0.2s linear;
}
.list-items .item.active .link i {
  font-size: 1.4rem;
}

Шаг 3: Добавьте цветовой эффект

Теперь я добавил эффект анимации в нижнюю панель навигации HTML CSS. Как вы можете видеть в демо, вы можете увидеть границу ниже и выше активного значка.

Во-первых, мы добавили сплошную границу внизу, используя before. Затем к верхней части значков применяется сплошная рамка с помощью After. Цвет границы, используемый здесь, красный.

<span class=”pointer”></span>
.navigation-bar .list-items .pointer {
  position: absolute;
  left: 0px;
  height: 100%;
  width: 4.5rem;
  z-index: 0;
  transition: all 0.2s linear;
}
.navigation-bar .list-items .pointer::before,
.navigation-bar .list-items .pointer::after {
  content: “”;
  position: absolute;
  left: 0;
  width: 100%;
}
.list-items .pointer::before {
  top: 0;
  border-bottom: 8px solid #ff767d;
  border-radius: 0 0 30px 30px;
}
.list-items .pointer::after {
  bottom: 0;
  border-top: 8px solid #ff767d;
  border-radius: 30px 30px 0 0;
}

Шаг 4. Активируйте нижнюю навигацию с помощью JavaScript

Надеюсь, вы создали структуру этого нижнего навигационного меню со значками . Однако, чтобы активировать это, вам нужно использовать JavaScript. 

Однако, если вы не хотите использовать JavaScript, вы можете добавить значки с помощью флажка HTML. Здесь очень легко использовать JavaScript. Эти коды помогут вам выбрать пункты меню и изменить цветовой эффект.

Вот глобальная константа пунктов меню и цветовых эффектов. Потому что ни один элемент HTML нельзя использовать непосредственно в JavaScript.

const navigation_items_elms = document.querySelectorAll(“.navigation-bar .list-items .item”);
const navigation_pointer = document.querySelector(“.navigation-bar .pointer”);
navigation_items_elms.forEach((item, index) => {
  item.addEventListener(“click”, (e) => {
    e.preventDefault();
    navigation_items_elms.forEach((itm) => itm.classList.remove(“active”));
    item.classList.add(“active”);
    const parentWidth = item.parentElement.clientWidth;
    const lefPercent = (parentWidth / navigation_items_elms.length) * index;
    navigation_pointer.style.left = lefPercent + “px”;
  });
});

Нижнее меню навигации HTML (исходный код)

Теперь пришло время скопировать исходный код и создать это нижнее меню навигации . Хотя ниже я дал кнопку скачать. 

Однако, если вы хотите скопировать код и использовать его в своей работе, вы можете воспользоваться этим разделом. Сначала вы создаете файл HTML. 

Нет необходимости создавать здесь еще один файл. Потому что весь код включен в формате HTML. Скопируйте код напрямую и создайте нижнюю панель навигации HTML CSS.

Мы надеемся, что вы узнали, как создать эту мобильную нижнюю панель навигации HTML CSS, используя учебные пособия, демонстрации и код выше. Используйте кнопку ниже, чтобы загрузить исходный код.

Оригинальный источник статьи: https://foolishdeveloper.com/

#html #css 

What is GEEK

Buddha Community

Sidebar Menu Using Only HTML and CSS | Side Navigation Bar

how to create a Sidebar Menu using HTML and CSS only. Previously I have shared a Responsive Navigation Menu Bar using HTML & CSS only, now it’s time to create a Side Navigation Menu Bar that slides from the left or right side.

Demo

#sidebar menu using html css #side navigation menu html css #css side navigation menu bar #,pure css sidebar menu #side menu bar html css #side menu bar using html css

HTML Tutorial For Beginners

The prospect of learning HTML can seem confusing at first: where to begin, what to learn, the best ways to learn — it can be difficult to get started. In this article, we’ll explore the best ways for learning HTML to assist you on your programming journey.

What is HTML?

Hypertext Markup Language (HTML) is the standard markup language for documents meant to be displayed in a web browser. Along with Cascading Style Sheets (CSS) and JavaScript, HTML completes the trio of essential tools used in creating modern web documents.

HTML provides the structure of a webpage, from the header and footer sections to paragraphs of text, videos, and images. CSS allows you to set the visual properties of different HTML elements, like changing colors, setting the order of blocks on the screen, and defining which elements to display. JavaScript automates changes to HTML and CSS, for example, making the font larger in a paragraph when a user clicks a button on the page.

#html #html-css #html-fundamentals #learning-html #html-css-basics #html-templates

Responsive Footer Design using HTML, CSS & Bootstrap

Hello Readers, welcome to my other blog, today in this blog I’m going to create a Responsive Footer by using HTML & CSS only. Earlier I have shared How to create a Responsive Navigation Menu and now it’s time to create a footer section.

As you can see on the image which is given on the webpage. There are various important topics there like About us, Our services and subscribes, some social media icons, and a contact section for easy connection. I want to tell you that it is fully responsive. Responsive means this program is fit in all screen devices like tablet, small screen laptop, or mobile devices.

Live Demo

#responsive footer html css template #footer design in html #simple footer html css code #simple responsive footer codepen #responsive footer code in html and css #responsive footer html css codepen

Creating a CSS Visual Cheatsheet

The other day one of our students asked about possibility of having a CSS cheatsheet to help to decide on the best suited approach when doing this or that layout.

This evolved into the idea of making a visual CSS cheatsheet with all (most) of the common patterns we see everyday and one of the best possible conceptual implementation for them.

In the end any layout could and should be split into parts/blocks and we see every block separately.

Here is our first take on that and we would be happy to keep extending it to help us all.

Please, send you suggestions in the comments in community or via gitlab for the repeated CSS patterns with your favourite implementation for that so that we will all together make this as useful as it can be.

#css #css3 #cascading-style-sheets #web-development #html-css #css-grids #learning-css #html-css-basics

This CSS Cut Out Effect is Guaranteed to Blow Your Mind 🤯

This effect is so cool and just fun to see. What it comes down to is having a background image show through the text.

How it works is that we will have a div that will have the image as a background. On that, we put our text element, using blend-mode it will show through the image.

The result you can see and touch on this Codepen.

#css #css3 #html-css #css-grids #learning-css #html-css-basics