AHHHH.. ok .. I get it.
ok, what Yahoo is doing is a simple background change when a tab is 'on',
all the graphics are taken from their CSS file useing the backgound
attribute.
when there's a mouse over, or a click, the class is changed. However the
'subnav' is created when you click on a link. Here's the set up (kinda)
my comments are HTML Comments.
HTML CODE:
<CENTER> <!-- Not needed, could be done in the CSS -->
<DIV id=ynnav> <!-- Start of the top line of tabs -->
<H5>Primary Navigation</H5>
<UL>
<!-- This is an ordered list. The class of the LI tells the system
which tab graphic to use -->
<!-- The 'first' and 'index' classes are special, as you can see in the
web site.. so they have different class names -->
<LI class=first><DIV><A href="http://news.yahoo.com/";
<http://news.yahoo.com/> ><B>News Home</B></A></DIV></LI>
<LI class=""><DIV><A href="http://news.yahoo.com";
<http://news.yahoo.com> ><B>U.S.</B></A></DIV></LI>
<LI class=on><DIV><A href="http://news.yahoo.com";
<http://news.yahoo.com> ><B>Business</B></A></DIV></LI>
<LI class=""><DIV><A Href="http://news.yahoo.com";
<http://news.yahoo.com> ><B>World</B></A></DIV></LI>
<LI class=""><DIV><A href="http://news.yahoo.com";
<http://news.yahoo.com> ><B>Entertainment</B></A></DIV></LI>
<LI class=""><DIV><A href="http://news.yahoo.com";
<http://news.yahoo.com> ><B>Sports</B></A></DIV></LI>
<LI class=""><DIV><A href="http://news.yahoo.com";
<http://news.yahoo.com> ><B>Tech</B></A></DIV></LI>
<LI class=""><DIV><A href="http://news.yahoo.com";
<http://news.yahoo.com> ><B>Politics</B></A></DIV></LI>
<LI class=""><DIV><A href="http://news.yahoo.com";
<http://news.yahoo.com> ><B>Science</B></A></DIV></LI>
<LI class=""><DIV><A href="http://news.yahoo.com";
<http://news.yahoo.com> ><B>Health</B></A></DIV></LI>
<LI class=""><DIV><A href="http://news.yahoo.com";
<http://news.yahoo.com> ><B>Most Popular</B></A></DIV></LI>
<LI class=index><DIV><A href="http://news.yahoo.com/page/sitemap";
<http://news.yahoo.com/page/sitemap> >Index</A></DIV></LI>
</UL>
<DIV class=spacer></DIV>
</DIV> <!-- END the YNNAV Div -->
<DIV id=ynsubnav><!-- This begins the 'subnav' -->
<H5>Secondary Navigation</H5>
<UL> <!-- and here's all the links -->
<!-- again note, this list is reset when the page loads...-->
<LI class=first><A href="http://news.yahoo.com";> Economy</A> </LI>
<LI class=""><A href="http://news.yahoo.com"; <http://news.yahoo.com>
>Stock Markets</A> </LI>
<LI class=""><A href="http://news.yahoo.com";> Earnings</A> </LI>
<LI class=""><A href="http://news.yahoo.com";> Personal Finance</A>
</LI>
<LI class=""><A href="http://news.yahoo.com";> Industries</A> </LI>
<LI class=""><A href="http://news.yahoo.com";> Commentary</A> </LI>
<LI class=""><A href="http://news.yahoo.com";> Press Releases</A>
</LI>
<LI class=""><A href="http://news.yahoo.com";> Most Popular</A> </LI>
</UL>
<DIV class=spacer></DIV>
</DIV><!-- END TAB NAV -->
</DIV><!-- END HEADER -->
</Center>
and now on to the CSS.
This is the CSS used for the PRIMARY NAV Block
Notice the 'background' and you can hit the URL directly to pull down the
tab graphics.
#ynnav{padding:0; clear:both; }
#ynsubnav h5, #ynnav h5{display:none; }
#ynnav ul{margin:0; padding:0 0 0 4px; list-style:none; height:19px;
background:url(http://us.i1.yimg.com/us.yimg.com/i/us/nws/gl/rul_hori_999.gi
f) bottom repeat-x; }
#ynnav li{display:block; float:left; background:#344760
url(http://us.i1.yimg.com/us.yimg.com/i/us/nws/gl/bg_nav_cnrl.gif)
no-repeat; margin-right:3px; }
#ynnav li a{display:block; float:left; font:10px verdana; font-weight:bold;
color:#fff; white-space:nowrap; padding:3px 6px; margin:0;
text-decoration:none; }
#ynnav li a:visited{color:#fff; text-decoration:none;}
#ynnav li div{display:block; float:left; margin:0; padding:0;
background:url(http://us.i1.yimg.com/us.yimg.com/i/us/nws/gl/bg_nav_cnrr.gif
) no-repeat top right; }
#ynnav li.on{background:#F2F3F5
url(http://us.i1.yimg.com/us.yimg.com/i/us/nws/gl/bg_nav_cnrl_on.gif)
no-repeat; padding-left:3px; }
#ynnav li.on
div{background:url(http://us.i1.yimg.com/us.yimg.com/i/us/nws/gl/bg_nav_cnrr
_on200.gif) top right no-repeat; padding-right:3px; padding-bottom:1px; }
#ynnav li.on a{color:#003DB8 ; text-decoration:none;}
#ynnav li.on a:visited{color:#003DB8 ; text-decoration:none;}
#ynnav li.index{background:none; }
#ynnav li.index div{background:none; }
#ynnav li.index a{color:#003DB8 ; font-weight:normal; }
#ynnav li.index a:visited{color:#003DB8 ; }
Here's The CSS for the SUB-NAV block
#ynsubnav{padding:0; margin-bottom:2px; clear:both; float:left; width:100%;
}
#ynsubnav ul{list-style:none; margin:0; padding:0; border-bottom:1px solid
#ccc; float:left; width:100%; background:#F2F3F5; }
#ynsubnav a{float:left; display:block; margin:7px 0; padding:0 7px;
border-left:1px solid #999; text-decoration:underline; }
#ynsubnav a:visited{text-decoration:underline; border-left:1px solid #999;
color:#003DB8 ; }
#ynsubnav a:hover{color:#003DB8 ; }
#ynsubnav li{float:left; display:block; font:77% verdana; height:25px; }
#ynsubnav li.first a{padding-left:13px; border:0; }
#ynsubnav li.first a:visited{border:0; }
#ynsubnav li.on a{color:#003DB8 ; font-weight:bold; text-decoration:none; }
#ynsubnav li.on a:visited{color:#003DB8 ; text-decoration:none; }
and that should just about do it.
it's nothing more then CSS, no DHTML or JS is used.. although it could
(should?) be.
the whole menu is updated when you click on a link, and the new page
switches the 'on' position in
the main nav LI list.
_____
From: [email protected]
[mailto:[EMAIL PROTECTED] On Behalf Of Maxwell Sabwa @
RDS Kenya
Sent: Friday, April 29, 2005 9:16 AM
To: [email protected]
Subject: RE: [ASP] Re: Yahoo style tabs
Not sure, but they might be doing it by displaying and hiding layers, this
is probably some clever DHTML. Just my 2 cents... pretty nice site though.
-----Original Message-----
From: [email protected]
[mailto:[EMAIL PROTECTED] On Behalf Of anthrax911
Sent: Friday, April 29, 2005 4:34 PM
To: [email protected]
Subject: [ASP] Re: Yahoo style tabs
I still do not think the page loads a new .html when you click a
tab. For example go to http://news.yahoo.com/
1) Click 'AP' tab under the 'Top Stories' section.
2) Then click 'Reuters' under the same section.
That is not reloading a page.
--- In [email protected], "David Smart"
<[EMAIL PROTECTED]> wrote:
> > But for me to duplicate something like
> > this, would I not need the actual CSS file(s)?
>
> Yes, but so does your browser. The CSS file(s) is in your
temporary internet files folder.
>
> > I really like how they do their tabs without re-loading a new
page.
>
> ??? Unless you're looking at something I'm not looking at ... it
does load a new page each time you click on a tab.
>
> Each page is different, and just has its own tab at the front.
>
> > Is that done with CSS?
>
> The page change is not done with CSS - it's just a simple <a> tag
with an href.
>
> The look of the tabs is done with CSS.
>
> Dave S
>
>
---------------------------------------------------------------------
Home : http://groups.yahoo.com/group/active-server-pages
---------------------------------------------------------------------
Post : [email protected]
Subscribe : [EMAIL PROTECTED]
Unsubscribe: [EMAIL PROTECTED]
---------------------------------------------------------------------
Yahoo! Groups Links
---------------------------------------------------------------------------
CRBAfrica - providing professional debt management and credit reference
bureau services in Kenya, Uganda, Botswana, Tanzania, Ghana and Zambia.
---------------------------------------------------------------------------
AccessKenya - Your Corporate ISP - CRB's solution provider for fast
efficient Email and Internet Services
---------------------------------------------------------------------------
ATTENTION
---------------------------------------------------------------------------
The information in this electronic mail message is private and confidential
and only for the addressee. Should you receive this message by mistake,
you are hereby notified that any disclosure, reproduction, distribution or
use of this message is strictly prohibited. Please inform the sender by
reply
transmission and delete the message without copying or opening it. Any
unauthorised use or interception of this e.mail is illegal. If this e.mail
is not
intended for you, you may not copy, distribute or disclose the contents to
anyone. Save for the bona fide company matters, the CRB Group of
companies does not accept responsibility for the opinions expressed in
this e.mail.
---------------------------------------------------------------------------
---------------------------------------------------------------------
Home : http://groups.yahoo.com/group/active-server-pages
---------------------------------------------------------------------
Post : [email protected]
Subscribe : [EMAIL PROTECTED]
Unsubscribe: [EMAIL PROTECTED]
---------------------------------------------------------------------
_____
Yahoo! Groups Links
* To visit your group on the web, go to:
http://groups.yahoo.com/group/active-server-pages/
* To unsubscribe from this group, send an email to:
[EMAIL PROTECTED]
<mailto:[EMAIL PROTECTED]>
* Your use of Yahoo! Groups is subject to the Yahoo! Terms of Service
<http://docs.yahoo.com/info/terms/> .
[Non-text portions of this message have been removed]
---------------------------------------------------------------------
Home : http://groups.yahoo.com/group/active-server-pages
---------------------------------------------------------------------
Post : [email protected]
Subscribe : [EMAIL PROTECTED]
Unsubscribe: [EMAIL PROTECTED]
---------------------------------------------------------------------
Yahoo! Groups Links
<*> To visit your group on the web, go to:
http://groups.yahoo.com/group/active-server-pages/
<*> To unsubscribe from this group, send an email to:
[EMAIL PROTECTED]
<*> Your use of Yahoo! Groups is subject to:
http://docs.yahoo.com/info/terms/
