Панель меню слева html

Исходники для старта из Github

Все исходники для начала проекта вы сможете скачать по ссылке с моего Github. Там содержатся SVG-иконки, базовые настройки стилей, а также сброс стилей.

Разметка бокового меню

Первым делом сделаем разметку бокового меню в файле index.html. Разметка содержит в себе само меню (класс .menu), а также основной контент (класс .content).

Drivefile
 Home Recents Starred Photos Shared File Delete 

 Get help Logout 

Стили бокового меню

Важно сделать само меню фиксированным, а также растянуть его на всю высоту экрана.

body < width: 100%; min-height: 100vh; background-color: #f5f6fb; >/* Основные свойства для бокового меню */ .menu < display: flex; flex-direction: column; /* размещаем элементы к колонку */ width: 240px; min-height: 100vh; /* на всю высоту экрана */ position: fixed; /* чтобы меню было фиксированным */ top: 0; /* прижимаем к верхнему */ left: 0; /* .. и нижнему краю */ background-color: #343951; box-shadow: 4px 4px 8px 0 rgba(34, 60, 80, 0.2); /* задаем тень, чтобы отделить от фона */ >/* Свойства для контента */ .content < padding-left: 280px; /* отступ от бокового меню 240px + 40px */ padding-top: 40px; padding-right: 40px; padding-bottom: 40px; >.logo < display: flex; align-items: center; /* центрируем логотип с текстом */ color: #fff; font-size: 24px; text-decoration: none; font-family: "Rubik", sans-serif; font-weight: bold; >/* Задаем псеводоэлемент для иконки */ .logo:before < content: url(./img/logo.svg); /* путь от иконки-лого */ padding-right: 8px; /* немного отступим справа */ >/* Позиционирование лого в меню */ .menu__logo < padding-top: 50px; padding-left: 30px; margin-bottom: 59px; >/* Позиционирование элементов в меню */ .menu__link, .admin__link < padding-left: 30px; >/* Свойства для элементов меню */ .link < position: relative; /* чтобы задать потом псевдоэлемент */ display: flex; /* чтобы элемент тянулся на всю ширину */ align-items: center; /* по центру текст и иконка */ height: 45px; /* высота элемента 45px */ text-decoration: none; >/* Свойства иконки внутри ссылки */ .link > img < width: 25px; margin-right: 20px; >/* Свойства текста внутри ссылки */ .link > span < font-family: "Karla", sans-serif; font-size: 20px; color: #fff; >/* При наведении на ссылку - полупрозрачный белый фон */ .link:hover < background-color: rgba(255, 255, 255, 0.1); >/* Выводим оранжевую линию слева */ .link:hover:before < display: flex; >/* Создаем оранжевую линию слева */ .link:before < content: ""; display: none; position: absolute; left: 0; top: 0; width: 5px; height: 100%; background-color: #ffa000; >/* Позиционирование админ-меню */ .menu__admin

Источник

Как сделать меню слева в HTML?

Как сделать обычное меню слева, без наворотов всяких?

Для того, чтобы сделать меню слева на Web-странице можно воспользоваться несколькими способами.

Самый простой вариант — использование табличной вёрстки. Создаём таблицу, состоящую из 2 колонок. В 1 колонке будут находится пункты меню, а во 2 колонке — какая-либо информация.

Пункты меню описываем с помощью списка — в HTML для этого служит тег «ul» и вложенные теги «li».

Но я предпочитаю использовать вариант вёрстки с помощью блочных элементов div. Этот вариант и рассмотрим на примере.

Пример создания левого меню в HTML

Создаём 2 элемента div, в первом из них размещаем меню:

Чтобы первый div отображался слева, а второй div — справа, нужно для этих блочных элементов в таблице стилей CSS задать соответствующие свойства.

Описание первого div — .left_menu

Описание второго div — .right

Свойство float применяется для позиционирования элементов.

Для первого элемента свойство float:left означает, что он будет смещён к левому краю, а для второго элемента свойство float:right — к правому краю.

Что касается ширины width, то она задаётся исходя из специфики и содержимого вашего сайта.

Затем прописываем стили для элементов списка и стили ссылок. Пример из моего собственного архива:

Описание ссылок — .mainmenu1

После того, как мы задали необходимые свойства в таблице стилей, Web-страница будет выглядеть примерно так:

Если не описывать свойства для элементов li и a, то левое меню будет отображаться таким образом:

Вот и всё — таким образом можно сделать меню слева на HTML с помощью CSS.

Меню на сайте может быть двух видов — слева или справа (соответственно левостороннее или правостороннее).

На некоторых сайтах можно встретить сразу 2 блока — и левостороннее, и правостороннее одновременно. Как правило, для стандартного сайта нет особой необходимости устанавливать сразу 2 блока меню, ведь в этом случае неудобно будет читать сам контент (текст статей на вашем сайте или блоге).

Но какое же меню стоит выбирать? Прежде всего вы должны выбирать то меню, которое максимально соответствует вашему сайту. Однако есть определенные рекомендации.

Например, если вы хотите размещать рекламу в своем меню, то лучше выбирать левостороннее меню, ведь пользователи зачастую читают текст именно слева направо, и при взгляде влево (перевод взгляда на новую строку) человек будет невольно замечать меню или даже рекламу. которая может находиться под блоком меню. Поэтому это довольно удобно.

Если же вы хотите максимально монетизировать собственный сайт, то тогда сделайте сразу 2 меню: левостороннее и правостороннее, тем самым доходы от рекламы резко возрастут (данный способ действует при тизерной, контекстной рекламе).

Источник

Sidebar Menu Using HTML and CSS

