Здравейте, правя един сайт, за юбилей на приятел - ще му бъде подарък.
Не съм се занимавал със css или js, та малко се поизгубих в информацията.
От готов темплейт на bootstrap добавих каквото исках, но като отида от 1.html на 2.html, менюто не стои подчертано както ми е идеята.
В смисъл докато съм на първа страница, всичко е ок, но на втора нещата не са по замисъл. Мисля, че дали през main_menu или dropdown би трябвало да работи подчелтаването и за следващи страници...
Ако имате някакви идеи съм отворен
Ето част от css
GeSHi (CSS):
/* Style The Dropdown Button */
.dropbtn {
background-color: #FBFBFB;
color: white;
padding-top: 2px;
font-size: 13px;
border: none;
cursor: pointer;
}
/* background color of the dropdown button when the dropdown content is shown */
.dropdown:hover .dropbtn {
background-color: #FBFBFB;
}
/* The container <div> - needed to position the dropdown content */
.dropdown {
position: relative;
display: inline-block;
}
/* Dropdown open-left */
.dropdown-content {
right: 1;
}
/* сянка около менюто Dropdown Content (Hidden by Default) */
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 80px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2 );
z-index: 1;
}
/* Links inside the dropdown височина и широчина на падащото меню, размер шринт, контраст и шрифт*/
.dropdown-content a {
color: #393939;
padding: 5px 15px;
text-decoration: none;
text-align: center;
display: block;
font-size: 13px;
font-weight: 700;
font-family: 'Open Sans', sans-serif;
}
/* Change color of dropdown links on hover */
.dropdown-content a:hover {background-color: #F2F2F2}
/* Show the dropdown menu on hover */
.dropdown:hover .dropdown-content {
display: block;
}
/*Header Top header*/
#header .top_header {
min-height: 50px;
background: #FBFBFB;
border-bottom: 2px solid #F2F2F2;
padding-top: 15px;
}
#header .top_header .address {
border-right: 1px solid #E6E5E5;
}
#header .top_header .address p {
font-size: 12px;
padding-top: 2px;
color: #646464;
font-family: 'Open Sans', sans-serif;
}
#header .top_header .phone p {
color: #646464;
font-size: 12px;
font-family: 'Open Sans', sans-serif;
padding-top: 1px;
display: inline-block;
}
#header .top_header .address i,
#header .top_header .phone i {
padding: 3px 5px;
font-size: 15px;
}
#header .top_header .social_icon i {
padding: 0 5px;
color: #787878;
font-size: 12px;
font-weight: 700;
}
#header .top_header .social_icon i:hover {
color: #FF1A1A;
}
/*End of top header*/
/* дебелина на кант под менюто */
#header .header_menu {
min-height: 80px;
border-bottom: 1px solid #3D3E3D;
z-index: 9999
}
#header .header_menu .navbar {
border: 0px solid transparent;
}
#header .header_menu .custom_navbar-brand {
padding-left: 0;
}
#header .header_menu .navbar-default {
background-color: rgba(255, 255, 255, 0);
border-color: rgba(255, 255, 255, 0);
}
#header .header_menu .navbar-default .navbar-nav>.active>a,
#header .header_menu .navbar-default .navbar-nav>.active>a:focus,
#header .header_menu .navbar-default .navbar-nav>.active>a:hover {
background-color: rgba(255, 255, 255, 0);
}
#header .header_menu .main_menu {
padding-top: 20px;
}
/* дебелина на буквите */
#header .header_menu ul.main_menu li a {
color: #393939;
font-size: 15px;
text-transform: uppercase;
font-weight: 600;
font-family: 'Roboto Slab', serif;
}
#header .header_menu ul.main_menu li a:hover {
color: #FF1A1A;
}
#header .header_menu ul.main_menu li.active a {
color: #FF1A1A;
}
#header .header_menu ul.main_menu li,
#header .header_menu ul.main_menu li.active a {
display: inline-block;
position: relative;
}
/* дебелината под буквите в менюто */
#header .header_menu ul.main_menu li:after {
content: '';
display: block;
margin: auto;
height: 3px;
width: 0px;
background: transparent;
transition: width .5s ease, background-color .5s ease;
margin-top: 6px;
}
/* подчертаване в менюто */
#header .header_menu ul.main_menu li:hover:after,
#header .header_menu ul.main_menu li.active:after {
width: 90%;
background: #FF1A1A;
}
Покажи теми - aleximilian
