PDA

View Full Version : css menu code


fattat
05-19-2009, 05:26 AM
http://www.tjkdesign.com/articles/new_drop_down/default.asp


anyone have the horizontal css drop down menu??(as the link above)
i trying for get the code from view code.
but there cant see the css code


anyone know where can download the source file for css menu??

edbr
05-19-2009, 06:32 AM
fattat you do know how to view page source right?

fattat
05-19-2009, 12:29 PM
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xml:lang="en" lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<!-- CSS Drop Menu | Copyright 2006 Thierry Koblentz - TJKDesign.com -->
<!--ZOOMSTOP-->
<meta name="Keywords" content="TJKDropDown,menu,css menu,dropdown,dropdown menu,suckerfish,ie5 mac compatible,TJK_DropDown" /><meta name="Description" content="TJKDesign.com | TJK_dropDown Menu. This a pure CSS solution which is keyboard and browsers friendly..." />
<!--ZOOMRESTART-->
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css" media="screen, projection">
@import "TJK_dropDown.css";
@import "/bookmark/bookmark_icons.css";
/*\*//*/
@import "TJK_dropDown_ieMac.css";
/**/
</style>
<script type="text/javascript" src="TJK_dropDown.js"></script>
<!--[if lt IE 7]>
<noscript>
<style type="text/css" media="screen">
@import "TJK_dropDown_ie.css";
</style>
</noscript>
<![endif]-->
<!--[if IE 5]>
<style type="text/css" media="screen">
@import "TJK_dropDown_ie5.css";
</style>
<![endif]-->

<title>Pure CSS horizontal Drop Down Menu</title></head>
<body class="AB">
<div id="wrapper">
<div id="header"><p>Back to <a title="Pure CSS dropdown menu article" href="/articles/Pure_CSS_Dropdown_Menus.asp">TJK Design</a></p></div>
<ul id="TJK_dropDownMenu">
<li id="AB"><a href="default.asp">Menus</a>
<ul>
<li><a href="../pure_CSS_dropdown_menus.asp">CSS Dropdown</a></li>
<li><a href="../navigation_links_and_current_location.asp">Current Link</a></li>
<li><a href="../keyboard_friendly_dom_menu.asp">Keyboard Special </a></li>
<li><a href="../using_real_images_in_menus.asp">With Images</a></li>
</ul>
</li>
<li id="CF"><a href="AD.asp">Articles: A-D</a>
<ul>
<li><a href="../user_defined_accesskeys.asp">Accesskeys</a></li>
<li><a href="../branching.asp">Branching</a></li>
<li><a href="../the_perfect_drop_cap.asp">Drop Caps</a></li>
</ul>
</li>
<li id="GJ"><a href="EK.asp">Articles: E-K</a>
<ul>
<li><a href="../conditional_comments.asp">ie C.C. </a></li>
<li><a href="../msie5mac.asp">ieMac Bugs</a></li>
<li><a href="../a_perfect_Image_Replacement_technique.asp">Images in Heading</a></li>
<li><a href="#">Images in Table</a></li>
</ul>
</li>
<li id="KR"><a href="LO.asp">Articles: L-O</a>
<ul>
<li><a href="../locationobject.asp">Location Object </a></li>
<li><a href="../one_html_markup_many_css_layouts.asp">Many Layouts</a></li><li><a href="../nulllinks.asp">Null Links </a></li>
</ul>
</li>
<li id="ST"><a href="PS.asp">Articles: P-S</a>
<ul>
<li><a href="../popup_window_with_no_extra_markup.asp">Popup Windows</a></li>
<li><a href="../png_overlay_with_no_extra_markup.asp">PNG Overlay </a></li>
<li><a href="../scalable.asp">Scalable Tabs </a></li>
<li><a href="../using_real_images_for_quotes_in_blockquotes.asp">Styling Pullquotes</a></li>
</ul>
</li>
<li id="UZ"><a href="TZ.asp">Articles: T-Z</a>
<ul>
<li><a href="../toggle_elements.asp">The Perfect FAQ </a></li>
<li><a href="../tip.asp">Tip Method </a></li>
<li><a href="../whitespace.asp">Whitespace</a></li>
</ul>
</li>
</ul>
<div id="google">
<p>
Note:<br />
In some browsers, Google ads &quot;jump&quot;. This is not due to the Dropdown menu but to the Google script.
</p>
<script type="text/javascript">
<!-- ***
google_ad_client = "pub-8889124974949837";google_ad_width = 120;google_ad_height = 600;google_ad_format = "120x600_as";google_color_border = "ffffff";google_color_bg = "ffffff";google_color_link = "999999";google_color_url = "fffacd";google_color_text = "fffacd"; // *** -->
</script>
<script type="text/javascript" src="http://pagead2.googlesyndication.com/pagead/show_ads.js"></script>
</div>
<h1>Horizontal <em>CSS</em> Drop Down Menu</h1>
<div id="bookmark">Bookmark this article at these sites:
<ul>
<li><a href="http://www.blinklist.com/index.php?Action=Blink/addblink.php&amp;Description=&amp;Url=http://www.tjkdesign.com/articles/new_drop_down/default.asp&amp;Title=Pure%20CSS%20horizontal%20Drop%2 0Down%20Menu">
<img alt="Save this link on blinklist" src="/bookmark/icons/blinklist.gif" />
</a></li>
<li><a href="http://del.icio.us/post?url=http://www.tjkdesign.com/articles/new_drop_down/default.asp&amp;title=Pure%20CSS%20horizontal%20Drop%2 0Down%20Menu">
<img alt="Save this link on del.icio.us" src="/bookmark/icons/delicious.gif" />
</a></li>
<li><a href="http://digg.com/submit?phase=2&amp;url=http://www.tjkdesign.com/articles/new_drop_down/default.asp">
<img alt="Save this link on digg" src="/bookmark/icons/diggman.gif" />
</a></li>
<li><a href="http://www.furl.net/storeIt.jsp?t=Pure%20CSS%20horizontal%20Drop%20Dow n%20Menu&amp;u=http://www.tjkdesign.com/articles/new_drop_down/default.asp">
<img alt="Save this link on furl" src="/bookmark/icons/furl.gif" /></a></li>
<li><a href="http://reddit.com/submit?url=http://www.tjkdesign.com/articles/new_drop_down/default.asp&amp;title=Pure%20CSS%20horizontal%20Drop%2 0Down%20Menu">
<img alt="Save this link on reddit" src="/bookmark/icons/reddit.gif" />
</a></li>
<li><a href="http://www.spurl.net/spurl.php?title=Pure%20CSS%20horizontal%20Drop%20D own%20Menu&amp;url=http://www.tjkdesign.com/articles/new_drop_down/default.asp">
<img alt="Save this link on spurl" src="/bookmark/icons/spurl.gif" />
</a></li>
<li><a href="http://myweb2.search.yahoo.com/myresults/bookmarklet?t=Pure%20CSS%20horizontal%20Drop%20Dow n%20Menu&amp;u=http://www.tjkdesign.com/articles/new_drop_down/default.asp">
<img alt="Save this link on My Web 2.0" src="/bookmark/icons/yahoomyweb.gif" />
</a></li></ul>
</div>
<p>Check the <a title="More keyboard-friendly" href="../keyboard_friendly_dropdown_menu/default.asp"><em>vertical</em> version</a>.</p>
<h2>Features</h2>
<ul>
<li>Works in modern browsers <em>without</em> script support.</li>
<li>Compatible with Internet Explorer 5 (Win <em>and</em> Mac <em>OS9</em>).</li>
<li>Based on <em>nested</em> Lists.</li>

