HTML/CSS/JS advice

[colonel_mortis]

I am in the process (slowly) of making a website, and I would like, at small resolutions, to have a tab bar which is just an icon, but when you point to it, it extends to be a full label over a period of about 0.5 seconds, and retracts when you remove your mouse, over the same time. I have messed around with easing using JQuery with the mouseover() and mouseout() functions(?), but I can't get it to work correctly. Could anyone give me some advice as to how I should make it work, and I don't mind completely restructuring the code because there's no deadline and I've barely started. This is the HTML I have so far:

        <section id="linkline">        <div id="topnav" class="navhor">            <ul>                <li id="home-top"><a href=""><img src="file:///A:/Users/1-Jack/Documents/Eclipse workspace/New NHSEngineers/resources/images/placeholder mini link icon.png" /><p class="navlabel">Home</p></a></li>                <li id="vex-top"><a href="vex"><img src= "file:///A:/Users/1-Jack/Documents/Eclipse workspace/New NHSEngineers/resources/images/placeholder mini link icon.png"/><p class="navlabel">VEX</p></a></li>                <li id="4x4-top"><a href="4x4"><img src= "file:///A:/Users/1-Jack/Documents/Eclipse workspace/New NHSEngineers/resources/images/placeholder mini link icon.png"/><p class="navlabel">4x4</p></a></li>                <li id="about-top"><a href="about"><img src= "file:///A:/Users/1-Jack/Documents/Eclipse workspace/New NHSEngineers/resources/images/placeholder mini link icon.png"/><p class="navlabel">About</p></a></li>                <li id="sponsor-top"><a href="sponsors"><img src= "file:///A:/Users/1-Jack/Documents/Eclipse workspace/New NHSEngineers/resources/images/placeholder mini link icon.png"/><p class="navlabel">Sponsors</p></a></li>                <!--UNFINISHED!!!-->            </ul>        </div>        <div id="toplinks" class="navhor">            <ul>                <a href="http://www.facebook.com/NHS.Young.Engineers" id="fb-top"><li><img src="file:///A:/Users/1-Jack/Documents/Eclipse workspace/New NHSEngineers/resources/images/placeholder mini link icon.png" /><p class="navlabel">Facebook</p></li></a>                <a href="http://www.youtube.com/NHSEngineers" id="yt-top"><li><img src="file:///A:/Users/1-Jack/Documents/Eclipse workspace/New NHSEngineers/resources/images/placeholder mini link icon.png" /><p class="navlabel">YouTube</p></li></a>            </ul>        </div>        </section>

The images linked are simple 40px by 40px placeholder images. Edited June 23, 2013 by colonel_mortis

[João Severino]

Check this video

It's for making a pop-up window on a footer but it can be modified to your needs

[colonel_mortis]

Check this video

It's for making a pop-up window on a footer but it can be modified to your needs

Thanks. That's what I already had, but while using it, because it appears and disappears instantly, it kinda messes it up when it's a horizontal list because it pushes the other content out of the way, which snaps back so you hover over the wrong thing. What I would prefer is if it could transition in and out (slide out of the icon thing?) to make it more user friendly.

[João Severino]

There must be a property that you aren't setting up that makes it display on top and not push the other content away

Check how you make it display on hover and put display:block

...display:block...

[colonel_mortis]

 

There must be a property that you aren't setting up that makes it display on top and not push the other content away

Check how you make it display on hover and put display:block

...display:block...

The thing it, I need it to push the other content away, otherwise it won't make the bar smaller, which is the point of it (it will only be used on low res screens). What I intend is for you to point to the logo and it extends to the full width of the button. Screenshot of what I'm looking for:

Edited June 23, 2013 by colonel_mortis

[João Severino]

#topnav ul li{width:40px;height:40px;}#topnav ul li:hover{   width:100px;   height:50px;}

I think something like this would work

[colonel_mortis]

#topnav ul li{width:40px;height:40px;}#topnav ul li:hover{   width:100px;   height:50px;}

I think something like this would work

 

It still doesn't transition, which is my main issue. Without the transition, if you move your mouse off one, it will jump 2 along and expand that one, which isn't good.

[João Severino]

What about something like this.

#topnav ul li{width:40px;height:40px;transition:width 2s;-webkit-transition:width 2s; /* Safari */transition:height 2s;-webkit-transition:height 2s; /* Safari */}#topnav ul li:hover{   width:100px;   height:50px;}

NOTE: It may not work on old versions of Internet Explorer

[colonel_mortis]

What about something like this.

#topnav ul li{width:40px;height:40px;transition:width 2s;-webkit-transition:width 2s; /* Safari */transition:height 2s;-webkit-transition:height 2s; /* Safari */}#topnav ul li:hover{   width:100px;   height:50px;}

NOTE: It may not work on old versions of Internet Explorer

Screw IE.

Thanks, that's made it much better. I'll fix it up a bit, then report back if it works properly. It is much better than how I had it though :)

[João Severino]

Glad I could help

[colonel_mortis]

Even with the new code (I changed it a bit but I don't think it was my fault), it doesn't actually take any time at all.

	#topnav ul a, #toplinks ul a{		width:40px;		height:48px;		margin-right: 6px;		padding-left: 2px;				transition:width 2s 0s;		-webkit-transition:width 2s 0s; /* Safari + chrome*/		-moz-transition:width 2s 0s; /*firefox*/		display:inline-block;		text-overflow:clip;	}		#topnav ul a p, #toplinks ul a p{		display: none;	}	#topnav ul a:hover, #toplinks ul a:hover{   		width:auto;   		height:48px;	}	#topnav ul a:hover p, #toplinks ul a:hover p{		display: inline;	}

I have discovered that it's not running the transition command at all, simply jumping between the two states, on FF, chrome and IE.

Apparently, you can't transition to auto :(

Edited June 23, 2013 by colonel_mortis

[colonel_mortis]

Yeah, you can't transition to auto, but for anybody who would like to do this too, set it to change max-width (on my code above, replace "width" with "max-width" everywhere) and it works fine. No it doesn't. Apparently now it doesn't transition back correctly :(

[João Severino]

I believe you can't just set it to auto or max-width, you have to say an exact size like 50px

[colonel_mortis]

I believe you can't just set it to auto or max-width, you have to say an exact size like 50px

You can do max width, and I've fixed it, it's just a pain in the backside to make it work because the text does strange things and the box jumps smaller, ruining the effect. I had to force it not to overflow (thanks to google for a workaround) so that it would work.