API tools faq
paste
Advertisement
pacho_the_python

dropdown

pacho_the_python
Aug 4th, 2023
1,131
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 4.49 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Home Manager</title>
  6.     {% load static %}
  7.     <link rel="stylesheet" href="{% static 'css/style.css' %}">
  8.     <link rel="wesite icon" type="jpg" href="#">
  9.     <link rel="stylesheet" href="https://use.fontawesome.com/releases/v6.2.0/css/all.css">
  10. </head>
  11. <body>
  12. <div class="navbar">
  13.     <a href="{% url 'home page' %}"><i class="fa-solid fa-house-user"></i> Home Manager</a>
  14.  
  15.     {% if request.user.is_authenticated %}
  16.         <div class="dropdown">
  17.             <button class="dropbtn"><i class="fa-solid fa-user"></i> {{ user.username }} <i
  18.                    class="fa fa-caret-down"></i>
  19.             </button>
  20.             <div class="dropdown-content">
  21.                 <a href="{% url 'account details' pk=user.pk %}"><i class="fa-solid fa-circle-info"></i> Details</a>
  22.                 <a href="{% url 'account edit' pk=user.pk %}"><i class="fa-solid fa-gear"></i> Settings</a>
  23.                 <a href="{% url 'account logout' %}"><i class="fa-solid fa-right-from-bracket"></i> exit</a>
  24.             </div>
  25.         </div>
  26.     {% else %}
  27.         <a class="right" href="{% url 'account register' %}"><i class="fa-regular fa-registered"></i> Register</a>
  28.         <a class="right" href="{% url 'account login' %}"><i class="fa-solid fa-right-to-bracket"></i> Log In</a>
  29.     {% endif %}
  30. {#    <div class="building">#}
  31. {#        <button class="building-button"><i class="fa-solid fa-building"></i> Buildings <i class="fa fa-caret-down"></i>#}
  32. {#        </button>#}
  33. {#        <div class="building-content">#}
  34. {#            {% for object in buildings %}#}
  35. {#                <a href="{% url 'building-details' pk=object.pk %}">{{ object.town }}</a>#}
  36. {#            {% endfor %}#}
  37. {#        </div>#}
  38. {#    </div>#}
  39.     <a href="{% url 'buildings' %}">Buildings</a>
  40.     <a href="{% url 'show people' %}">People</a>
  41.     <a href="{% url 'people create' %}">Add People</a>
  42.     <a href="{% url 'building create' %}">Add Building</a>
  43.     <a href="#">Send Message</a>
  44. </div>
  45.  
  46. {% block page_content %}
  47. {% endblock %}
  48.  
  49. </body>
  50. </html>
  51.  
  52. body {
  53.     margin: 0;
  54. }
  55.  
  56. /* Navbar container */
  57. .navbar {
  58.     overflow: hidden;
  59.     background-color: black;
  60.     font-family: Arial, sans-serif;
  61. }
  62.  
  63. /* Links inside the navbar */
  64. .navbar a {
  65.     float: left;
  66.     font-size: 20px;
  67.     color: white;
  68.     text-align: center;
  69.     padding: 14px 16px;
  70.     text-decoration: none;
  71. }
  72.  
  73. /* The dropdown container */
  74. .dropdown {
  75.     float: right;
  76.     overflow: hidden;
  77.     margin-right: 60px;
  78. }
  79.  
  80. /* Dropdown button */
  81. .dropdown .dropbtn {
  82.     font-size: 20px;
  83.     border: none;
  84.     outline: none;
  85.     color: white;
  86.     padding: 14px 16px;
  87.     background-color: inherit;
  88.     font-family: inherit; /* Important for vertical align on mobile phones */
  89.     margin: 0; /* Important for vertical align on mobile phones */
  90. }
  91.  
  92. /* Add a red background color to navbar links on hover */
  93. .navbar a:hover, .dropdown:hover .dropbtn {
  94.     background-color: red;
  95. }
  96.  
  97. /* Dropdown content (hidden by default) */
  98. .dropdown-content {
  99.     display: none;
  100.     position: absolute;
  101.     background-color: #f9f9f9;
  102.     min-width: 160px;
  103.     box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2);
  104.     z-index: 1;
  105. }
  106.  
  107. /* Links inside the dropdown */
  108. .dropdown-content a {
  109.     float: none;
  110.     color: black;
  111.     padding: 12px 16px;
  112.     text-decoration: none;
  113.     display: block;
  114.     text-align: left;
  115. }
  116.  
  117. /* Add a grey background color to dropdown links on hover */
  118. .dropdown-content a:hover {
  119.     background-color: #ddd;
  120. }
  121.  
  122. /* Show the dropdown menu on hover */
  123. .dropdown:hover .dropdown-content {
  124.     display: block;
  125. }
  126.  
  127. .navbar a.right {
  128.     float: right;
  129. }
  130.  
  131. .building {
  132.     float: left;
  133.     overflow: hidden;
  134.     margin-left: 250px;
  135. }
  136.  
  137. .building .building-button {
  138.     font-size: 20px;
  139.     border: none;
  140.     outline: none;
  141.     color: white;
  142.     padding: 14px 16px;
  143.     background-color: inherit;
  144.     font-family: inherit;
  145.     margin: 0;
  146. }
  147.  
  148. .building-content {
  149.     display: none;
  150.     position: absolute;
  151.     background-color: #f9f9f9;
  152.     min-width: 160px;
  153.     box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2);
  154.     z-index: 1;
  155. }
  156.  
  157. .building-content a {
  158.   float: none;
  159.   color: black;
  160.   padding: 12px 16px;
  161.   text-decoration: none;
  162.   display: block;
  163.   text-align: left;
  164. }
  165.  
  166. .building-content a:hover {
  167.   background-color: #ddd;
  168. }
  169.  
  170. .building:hover .building-content {
  171.   display: block;
  172. }
  173.  
  174. .building:hover {
  175.     background-color: green;
  176. }
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!