<li>Current page link appears selected.</li>
<li>Sub-menus for the current page are visible by default.</li>
<li>Stylesheets are CSS hack-free.</li>
<li>In case there is no script support, Top Level List Items are <em>linked</em> to top level documents (mostly for Internet Explorer).</li>
<li>In modern Browsers <em>and</em> Internet Explorer, this menu is Keyboard <em>friendly</em> (offset links are <em>accessible</em>).</li>
<li>It uses <em>only one hook</em> per Top Level list items. </li>
<li>It is Standards compliant.</li>
<li>It addresses Accessibility Guidelines.</li>
<li>It is Search Engine Friendly.</li>
</ul>
<p>Please use this <a href="../../contact/default.asp">contact form</a> to send feedback and report errors.</p>
<h2>Other resources related to Menus on this site</h2>
<ul>
<li>A keyboard-friendly <a title="Accordion Menu" href="/articles/keyboard_friendly_dom_menu.asp">Accordion Menu </a>.</li>
<li>The best way to <a title="Yes, it is that good!" href="/articles/navigation_links_and_current_location.asp">Highlight the current page link</a>.</li>
</ul>
<!-- Creative Commons License -->
<p style="clear:both" id="cc">This work is licensed under a <a rel="license" href="http://creativecommons.org/licenses/by-nc-sa/2.0/">Creative Commons License</a><br />
<br /><a rel="license" href="http://creativecommons.org/licenses/by-nc-sa/2.0/"><img alt="Creative Commons License" src="http://creativecommons.org/images/public/somerights20.gif" /></a>.
<!-- /Creative Commons License -->
<!-- <rdf:RDF xmlns="http://web.resource.org/cc/" xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"><Work rdf:about=""><license rdf:resource="http://creativecommons.org/licenses/by-nc-sa/2.0/" /></Work><License rdf:about="http://creativecommons.org/licenses/by-nc-sa/2.0/"><permits rdf:resource="http://web.resource.org/cc/Reproduction" /><permits rdf:resource="http://web.resource.org/cc/Distribution" /><requires rdf:resource="http://web.resource.org/cc/Notice" /><requires rdf:resource="http://web.resource.org/cc/Attribution" /><prohibits rdf:resource="http://web.resource.org/cc/CommercialUse" /><permits rdf:resource="http://web.resource.org/cc/DerivativeWorks" /><requires rdf:resource="http://web.resource.org/cc/ShareAlike" /></License></rdf:RDF> -->
</p>
</div>
</body>
</html>