To create this you need to create an HTML and CSS file. Then copy the structure below and paste it into the HTML file. In the HTML structure below I have put all the information where you will add the required code. Follow this tutorial and add the code according to the information below.

  lang="en">  rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css">  charset="UTF-8">  http-equiv="X-UA-Compatible" content="IE=edge">  name="viewport" content="width=device-width, initial-scale=1.0"> Document   class="wrapper">  class="sidebar">   

Step 2: Design the background using css code

With that I added some basic CSS code that basically designed the background and gave the sidebar a shape. In this case I have used blue color in the background. You can change this color if you want.

 @import url('https://fonts.googleapis.com/css2?family=Open+Sans&display=swap'); * list-style: none; text-decoration: none; margin: 0; padding: 0; box-sizing: border-box; font-family: 'Open Sans', sans-serif; > body background: #f5f6fa; > .wrapper .sidebar background: rgb(5, 68, 104); position: fixed; top: 0; left: 0; width: 225px; height: 100%; padding: 20px 0; transition: all 0.5s ease; > 

Step 3: Add profile images and titles

As you can see in the demo above, first of all here I used a profile image, a title and some description. I have used the following HTML and CSS programming code to make it. In this case, you can change the profile image to your liking and increase or decrease the size of this image if you want. In this case I used height 100px and width 100px . Here I have used border-radius 50% in the profile image which makes this image look completely round. You can change this percentage if you want to keep it square or other size.

  class="profile">  src="https://1.bp.blogspot.com/-vhmWFWO2r8U/YLjr2A57toI/AAAAAAAACO4/0GBonlEZPmAiQW4uvkCTm5LvlJVd_-l_wCNcBGAsYHQ/s16000/team-1-2.jpg" alt="profile_picture"> Anamika Roy Designer  

.wrapper .sidebar .profile margin-bottom: 30px; text-align: center; > .wrapper .sidebar .profile img display: block; width: 100px; height: 100px; border-radius: 50%; margin: 0 auto; > .wrapper .sidebar .profile h3 color: #ffffff; margin: 10px 0 5px; > .wrapper .sidebar .profile p color: rgb(206, 240, 253); font-size: 14px; > 

Step 4: Add menu items in the sidebar

In this case I have used eight menu items . I have used an icon with each menu to make the menu items more beautiful and attractive. You can change those icons and menu items as you wish.

   href="#" class="active">  class="icon"> class="fas fa-home">  class="item">Home    href="#">  class="icon"> class="fas fa-desktop">  class="item">My Dashboard    href="#">  class="icon"> class="fas fa-user-friends">  class="item">People    href="#">  class="icon"> class="fas fa-tachometer-alt">  class="item">Perfomance    href="#">  class="icon"> class="fas fa-database">  class="item">Development    href="#">  class="icon"> class="fas fa-chart-line">  class="item">Reports    href="#">  class="icon"> class="fas fa-user-shield">  class="item">Admin    href="#">  class="icon"> class="fas fa-cog">  class="item">Settings     

Step 5: Design menu items with css code

The following codes are the CSS programming codes that were originally used to design and add colors to the menu items added above. In this case I have used white color between the icons and the text which looks much more interesting on a blue background. You can see below that I have added the effect of hover. When you hover your mouse over or click on that menu, the background will change as you saw in the demo above.

.wrapper .sidebar ul li a display: block; padding: 13px 30px; border-bottom: 1px solid #10558d; color: rgb(241, 237, 237); font-size: 16px; position: relative; > .wrapper .sidebar ul li a .icon color: #dee4ec; width: 30px; display: inline-block; > 

.wrapper .sidebar ul li a:hover, .wrapper .sidebar ul li a.active color: #0c7db1; background:white; border-right: 2px solid rgb(5, 68, 104); > .wrapper .sidebar ul li a:hover .icon, .wrapper .sidebar ul li a.active .icon color: #0c7db1; > .wrapper .sidebar ul li a:hover:before, .wrapper .sidebar ul li a.active:before display: block; > 

Step 6: Create navigation bar

In this case I used a navigation bar but I did not use any link in the navigation bar. In this case I have added a menu button which when clicked will hide the whole menu and when clicked again the menu will appear. The following HTML and CSS programming codes have been used to create and design this menu bar.

 class="section">  class="top_navbar">  class="hamburger">  href="#">  class="fas fa-bars">     

.wrapper .section width: calc(100% - 225px); margin-left: 225px; transition: all 0.5s ease; > .wrapper .section .top_navbar background: rgb(7, 105, 185); height: 50px; display: flex; align-items: center; padding: 0 30px; > .wrapper .section .top_navbar .hamburger a font-size: 28px; color: #f4fbff; > .wrapper .section .top_navbar .hamburger a:hover color: #a2ecff; > 

The following CSS codes basically indicate the exact position of the sidebar when this menu button is activated. This means that when you click on the menu button, the entire side will be hidden. Below I have indicated that when that menu button is clicked, the side will move 225 to the left , that is, it will be completely hidden.

 body.active .wrapper .sidebar left: -225px; > body.active .wrapper .section margin-left: 0; width: 100%; > 

Step 7: Add JavaScript code to activate the menu button

In this case I have used a very small amount of JavaScript code which was originally used to activate the menu button on the navigation menu bar. If you see the demo above, you will understand that I have created a menu button here and if you click on that button, the entire menu bar will be hidden. Now we will activate that button which means when you click on this button the css code added above will be valid. I used the following JavaScript programming code to make it. The JavaScript programming code below is very simple and simple I hope you understand.

 var hamburger = document.querySelector(".hamburger"); hamburger.addEventListener("click", function() document.querySelector("body").classList.toggle("active"); >) 

Источник