How to make a CSS Menu “Selected” with Hover Image Gallery Effect?


Tags: css

Problem :

I'm trying to figure out how to make the first navigation menu option a "selected" class that displays the image on the right automatically (by default) when you get to the web page.

Then when you hover your mouse over the other links it still displays the other images properly. Right now, you don't see the first image until you move your mouse over "shirts" on the menu.

Link: http://avisuals.web.fc2.com/readymade.html

Any CSS tips or suggestions? HELP my brain hurts!

Screenshot



Solution :

A solution that would preserve your current structure would be to make the images visible when the links have focus.

DEMO

The HTML structure stays almost the same, I've only added tabindex=1 to the links

<ul id="gallery">
    <li class="thumb">
        <a class="thumb" href="#" tabindex=1>Orion</a>
        <div><img src="http://i.space.com/images/i/20521/i02/eso-orion-nebula-1600.jpg" alt="blue shirt" border="0"><br><a class="selected" href="images/blueshirt.jpg" border="0"></a></div>
    </li>
    <li class="thumb">
        <a class="thumb" href="#" tabindex=1>Pencil</a>
        <div><img src="http://i.space.com/images/i/21535/i02/pencil-nebula-wide-1600.jpg" alt=""><br><a class="enlarge" href="images/P1010426.jpg"></a></div>
    </li>
    <li class="thumb">
        <a class="thumb" href="#" tabindex=1>Carina</a>
        <div><img src="http://i.space.com/images/i/15222/i02/carina-nebula-1600-1200.jpg" alt=""><br><a class="enlarge" href="images/P1010426.jpg"></a></div>
    </li>
    <li class="thumb">
        <a class="thumb" href="#" tabindex=1>Trifid</a>
        <div><img src="http://i.space.com/images/i/19657/i02/trifid-nebula-1600.jpg" alt=""><br><a class="enlarge" href="images/P1010426.jpg"></a></div>
    </li>
</ul>

The CSS I've used - kept it minimal to outline the functionality (and also because I'm falling asleep), you can add eye candy:

div { position: absolute; left: 0; opacity: 0; transition: 1s; }
a:focus { outline: none; }
li:first-child div, a:focus + div, a:active + div { opacity: 1; }

I've stacked the divs ontaing the images to be on top of the other and used opacity: 0; to hide them. I've then set the first one to have opacity: 1 and the same for the one corresponding to the link that has focus (also used the a:active for IE).

The main disadvantage of this method is that it is not persistent. Once you click anywhere else on the page, the link last clicked loses focus and the opacity of the corresponding div which holds the image becomes 0 again.


In order to make it persistent, you would have to alter the HTML a bit more, using something that's called the checkbox hack. That involves replacing the links with radio inputs corresponding labels, hiding the radio buttons and bringing the opacity to 1 when the corresponding radio button is checked (input[type=radio]:checked).

DEMO

HTML became:

<ul id="gallery">
    <li class="thumb">
        <input type=radio name=i id=i1 checked>
        <label for=i1>Orion</label>
        <div><img src="http://i.space.com/images/i/20521/i02/eso-orion-nebula-1600.jpg" alt="blue shirt" border="0"><br><a class="selected" href="images/blueshirt.jpg" border="0"></a></div>
    </li>
    <li class="thumb">
        <input type=radio name=i id=i2>
        <label for=i2>Pencil</label>
        <div><img src="http://i.space.com/images/i/21535/i02/pencil-nebula-wide-1600.jpg" alt=""><br><a class="enlarge" href="images/P1010426.jpg"></a></div>
    </li>
    <li class="thumb">
        <input type=radio name=i id=i3>
        <label for=i3>Carina</label>
        <div><img src="http://i.space.com/images/i/15222/i02/carina-nebula-1600-1200.jpg" alt=""><br><a class="enlarge" href="images/P1010426.jpg"></a></div>
    </li>
    <li class="thumb">
        <input type=radio name=i id=i4>
        <label for=i4>Trifid</label>
        <div><img src="http://i.space.com/images/i/19657/i02/trifid-nebula-1600.jpg" alt=""><br><a class="enlarge" href="images/P1010426.jpg"></a></div>
    </li>
</ul>

and the CSS:

input[type=radio] { display: none; }
label { cursor: pointer; }
div { position: absolute; left: 0; opacity: 0; transition: 1s; }
input[type=radio]:checked ~ div { opacity: 1; }

    CSS Howto..

    How do I center text vertically with css [duplicate]

    How to horizontally center two divs within a header div?

    How to insert 5 pictures next to eachother in a row

    Zend_Form - add CSS Class :: How can I add css class to label in Zend_Form?

    how to use input[type=range] CSS Pseudo-elements with firefox and IE

    How to add custom tag to a header to make the font size larger in WordPress? [closed]

    How do I get this CSS to work in safari

    CSS: How to center element that is bigger then the container?

    How to add class based on which css class name is come in jquery

    How do you achieve this backwards div effect? [closed]

    How to disable Javascript/CSS minification in ASP.NET MVC 4 Beta

    jquery - how to queue up a series of css property changes

    How to make a round mask over a image

    Vertical centering images within a slideshow using JS code?

    How can I place an element at the top of a page using CSS?

    How can I change styling and test for every page reload [closed]

    How to menu on one line and always in center?

    How to rotate an image with CSS style transform by an variable of degree?

    How to change the content of a span using css hover?

    How to place two labels around an image (dynamically); right and bottom?

    How do I align an icon right next to “Click here”?

    how to make the 1st row and first 5 column fixed in css

    How to set borders between children from parent in CSS?

    How can I push the primefaces DefaultMenuModel before an accordion panel?

    How to set style of active page number in ASP.NET GridView Pager?

    iOS How to access Library in CSS Url's?

    how do i change button/image onclick to active state?

    How do I set up the Zurb Foundation icons?

    How to change all CSS file into SCSS

    How to animate CSS with a delay between an unknown number of elements [duplicate]