fattat
05-19-2009, 12:34 PM
fattat you do know how to view page source right?

u mean this??
http://www.tjkdesign.com/articles/new_drop_down/TJK_dropDown.css

body {font-size:small;font-family:Georgia, "Times New Roman", Times, serif;color:#666;padding:0;margin:0;background:#c3 0 url(/articles/img/Hor_dropDown_Demo/body.jpg) repeat-x;} img {border:0} #header {font-weight:normal;padding:10px 0 15px 10px;margin:0;background:#000 url(../img/Hor_dropDown_Demo/TJK_pure_css_dropDown_menu.gif) 100% 7px no-repeat;color:#ffc} h1 {border-bottom:1px dotted #999;margin:0 0 10px 10px;font-size:1em;line-height:2em;}h2 {border-left:10px solid #c30;color:#c30;padding-left:10px;margin:0 0 10px 10px;font-size:.9em} p {margin:5px 10px} #wrapper {background:#fff;width:50em;max-width:100%;margin:25px auto;border-left:1px solid #fff;border-right:1px solid #999;border-bottom:1px solid #666;padding-bottom:20px} #header p{color:#333;width:10em;background:#fff;margin:0;p adding:5px} #google {float:right;width:120px;margin:6em 10px;border:1px solid #999;display:inline;font-size:.75em;display:inline;background:#c30;}
#google p {font-size:1.2em;color:#fff;font-family:Geneva, Arial, Helvetica, sans-serif;margin-bottom:10px} p{margin-bottom:20px} p#cc {margin-top:20px;border-top:1px dotted #999;padding-top:10px;}
/************************************************/
/* Pure CSS Drop Down Menu [TJK_dropDown] v1.1 */
/* Copyright 2006, Thierry Koblentz */
/* TJKDesign.com. all rights reserved. */
/************************************************/

/* zeroing padding/margin for all elements */
#TJK_dropDownMenu,
#TJK_dropDownMenu * { margin:0;padding:0;}
/* "Master" UL (the whole Menu) */
#TJK_dropDownMenu {position:relative;background:#000 no-repeat 100% 50%;width:50em;max-width:100%;float:left;margin-bottom:3.5em;
}
/* sub-menu ULs */
#TJK_dropDownMenu li ul {

cursor:default;
width:48em;
max-width:100%;
position:absolute;
border-bottom:1px solid #ccc;
height:auto;
top:2.08em;
padding:10px 0;
padding-left:2em !important;
background-position:0 0 !important;
left:-9000px;
}
/* All LIs */
#TJK_dropDownMenu li {
cursor:pointer;
float:left;
width:8.23em;
max-width:16.5%;
text-align:center;
list-style-type:none;
font-weight:bold;
border-top:1px solid #fff;
}
/* sub-menu LIs */
#TJK_dropDownMenu li ul li {
padding:0 10px 0 0;
border:none;
width:auto;
max-width:none;
}
/* All anchors */
#TJK_dropDownMenu li a {
color:#666;
border-left:1px solid #333;
text-decoration:none;
display:block;
float:left;
padding:0 .4em;
height:2em;
line-height:2em;
}
/* sub-menu Anchors */
#TJK_dropDownMenu li ul li a {
position:relative !important; /* ie Mac */
cursor:pointer !important;
white-space:nowrap;
line-height:1.7em;
height:1.7em;
font-weight:400;
border-width:1px;
border-style:solid;
border-color:#ccc #999 #999 #ccc;
color:#666;
background-position:0 50% !important;
}
/* :hover and stuff */
#TJK_dropDownMenu li a:hover,
#TJK_dropDownMenu li a:focus,
#TJK_dropDownMenu li a:active {color:#000}
/* position and z-index for the sub-menus */
#TJK_dropDownMenu li:hover ul,
#TJK_dropDownMenu li.msieFix ul {left:0;z-index:10}
/* Current location - class on Body must match LI's id */
.AB #TJK_dropDownMenu li#AB a,
.CF #TJK_dropDownMenu li#CF a,
.GJ #TJK_dropDownMenu li#GJ a,
.KR #TJK_dropDownMenu li#KR a,
.ST #TJK_dropDownMenu li#ST a,
.UZ #TJK_dropDownMenu li#UZ a {color:#000;cursor:default;}
.AB #TJK_dropDownMenu li#AB ul,
.CF #TJK_dropDownMenu li#CF ul,
.GJ #TJK_dropDownMenu li#GJ ul,
.KR #TJK_dropDownMenu li#KR ul,
.ST #TJK_dropDownMenu li#ST ul,
.UZ #TJK_dropDownMenu li#UZ ul {left:0;z-index:5}
/* background images and border colors */
#TJK_dropDownMenu li#AB ul,
.AB #TJK_dropDownMenu li#AB {background:#e2facd !important}/* current location */
#AB,#AB li a,
.AB #TJK_dropDownMenu li#AB ul {background:#e2facd url(../img/Hor_dropDown_Demo/1.jpg) 0 100% repeat-x}

