Автор Тема: bootstrap menu  (Прочетена 1137 пъти)

aleximilian

  • Напреднали
  • *****
  • Публикации: 60
  • Distribution: Debian
    • Профил
bootstrap menu
« -: Mar 09, 2020, 11:33 »
Здравейте, правя един сайт, за юбилей на приятел - ще му бъде подарък.
Не съм се занимавал със css или js, та малко се поизгубих в информацията.

От готов темплейт на bootstrap добавих каквото исках, но като отида от 1.html на 2.html, менюто не стои подчертано както ми е идеята.
В смисъл докато съм на първа страница, всичко е ок, но на втора нещата не са по замисъл. Мисля, че дали през main_menu или dropdown би трябвало да работи подчелтаването и за следващи страници...
Ако имате някакви идеи съм отворен  :)
Ето част от css

Код
GeSHi (CSS):
  1. /* Style The Dropdown Button */
  2. .dropbtn {
  3.    background-color: #FBFBFB;
  4.    color: white;
  5.    padding-top: 2px;
  6.    font-size: 13px;
  7.    border: none;
  8.    cursor: pointer;
  9. }
  10.  
  11. /* background color of the dropdown button when the dropdown content is shown */
  12. .dropdown:hover .dropbtn {
  13.    background-color: #FBFBFB;
  14. }
  15.  
  16. /* The container <div> - needed to position the dropdown content */
  17. .dropdown {
  18.    position: relative;
  19.    display: inline-block;
  20. }
  21.  
  22. /* Dropdown open-left */
  23. .dropdown-content {
  24.    right: 1;
  25. }
  26. /* сянка около менюто Dropdown Content (Hidden by Default) */
  27. .dropdown-content {
  28.    display: none;
  29.    position: absolute;
  30.    background-color: #f9f9f9;
  31.    min-width: 80px;
  32.    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2 );
  33.    z-index: 1;
  34. }
  35.  
  36. /* Links inside the dropdown височина и широчина на падащото меню, размер шринт, контраст и шрифт*/
  37. .dropdown-content a {
  38.    color: #393939;
  39.    padding: 5px 15px;
  40.    text-decoration: none;
  41.    text-align: center;
  42.    display: block;
  43.    font-size: 13px;
  44.    font-weight: 700;
  45.    font-family: 'Open Sans', sans-serif;
  46. }
  47.  
  48. /* Change color of dropdown links on hover */
  49. .dropdown-content a:hover {background-color: #F2F2F2}
  50.  
  51. /* Show the dropdown menu on hover */
  52. .dropdown:hover .dropdown-content {
  53.    display: block;
  54. }
  55.  
  56.  
  57. /*Header Top header*/
  58.  
  59. #header .top_header {
  60.    min-height: 50px;
  61.    background: #FBFBFB;
  62.    border-bottom: 2px solid #F2F2F2;
  63.    padding-top: 15px;
  64. }
  65. #header .top_header .address {
  66.    border-right: 1px solid #E6E5E5;
  67. }
  68. #header .top_header .address p {
  69.    font-size: 12px;
  70.    padding-top: 2px;
  71.    color: #646464;
  72.    font-family: 'Open Sans', sans-serif;
  73. }
  74. #header .top_header .phone p {
  75.    color: #646464;
  76.    font-size: 12px;
  77.    font-family: 'Open Sans', sans-serif;
  78.    padding-top: 1px;
  79.    display: inline-block;
  80. }
  81. #header .top_header .address i,
  82. #header .top_header .phone i {
  83.    padding: 3px 5px;
  84.    font-size: 15px;
  85. }
  86. #header .top_header .social_icon i {
  87.    padding: 0 5px;
  88.    color: #787878;
  89.    font-size: 12px;
  90.    font-weight: 700;
  91. }
  92. #header .top_header .social_icon i:hover {
  93.    color: #FF1A1A;
  94. }
  95.  
  96. /*End of top header*/
  97. /* дебелина на кант под менюто */
  98. #header .header_menu {
  99.    min-height: 80px;
  100.    border-bottom: 1px solid #3D3E3D;
  101.    z-index: 9999
  102. }
  103. #header .header_menu .navbar {
  104.    border: 0px solid transparent;
  105. }
  106. #header .header_menu .custom_navbar-brand {
  107.    padding-left: 0;
  108. }
  109. #header .header_menu .navbar-default {
  110.    background-color: rgba(255, 255, 255, 0);
  111.    border-color: rgba(255, 255, 255, 0);
  112. }
  113. #header .header_menu .navbar-default .navbar-nav>.active>a,
  114. #header .header_menu .navbar-default .navbar-nav>.active>a:focus,
  115. #header .header_menu .navbar-default .navbar-nav>.active>a:hover {
  116.    background-color: rgba(255, 255, 255, 0);
  117. }
  118. #header .header_menu .main_menu {
  119.    padding-top: 20px;
  120. }
  121. /* дебелина на буквите */
  122. #header .header_menu ul.main_menu li a {
  123.    color: #393939;
  124.    font-size: 15px;
  125.    text-transform: uppercase;
  126.    font-weight: 600;
  127.    font-family: 'Roboto Slab', serif;
  128. }
  129. #header .header_menu ul.main_menu li a:hover {
  130.    color: #FF1A1A;
  131. }
  132. #header .header_menu ul.main_menu li.active a {
  133.    color: #FF1A1A;
  134. }
  135. #header .header_menu ul.main_menu li,
  136. #header .header_menu ul.main_menu li.active a {
  137.    display: inline-block;
  138.    position: relative;
  139. }
  140. /* дебелината под буквите в менюто */
  141. #header .header_menu ul.main_menu li:after {
  142.    content: '';
  143.    display: block;
  144.    margin: auto;
  145.    height: 3px;
  146.    width: 0px;
  147.    background: transparent;
  148.    transition: width .5s ease, background-color .5s ease;
  149.    margin-top: 6px;
  150. }
  151. /* подчертаване в менюто */
  152. #header .header_menu ul.main_menu li:hover:after,
  153. #header .header_menu ul.main_menu li.active:after {
  154.    width: 90%;
  155.    background: #FF1A1A;
  156. }
