- This topic is empty.
-
AuthorPosts
-
April 24, 2013 at 12:17 pm #44341
simpletwist
ParticipantFor practice I’m trying to replicate this somewhat simple navigation bar: http://www.joeledbetter.com/contact/
I can’t seem to get the active hover state to keep the background. Any thoughts on where going wrong or if I need to be more particular with my declarations?
body {
background-color: rgb(228, 228, 228);
color: rgb(136, 136, 136);
font: 1em “Arial Black”, Gadget, sans-serif;
padding: 40px;
}.header-container {
display: block;
width: 100%;
height: 145px;
}#header {
position: relative;
width: 90%;
padding: 0 5%;
height: 145px;
background-color: #f5f5f5;
z-index: 999;
}.content {
margin:0 auto;
width: 960px;
color: #111111;
}/* /////////////////////////////////////////////////////////////////////
// 02 – COLORS
/////////////////////////////////////////////////////////////////////
.yellow { color: #fdd94b;}
.blue { color: #129d35;}
.purple { color: #90C0DE}
.orange { color: #1E323A;}
.green { color: # A1D101;}
.ltgrey { color: # f2f2f2;}*/
/* /////////////////////////////////////////////////////////////////////
// NAVIGATION
/////////////////////////////////////////////////////////////////////*/nav {
background-color: #f8f8f8;
text-transform:uppercase;
width: 100%;
height: 76px;
float: right;
padding: 1px 0 2px;
margin: 0 auto;
margin-top: 60px;
text-align: right;
}nav a {
text-decoration: none;
color: #333;
padding: 5px 0;
font-family:sans-serif;
font-weight: bold;
text-transform: uppercase;
letter-spacing: 2px;
font-size: 18px;
background: transparent;
}nav ul.main-nav {
list-style-type:none;
padding:0;
margin:0 auto;
width: 960px;
height: 57px;
text-align:center;
}.main-nav li {
display: inline;
position: relative;
margin-left: 25px;
padding: 15px 0 10px;
}nav ul.main-nav > li {
float:left;
width: 150px;}
nav ul.main-nav > li a {
width: 160px;
height: 67px;
}nav ul.main-nav > li > a:hover {
color: #999;}
nav ul.main-nav > li > a:active {
background: #fff;
-webkit-box-shadow: 5px 5px 0 0 rgba(0,0,0,.1);
box-shadow: 5px 5px 0 0 rgba(0,0,0,.1);
border:2px solid #e3e3e3;
padding: 25px;
z-index: -99999px;
}/*
.main-nav>ul>li, .nav-menu>ul>li.current-menu-ancestor {
background-color: #fff;
}*/
.nav-name {
display:block;
font-size: 1.2em;}
.nav.desc {
margin-left: 15px;
color:#ccc;}
/* sub nav */
nav ul.main-nav li ul.subnav {
position:absolute;
top: 58px;
background-color: #575757;
padding 5px 10px;
width: 250px;
left: -9999px;
}nav ul.main-nav li ul.subnav li {
list-style-postion:inside;
list-style: none;
padding: 0.8em 0;}
nav ul.main-nav li ul.subnav li a {
color: #fff;
}nav ul.main-nav li ul.subnav li a:hover {
color: #ccc;
}nav ul.main-nan > li:hover ul.subnav {
left:0;
}/*
.nav-menu>ul>li.current-menu-item, .nav-menu>ul>li.current-menu-ancestor {
background-color: #fff;
padding-left: 15px;
padding-right: 15px;
-webkit-box-shadow: 5px 5px 0 0 rgba(0, 0, 0, .1);
box-shadow: 5px 5px 0 0 rgba(0, 0, 0, .1);
}
.nav-menu a {
font-size: 18px;
text-decoration: none;
color: #333;
padding: 5px 0;
font-family: ‘DIN Next W01 Bold’;
font-weight: normal;
text-transform: uppercase;
letter-spacing: 2px;
}
.nav-menu a:hover {
color: #999;
}
*/HTML markup:
Nav Title of example nav
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis quis hendrerit augue. Nulla eu mauris at ante semper malesuada. Donec mattis, purus sit amet pretium semper, tellus dolor adipiscing mauris, quis consequat turpis justo eu arcu. Fusce eu luctus libero. Suspendisse porta sapien at nunc condimentum feugiat. Vivamus et elit nec mi posuere iaculis. Curabitur auctor orci non elit lobortis eget varius elit rhoncus.
Proin mattis, lorem quis volutpat laoreet, elit tellus accumsan metus, in egestas mi nunc eget est. Morbi lobortis adipiscing luctus. Suspendisse quis est eu leo luctus venenatis egestas et magna. Mauris feugiat augue ac lectus vehicula faucibus tincidunt diam semper. Maecenas ac ultrices massa. Donec ipsum quam, consectetur eget consequat commodo, dapibus vitae odio. Ut eleifend, quam sit amet accumsan lacinia, lacus urna euismod velit, quis pharetra ipsum lacus in augue.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis quis hendrerit augue. Nulla eu mauris at ante semper malesuada. Donec mattis, purus sit amet pretium semper, tellus dolor adipiscing mauris, quis consequat turpis justo eu arcu. Fusce eu luctus libero. Suspendisse porta sapien at nunc condimentum feugiat. Vivamus et elit nec mi posuere iaculis. Curabitur auctor orci non elit lobortis eget varius elit rhoncus.
Proin mattis, lorem quis volutpat laoreet, elit tellus accumsan metus, in egestas mi nunc eget est. Morbi lobortis adipiscing luctus. Suspendisse quis est eu leo luctus venenatis egestas et magna. Mauris feugiat augue ac lectus vehicula faucibus tincidunt diam semper. Maecenas ac ultrices massa. Donec ipsum quam, consectetur eget consequat commodo, dapibus vitae odio. Ut eleifend, quam sit amet accumsan lacinia, lacus urna euismod velit, quis pharetra ipsum lacus in augue.
*what is placed in the a tags?
April 24, 2013 at 1:21 pm #133049Paulie_D
MemberThe active state only applies when the menu item has a mouse click down on it. As soon as the button is unclicked it comes off.
To have an active class applied you would need javascript.
April 24, 2013 at 2:19 pm #133060simpletwist
ParticipantAny simple js solution?
April 24, 2013 at 4:47 pm #133071Paulie_D
MemberI think this is another “How do I show which page I’m on in the menu” thread.
https://css-tricks.com/id-your-body-for-greater-css-control-and-specificity/
April 24, 2013 at 6:16 pm #133078jurotek
ParticipantTry this:
.nav-menu>ul>li.current-menu-item,
.nav-menu>ul>li.current-menu-item:hover {
your styles
}April 24, 2013 at 6:25 pm #133081simpletwist
Participant@krish1980
I’m trying to mimic the nav menu url below.
@jurotek
I think my styles are off, that is adding a white box that is vertically placed over the menu item. Any ideas on how to dial it in so it looks like the above example.[Example nav menu](http://www.joeledbetter.com “Goal of nav”)
April 25, 2013 at 9:46 am #133137simpletwist
Participant@Krish1980 If you were to execute the current code, you would notice that the active state has a white background and drop shadow that the text sits on. I’m looking just to copy the above example and simplify the code.
April 25, 2013 at 11:50 am #133146Paulie_D
MemberWhy don’t you build something in Codepen and let us tinker with it rather than just point us at an example.
TBH I think you have misunderstood the ‘active’ state.
April 25, 2013 at 12:09 pm #133150Th3M8dH8tt3r
MemberSo you want the menu item to have a background with the drop shadow/second background when the user is on the corresponding page?
Use PHP. Something like this. Using index.php as the example page.
$pageSection = “home”;
include(‘header.php’);
?>at the top of the HTML page and then make a class called .underline for this example.
Include this for your li items.
- “>
Obviously, you change the pageSection string to correlate with the page you are on.
It does require you put the header section with navBar in it’s own page, something like header.php, and then include that page on each new page you want. It saves copying and pasting a tonne of code.
This way, it will apply classes to elements only when that page is loaded, ideal for underlining or applying styles to elements in nav bars etc.
I’m ok with jQuery but was taught to stay away from things that require fallbacks as much as possible. Make a site that will work under all circumstances and then add onto that.
I don’t know if this is the correct way or preferred way but I find PHP saves a tonne of time and code.
April 25, 2013 at 12:13 pm #133152Paulie_D
Member>So you want the menu item to have a background with the drop shadow/second background when the user is on the corresponding page?
It’s a reasonable assumption but I’m not entirely sure as he’s not quite explaining himself very well.
April 25, 2013 at 12:16 pm #133153Th3M8dH8tt3r
Member@Paulie_D – Just going by he wants to replicate the navBar to every page with active page items, it’s how I do it. All my page start and end with include for header and footer. Saves a tonne of space on the page.
April 25, 2013 at 12:20 pm #133155Paulie_D
MemberOh I get it but the use of the term ‘active’ is causing confusion.
Obviously `:active` is a specific property in CSS and relates to the mouse-down state.
What we both think he’s after is a ‘current-page’ class which you have addressed in PHP/WP but as he hasn’t (AFAIK) stated that’s what he’s actually using it’s hard to come up with an ideal solution.
April 25, 2013 at 12:26 pm #133156Th3M8dH8tt3r
Member@Paulie_D – yup! lol. If he wants to replicate the navBar, I think that’s how it should be done but I’m hardly a fountain of knowledge or got years of experience.
April 25, 2013 at 12:42 pm #133157simpletwist
ParticipantThat is it, replicate nav.
goal[goal](https://www.dropbox.com/s/1kz1pdu56l1eu63/Screen%20Shot%202013-04-25%20at%2012.35.28%20PM.png “goal”)
attempt:[attempt](https://www.dropbox.com/s/3xqv3w7qqghb5tn/Screen%20Shot%202013-04-25%20at%2012.39.15%20PM.png “goal”)
April 25, 2013 at 1:57 pm #133171Paulie_D
MemberLook we understand that you want to replicate the menu but you still haven’t explained yourself properly.
Is it the style of the hover you can’t do?
Is this supposed to be the look on mouse-down? [Which is ‘active’]
Or is it that you want the individual link to look like that **only** when the user is on that page?
Pictures don’t help that much. Please put some HTML & CSS in Codepen so we can help you better.
-
AuthorPosts
- The forum ‘CSS’ is closed to new topics and replies.