Document

      body < margin: 0px; margin-top: 10px; padding: 0px; >nav < height: 100vh; width: 200px; position: fixed; z-index: 1; top: 0; left: 0; background-color: rgb(39, 39, 39); overflow: auto; height: 100%; >.links < display: block; text-align: center; padding: 14px; color: rgb(178, 137, 253); text-decoration: none; font-size: 17px; >.links:hover < background-color: rgb(100, 100, 100); >input[type="text"] < float: right; padding: 6px; margin-top: 8px; margin-right: 8px; font-size: 17px; >.selected    

         Home Login Register Contact Us More Info 

Output

The above code will produce the following output −

On resizing the browser the hamburger icon to open navigation will be shown −

On clicking the hamburger icon −

How to create a responsive side navigation menu with, CSS Web Development Front End Technology. Following is the code to create a responsive side navigation menu with CSS −.

Responsive SideBar Navigation

Responsive Sidebar Navigation

1. body
2. font — family: Arial , Helvetica , sans — serif;
3. font — size : 13 px;
4. >
5. svg
6. cursor : pointer ;
7. margin : 15 px;
8. >
9. . top — nav
10. height : 50 px;
11. background — color : #1e90ff ;
12. position : fixed ;
13. left: 0 ;
14. width : 100% ;
15. margin : 0px 5px ;
16. z-index : 1 ;
17. >
18. .top-nav h 2
19. margin : auto ;
20. >
21. .side-nav
22. height : 100% ;
23. position : fixed ;
24. width : 0px ;
25. top: 58px ;
26. left: 0 ;
27. bottom: 0 ;
28. margin : 0px 5px ;
29. background-color : # d 3d3 d 3 ;
30. transition: 1 s;
31. >
32. .side — nav ul
33. padding : 0 ;
34. list — style: none ;
35. margin : 0 ;
36. >
37. .side — nav ul li
38. background — color : grey;
39. cursor : pointer ;
40. border — radius: 2 px;
41. margin : 2 px;
42. padding : 5 px 0 px;
43. text — align: center ;
44. >
45. .side — nav ul li: hover
46. background — color : #008080 ;
47. >
48. .side-nav ul li a
49. text-decoration : none ;
50. color : # f 9f9 f 9 ;
51. >
52. #body — content
53. position : absolute ;
54. top: 58 px;
55. transition: margin — left 1 s;
56. >

Responsive Side Navigation Bar with HTML & CSS, New to CSS Grid? Watch the full Crash Course here: https://www.youtube.com/watch?v=yOPCQ5nD1Vs&t=214sIn this video I go over how to create this responsive na

How to create a responsive navigation bar with dropdown in CSS?

Following is the code to create a responsive navigation bar with dropdown −

Example

     *,*::after,*::before < box-sizing: border-box; >.menu-btn < font-size: 18px; font-weight: bold; display: inline-block; text-align: center; background-color: #040008; color: white; padding: 20px; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; border: none; width: 100%; >.dropdown-menu < position: relative; display: inline-block; >.menu-content < display: none; position: absolute; width: 100%; background-color: #017575; min-width: 160px; z-index: 1; >nav < background-color: #017575; width: 100%; >.links,.links-hidden < display: inline-block; color: rgb(255, 255, 255); text-decoration: none; font-size: 18px; font-weight: bold; padding: 20px; >.links-hidden:hover,.links:hover < background-color: rgb(8, 107, 46); >.dropdown-menu:hover .menu-content < display: block; >.dropdown-menu:hover .menu-btn < background-color: #3e8e41; >.hamburger < color: white; font-weight: bolder; display: none; >@media screen and (max-width: 880px) < nav a:not(:first-child) < display: none; >nav a.hamburger < float: right; display: block; padding: 12px; >.dropdown-menu < display: none; >nav.openNav a.hamburger < position: relative; >nav.openNav a < float: none; display: block; text-align: center; >> nav.openNav div.dropdown-menu  HOME EMPLOYEES CAREER Our History Fund Us More Info 
