[RESOLVED] How do they do it?

**mindwashed** · 05-23-2012 12:57 PM

Hi there,

I've been looking at the code on the Walker Art Center's website, but I can't seem to figure out how they do this. Can anyone explain me how do they manage to change the achronyms in the left side menu, to the full words kind of boxes when we hover them. Are they even using javascript to make this change?

Thank you.

**auntnini** · 05-23-2012 05:43 PM

You might want to look at this
http://www.dynamicdrive.com/dynamici...edcollapse.htm
Animated Collapsible DIV v2.4
Author: Dynamic Drive

**JMRKER** · 05-23-2012 07:28 PM

You could also modify something like this.
No JS involved, just some CSS settings.

Code:

<html>
<head>
<title> Untitled </title>

<style type="text/css">
#leftPanel { width:150px; }
#leftPanel ul { list-style-type:none; }
#leftPanel li:hover { border:1px solid orange; }
</style>

</head>
<body>
<div id="leftPanel">
 <ul id="leftPanelList">
  <li onmouseover="this.innerHTML='Web Developer'" onmouseout="this.innerHTML='WD'"
      onclick="window.location.href='http://www.webdeveloper.com'">WD</li>
  <li onmouseover="this.innerHTML='Coding Forums'" onmouseout="this.innerHTML='CF'"
      onclick="window.location.href='http://www.codingforums.com'">CF</li>
  <li onmouseover="this.innerHTML='Dream In Code'" onmouseout="this.innerHTML='DC'"
      onclick="window.location.href='http://www.dreamincode.net'">DC</li>
 </ul>
</div>
</body>
</html>

**mindwashed** · 05-24-2012 05:46 AM

Thanks JMRKER! that's exactly what I was looking for. It works like a charm. Well the border thing does not but I don't need it anyway.

**JMRKER** · 05-24-2012 09:01 AM

Originally Posted by mindwashed

Thanks JMRKER! that's exactly what I was looking for. It works like a charm. Well the border thing does not but I don't need it anyway.

You're most welcome.
Happy to help.

What is the problem with the "border thing"?
Which browser is giving you the problem?

Good Luck!

**Padonak** · 05-24-2012 10:00 AM

Originally Posted by JMRKER

...
Which browser is giving you the problem?
...

i bet he's talking about IE ))

for IE and the same crap (if exists lol) the code will be:

Code:

<html>
<head>
<title> Untitled </title>

<style type="text/css">
#leftPanel { width:150px; }
#leftPanel ul { list-style-type:none; }
#leftPanel li.norm{border:none;}
#leftPanel li.hov{border:1px solid Orange;}
</style>

</head>
<body>
<div id="leftPanel">
 <ul id="leftPanelList">
  <li onmouseover="this.innerHTML='Web Developer';this.className='hov'" onmouseout="this.innerHTML='WD';this.className='norm'"
      onclick="window.location.href='http://www.webdeveloper.com'">WD</li>
  <li onmouseover="this.innerHTML='Coding Forums';this.className='hov'" onmouseout="this.innerHTML='CF';this.className='norm'"
      onclick="window.location.href='http://www.codingforums.com'">CF</li>
  <li onmouseover="this.innerHTML='Dream In Code';this.className='hov'" onmouseout="this.innerHTML='DC';this.className='norm'"
      onclick="window.location.href='http://www.dreamincode.net'">DC</li>
 </ul>
</div>
</body>
</html>

**JMRKER** · 05-24-2012 12:28 PM

Originally Posted by Padonak

i bet he's talking about IE ))

for IE and the same crap (if exists lol) the code will be:

Code:

...

<style type="text/css">
#leftPanel { width:150px; }
#leftPanel ul { list-style-type:none; }
#leftPanel li.norm{border:none;}
#leftPanel li.hov{border:1px solid Orange;}
</style>

...

Thanks, I was unaware the CSS needed to be different for the 'special' MSIE.

Thread: [RESOLVED] How do they do it?

Thread Tools

Display

[RESOLVED] How do they do it?

Accordian Collapsible div ?

Thread Information

Users Browsing this Thread

Bookmarks

Bookmarks

Posting Permissions