Активен

remotexx

  • Напреднали
  • *****
  • Публикации: 1074
    • Профил
Re: bootstrap menu
« Отговор #1 -: Mar 10, 2020, 05:20 »
А пробва ли и с друг браузър?

То туй само с гледане няма да стане, ами може ли да дадеш достъп до тестовия сайт/вариант
... Може и на лични
Активен

aleximilian

  • Напреднали
  • *****
  • Публикации: 60
  • Distribution: Debian
    • Профил
Re: bootstrap menu
« Отговор #2 -: Mar 10, 2020, 10:54 »
С други браузери е същото, без значение на OS.

Ясно е, че ако не се погледне цялото, не може да се каже какво съм омазал.
Имаш лично.
Идеята ми беше някой да бутне мисълта ми в правилната посока  [_]3
Активен

Подобни теми
Заглавие Започната от Отговора Прегледи Последна публикация
K-Menu
Настройка на програми
Invincible 2 1327 Последна публикация Mar 16, 2009, 15:14
от Георги
K-menu
Настройка на програми
HarleyBG 9 2096 Последна публикация Jan 08, 2005, 18:04
от HarleyBG
Инсталация на mac menu bar
Настройка на програми
paco1234 10 2457 Последна публикация Jun 18, 2007, 16:53
от Debianly
Липсващо KDE menu
Настройка на програми
Георги 2 1340 Последна публикация Mar 16, 2009, 13:52
от Георги
K menu да подрежда програмите по азбучен ред?
Настройка на програми
lunarvalleys 0 751 Последна публикация May 30, 2010, 15:17
от lunarvalleys