Contact Us Visit Us About Us 
 
 else < x.className = ""; >> document.querySelector(".hamburger").addEventListener("click", toggleNav);  

Output

The above code will produce the following output −

On resizing the window to 880px or less −

On opening the hamburger menu and then the dropdown −

Responsive Side Navigation Bar in HTML CSS and, As the width of the bar is 70px under normal conditions, it can be easily used for any responsive device. HTML code of Side Navigation Bar Below I have given the HTML code which is essential for creating this sidebar. However, I have explained these codes step by step.

Источник

Исходники для старта из 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

Источник

How TO — Fixed Sidebar

Learn how to create a fixed side navigation menu with CSS.

Create a Fixed Sidebar

Step 1) Add HTML:

Example

Step 2) Add CSS:

Example

/* The sidebar menu */
.sidenav height: 100%; /* Full-height: remove this if you want «auto» height */
width: 160px; /* Set the width of the sidebar */
position: fixed; /* Fixed Sidebar (stay in place on scroll) */
z-index: 1; /* Stay on top */
top: 0; /* Stay at the top */
left: 0;
background-color: #111; /* Black */
overflow-x: hidden; /* Disable horizontal scroll */
padding-top: 20px;
>

/* The navigation menu links */
.sidenav a padding: 6px 8px 6px 16px;
text-decoration: none;
font-size: 25px;
color: #818181;
display: block;
>

/* When you mouse over the navigation links, change their color */
.sidenav a:hover color: #f1f1f1;
>

/* Style page content */
.main margin-left: 160px; /* Same as the width of the sidebar */
padding: 0px 10px;
>

/* On smaller screens, where height is less than 450px, change the style of the sidebar (less padding and a smaller font size) */
@media screen and (max-height: 450px) .sidenav
.sidenav a
>

Tip: Go to our CSS Navbar tutorial to learn more about navigation bars.

Tip: Go to our How To — Side Navigation tutorial to learn how to create an animated, closable side navigation.

Источник

How to Create a Fixed Side Navigation Menu with CSS

Navigation menus are a crucial element of web design as they help users navigate through the website easily.

A fixed side navigation menu stays in the same position even when the user scrolls down the page.

This feature makes it easier for the user to access the menu without having to scroll back to the top of the page.

In this tutorial, we will learn how to create a fixed side navigation menu using CSS.

HTML Structure

To create a fixed side navigation menu, we need to first create a basic HTML structure for our menu.

We will use an unordered list to create the menu items and wrap it in a div element with a class name “navigation”.

CSS Styles

Once we have our HTML structure in place, we can now add CSS styles to create the fixed side navigation menu.

To fix the navigation menu to the side of the page, we can use the “position:fixed” property.

The above CSS code will fix the navigation menu to the left side of the page and center it vertically. We have also set the width of the navigation menu to 200px.

You can adjust the width as per your needs.

Making the Menu Items Horizontal

By default, the menu items in an unordered list are displayed vertically.

To display them horizontally, we can use the “display:inline-block” property.

.navigation ul < list-style: none; padding: 0; margin: 0; >.navigation li

The above CSS code will make the menu items horizontal and add a background color of #333 and text color of #fff to each item.

Styling the Menu Items

We can further style the menu items by adding styles to the anchor elements.

.navigation a < display: block; color: #fff; text-decoration: none; >.navigation a:hover

The above CSS code will change the background color of a menu item to #444 when the user hovers over it.

Conclusion

In this blog post, we learned how to create a fixed side navigation menu using CSS.

We started by creating a basic HTML structure for our menu and then added CSS styles to fix the menu to the side of the page and make the menu items horizontal.

Finally, we added some styles to the menu items to make them look attractive.

With these simple steps, you can easily create a fixed side navigation menu for your website.

Источник