#CF:hover,#CF:focus,
#TJK_dropDownMenu li#CF ul,
.CF #TJK_dropDownMenu li#CF {background:#fffcd0 !important}/* current location */
#CF,#CF li a,
.CF #TJK_dropDownMenu li#CF ul {background:#fffcd0 url(../img/Hor_dropDown_Demo/2.jpg) 0 100% repeat-x}

#GJ:hover,#GJ:focus,
#TJK_dropDownMenu li#GJ ul,
.GJ #TJK_dropDownMenu li#GJ {background:#ffe1cc !important}/* current location */
#GJ,#GJ li a,
.GJ #TJK_dropDownMenu li#GJ ul {background:#ffe1cc url(../img/Hor_dropDown_Demo/3.jpg) 0 100% repeat-x}

#KR:hover,#KR:focus,
#TJK_dropDownMenu li#KR ul,
.KR #TJK_dropDownMenu li#KR {background:#fccae5 !important}/* current location */
#KR,#KR li a,
.KR #TJK_dropDownMenu li#KR ul {background:#fccae5 url(../img/Hor_dropDown_Demo/4.jpg) 0 100% repeat-x}

#ST:hover,#ST:focus,
#TJK_dropDownMenu li#ST ul,
.ST #TJK_dropDownMenu li#ST {background:#c9c9ff !important}/* current location */
#ST,#ST li a,
.ST #TJK_dropDownMenu li#ST ul {background:#c9c9ff url(../img/Hor_dropDown_Demo/5.jpg) 0 100% repeat-x}

#UZ:hover,#UZ:focus,
#TJK_dropDownMenu li#UZ ul,
.UZ #TJK_dropDownMenu li#UZ {background:#ffcebe !important}/* current location */
#UZ,#UZ li a,
.UZ #TJK_dropDownMenu li#UZ ul {background:#ffcebe url(../img/Hor_dropDown_Demo/6.jpg) 0 100% repeat-x}
/* "trigger" and "msieFix" classes */
#TJK_dropDownMenu li.msieFix a {color:#000 !important}

fattat
05-19-2009, 12:38 PM
http://img364.imageshack.us/img364/7153/picture1x.png (http://img364.imageshack.us/my.php?image=picture1x.png)

but how come the layout in dreamweaver is messy
but if in browser the layout all is ok...

Corrosive
05-19-2009, 02:46 PM
http://img364.imageshack.us/img364/7153/picture1x.png (http://img364.imageshack.us/my.php?image=picture1x.png)

but how come the layout in dreamweaver is messy
but if in browser the layout all is ok...

Just a guess without trawling through that mass of code...but I reckon that some of the styling is handled by the javascript. DW won't read the js and so displays it as it sees it. The browser will activate the js so it displays ok. You'll either have to live with it or try a different menu.

Corrosive
05-19-2009, 02:50 PM
Fattat, we don't mind you posting code but please wrap it in code tags as I have just had to do for you.

Thanks

fattat
05-19-2009, 04:28 PM
Fattat, we don't mind you posting code but please wrap it in code tags as I have just had to do for you.

Thanks

haha...sorry
but i dont know how to wrap it in code tags??
can teach me how to do it??
thank...

Corrosive
05-19-2009, 04:32 PM
When you post you will see a line of symbols above the area where you type so that you can style your post (change fonts, insert image etc.) Look along the line and you will see this symbol #

Select the code you want to wrap and then press this symbol. It does it for you and saves us poor mods having to do it for you :wink:

fattat
05-19-2009, 04:42 PM
When you post you will see a line of symbols above the area where you type so that you can style your post (change fonts, insert image etc.) Look along the line and you will see this symbol #

Select the code you want to wrap and then press this symbol. It does it for you and saves us poor mods having to do it for you :wink:


ok..thanks
i know how to do it right now..
for the css menu i think it was too difficult for me..
i see the code view is too complicated..
include the javascript, and IE hack

do u have other simple css menu which i mention above??
thank