When you preview (this site) you will notice a navigation that I am trying to learn how to style using css. Not all the bells and whistles mind you, just the basic skeleton of the idea

 

A button with an active attribute or is in the hover state that applies

1. a vertically growing/shrinking height

2. with a fading overlay

a. the over lay is 3 parts (i think)

1. button text

2. large semi-opaque rectangle that covers the whole button

a. becomes fully transparent with active or hover

b. becomes semi opaque when above criteria are not met

3. small semi-opaque rectangle that button text is display against

a. becomes fully opaque with active or hover

b. becomes semi opaque when above criteria are not met

 

 

The HTML ~

 

<nav id="main_nav"> <!-- this site used a <div> tag instead of a <nav> tag -->
  <h2 class="access">Navigation - Site Name</h2> <!-- this isn't seen on the actual site -->
  <ul> <!-- site had (class="nav" role="nav") as <ul> attributes -->
    <li class="home selected"> <!-- this is the selected class, each button has a unique class for selected -->
      <a href="#">
        <span class="nav-img"></span>
        <span class="nav-text">Home</span>
      </a>
    </li>    
    <li class="about"> <!-- if <li> element was selected the class would be class="about selected" -->
      <a href="#">
        <span class="nav-img"></span>
        <span class="nav-text">About</span>
      </a>
    </li>
  <ul> 
</nav>

 

The above code is the basic markup of the menu (with just two of the buttons; one selected and one not selected). Most of the markup was taken from the source with a minor edit to symbolize it's generality.

I was wondering how I would write the ccs to style the given elements to behave similarly as the ones displayed on the site. Well if it could be done at all. I have seen a lot of really cool stuff done with nav menus using only css and hope this can be done as well.

Hi,

 

I've taken a look at what you're trying to replicate and I think I know what you want to do and how to do it. Without plugging my own site, you can see what I achieve with CSS on this page here by hovering over the icons (http://www.williamsgraphics.co.uk/portfolio/web/).

 

Thats a CSS hover effect with a transition applied to the scale. Pretty simple depending on which effect you want to achieve. For the effect on the site you linked to, they are possibly having a different background image applied to each element with a style, then when you hover over each, the padding is made larger with a transition, then when rolling off the padding returns to normal.

 

You could do this just by copying the "Active" class styles for the rollover. As for the fade, it's probably just a clever rgba background colour selector transition. At least thats how i'd do it. With something similar for the title.

 

Hope this makes sense, I didn't have much time to elaborate on each aspect.

so I redesign the html

 

 

        <header>
            <nav>
                <a href="#">home</a>
                <a href="#">about</a>
                <a href="#">displays</a>
                <a href="#">parties</a>
                <a href="#">events</a>
                <a href="#">media</a>
                <a href="#">help</a>
            </nav>
        </header>
 

 

 

this is the css for the new display.

nav{
    width: 90%;
    height: 50%;
    margin: 0px auto;
}
nav a{
    margin-top: 210px;
    background-image: url('nav_img2.png');
    background-color: #FFF;
    display: inline-block;
    color: #;
    width: 12%;
    height: 75%;
    line-height: 15;
    text-align: center;
    transition: all 100ms linear 50ms;
}
nav a:hover{
    color: #DDD;
    height: 90%;
}

I get the growing size I want but now my problem is that the text inside the <a> element needs to be aligned at the bottom of the <a> element itself so I used line-height to adjust it some, but don't know if this is the best way to do it. What makes it a problem though is when you hover over the <a> element the text doesn't move down with the re-sizing to remain on bottom of the <a> element. I tried increasing the line-height in the <a>:hover tag but that caused the all the <a> elements to move, not just the hovered element.

Edited March 12, 201412 yr by drt_t1gg3r

Although many here probably easily directly answer this second part of your question about aligning the text to the bottom of the element I can only say that you need to use the vertical-align:middle property, but how to force this to work on all browsers is the bit I am not sure of.

 

However; I know a site that does know the answer to this and many other hover effect css questions, Codrops - This is a link to a directory full of their 'blueprints', tutorials, and experimental's.

Thx 'weedy' for the advice on using the vertical-align property. That sent me off in a direction that was totally useful. Researching the details of the property helped me understand what was going on when I changed the line-height property. When I chose to go with a value of inline-block for the display property it made all the <a> selectors of the <nav> act as one unit. So when I changed the line-height it affected all of the <a> selectors. That's when I changed the value of the display property to 'block' and that allowed me to handle each <a> element individually. So when I changed the line-height on the hover it only affected the hovered anchor and not all of them.

 

@William - thx you most of all for sending me in the right direction of the major mechanic I was trying to create. Not being well read on the tags and element properties I was ignorant of the many many new properties I could play with.

Edited March 13, 201412 yr by drt_t1gg3r

Thx 'weedy' for the advice on using the vertical-align property. That sent me off in a direction that was totally useful. Researching the details of the property helped me understand what was going on when I changed the line-height property. When I chose to go with a value of inline-block for the display property it made all the <a> selectors of the <nav> act as one unit. So when I changed the line-height it affected all of the <a> selectors. That's when I changed the value of the display property to 'block' and that allowed me to handle each <a> element individually. So when I changed the line-height on the hover it only affected the hovered anchor and not all of them.

 

@William - thx you most of all for sending me in the right direction of the major mechanic I was trying to create. Not being well read on the tags and element properties I was ignorant of the many many new properties I could play with.

 

With your explanation of what was happening I think I understand it a bit better now too Glad my link helped.