Home : Forums : Webmasters' Lounge : Side link tabs

Side link tabs

You are currently not logged in. You can view the forums, but cannot post messages.

17-May-11 15:20

Delete

Edit

eman

Bronze

Posts: 40

From: Durham, NC, USA

Can anyone tell me how I can create links on the far sides like the ones on this link. Thanks

http://festival-park.com/index.html

19-May-11 04:25

Delete

Edit

matt

Gold

Posts: 3328

From: Southern Highlands, NSW, Australia

Hi eman,

They're absolutely positioned divs that use the css :hover pseudoclass to move out when hovered over. They've also added CSS transitions to slide them in/out slowly.

See: http://festival-park.com/c/styles.css

--
Matt Doyle, Elated
3rd Edition of my jQuery Mobile book out now! Learn to build mobile web apps. Free sample chapter: http://store.elated.com/

19-May-11 07:52

Delete

Edit

eman

Bronze

Posts: 40

From: Durham, NC, USA

Thanks Matt, this really helps. I looked at the css and html code and trying to figure out how do they add the tab names photos, video, applications, and questions. Also how were you able to get the css code? Thanks again.

http://festival-park.com/index.html

[Edited by eman on 19-May-11 08:32]

19-May-11 23:50

Delete

Edit

matt

Gold

Posts: 3328

From: Southern Highlands, NSW, Australia

@eman: I just viewed source and looked for:

<link href="c/styles.css" rel="stylesheet" type="text/css" />

Cheers,
Matt

--
Matt Doyle, Elated
3rd Edition of my jQuery Mobile book out now! Learn to build mobile web apps. Free sample chapter: http://store.elated.com/

20-May-11 15:38

Delete

Edit

eman

Bronze

Posts: 40

From: Durham, NC, USA

Thanks Matt,

I just want to know how do they add the tab names photos, video, applications, and questions. Thanks

http://festival-park.com/index.html

[Edited by eman on 20-May-11 15:39]

23-May-11 02:32

Delete

Edit

matt

Gold

Posts: 3328

From: Southern Highlands, NSW, Australia

@eman: They're just images, eg:

http://festival-park.com/images/photo_link.png

They've added the images as background images in the CSS. See the #apDiv1, #apDiv2, #apDiv3, #apDiv4 rules.

--
Matt Doyle, Elated
3rd Edition of my jQuery Mobile book out now! Learn to build mobile web apps. Free sample chapter: http://store.elated.com/