Главная » Языки программирования

Css menu left side

Содержание
  1. Sidebar Menu Using HTML and CSS
  2. Step 2: Design the background using css code
  3. Step 3: Add profile images and titles
  4. Step 4: Add menu items in the sidebar
  5. Step 5: Design menu items with css code
  6. Step 6: Create navigation bar
  7. Step 7: Add JavaScript code to activate the menu button
  8. 16 CSS Sidebar Menus
  9. Related Articles
  10. Author
  11. Links
  12. Made with
  13. About a code
  14. App Admin Menus
  15. Author
  16. Links
  17. Made with
  18. About a code
  19. Menu Hover Slide Fill
  20. Author
  21. Links
  22. Made with
  23. About a code
  24. Pure CSS Single Page Application
  25. Author
  26. Links
  27. Made with
  28. About the code
  29. Menu Effect
  30. Author
  31. Links
  32. Made with
  33. About the code
  34. CSS Only Navigation for Sidebar
  35. Author
  36. Links
  37. Made with
  38. About the code
  39. CSS Sidebar Menu
  40. Author
  41. Links
  42. Made with
  43. About the code
  44. Purple Sidebar Menu
  45. Author
  46. Links
  47. Made with
  48. About the code
  49. Pure CSS Fly in Sidebar Navigation
  50. Author
  51. Links
  52. Made with
  53. About the code
  54. Sidebar Navigation Animation
  55. Author
  56. Links
  57. Made with
  58. About the code
  59. Fixed Hover Navigation
  60. Author
  61. Links
  62. Made with
  63. About the code
  64. Fully Responsive CSS3 Sidebar Menu
  65. Author
  66. Links
  67. Made with
  68. About the code
  69. Sidebar Sliding Menu CSS
  70. Author
  71. Links
  72. Made with
  73. About the code
  74. 3D Rotating Sidebar Navigation
  75. Author
  76. Links
  77. Made with
  78. About the code
  79. Pure CSS3 Sidebar Menu
  80. Author
  81. Links
  82. Made with
  83. About the code
  84. Sidebar Menu CSS
  85. Author
  86. Links
  87. Made with
  88. About the code
  89. CSS Sidebar Menu
  90. Author

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; >

Create a basic html structure to create sidebars

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; >

Add profile images and titles

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; >

Add menu items in the sidebar

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"); >)

Источник

16 CSS Sidebar Menus

Collection of hand-picked free HTML and CSS sidebar menu code examples from codepen and other resources. Update of July 2018 collection. 3 new items.

Author

Made with

About a code

App Admin Menus

App admin menus. light/dark modes.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Author

Made with

About a code

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Author

Made with

About a code

Pure CSS Single Page Application

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Author

Made with

About the code

Reverse text color menu effects.

Compatible browsers: Chrome, Firefox, Opera, Safari

Demo image: CSS Only Navigation for Sidebar

Author

Made with

About the code

CSS Only Navigation for Sidebar

CSS only mirror like navigation for sidebar.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Demo image: CSS Sidebar Menu

Author

Made with

About the code

CSS Sidebar Menu

HTML and CSS navbar and sidebar mega menu.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Dependencies: bootstrap.css, font-awesome.css

Demo image: Purple Sidebar Menu

Author

Made with

About the code

Purple Sidebar Menu

This is a reverse engineering of the «Hyperspace» design from HTML5 Up! https://html5up.net/hyperspace

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Demo image: Pure CSS Fly in Sidebar Navigation

Author

Made with

About the code

Pure CSS Fly in Sidebar Navigation

A simple, multi-level sidebar navigation. Features pure css «fly in» subnav, that leaves icons of parent nav visible. Nav items will scroll ( overflow-y ) if needed. Uses transform s and transition s.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Demo image: Sidebar Navigation Animation

Author

Made with

About the code

Nothing like a little trendy body pushin.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Demo image: Fixed Hover Navigation

Author

Made with

About the code

Fixed Hover Navigation

Fixed sidebar drawer navigation, that expands on hover.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Demo image: Fully Responsive CSS3 Sidebar Menu

Author

Made with

About the code

Fully Responsive CSS3 Sidebar Menu

A fully responsive sidebar menu without any need of JavaScript and using less than 200 lines of functional CSS code.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Demo image: Sidebar Sliding Menu CSS

Author

Made with

About the code

CSS sliding sidebar menu with scroll, no JS were used

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Demo image: 3D Rotating Sidebar Navigation

Author

Made with

About the code

3D Rotating Sidebar Navigation

A vertical navigation bar that switches from an icon to text with a cool animation.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Demo image: Pure CSS3 Sidebar Menu

Author

Made with

About the code

Pure CSS3 Sidebar Menu

Pure CSS3 mega dropdown sidebar menu with animation..

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Demo image: Sidebar Menu CSS

Author

Made with

About the code

CSS sidebar menu with hover show/hide.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Demo image: CSS Sidebar Menu

Author

Made with

About the code

CSS Sidebar Menu

Easy to use sidebar menu with HTML and CSS.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Demo image: Fixed Navigation Hover Effect

Author

Источник

Читайте также:  My Page
Оцените статью
© 2024 Программирование