Log in

View Full Version : add navigation to CSS file


intcon
12-19-2009, 09:51 PM
I am using the suckerfish menu (http://www.dynamicdrive.com/style/csslibrary/item/suckertree-menu-vertical/) but was wondering if it's possible to set up all of the links INSIDE the style sheet itself....so if one change was made to the navigation (ie, new link added in) it would appear on all pages....? I have a customer who wants to update their own projects page, and I can't think of how else to do it so they only change the one page...

thanks

carrie
bluewalrus
12-19-2009, 09:52 PM
PHP includes

http://php.net/manual/en/function.include.php

CSS only contains css or at least should
intcon
12-19-2009, 10:15 PM
thanks blue walrus....but it needs to be something fairly easy to change....that's why i thought CSS

carrie
molendijk
12-20-2009, 01:10 AM
Intcon, what you want is not possible. Use php, as bluewalrus suggests. If that's not possible, use one of the ajax-includes provided by Dynamic Drive.
You could also try this (http://www.let.rug.nl/molendyk/include_menu6/suckertree1.html).
===
Arie Molendijk.
===
intcon
12-20-2009, 04:26 AM
Arie..thanks! that bottom suggestion is a winner i think! much appreciated!

carrie
intcon
12-20-2009, 04:24 PM
Arie...can you tell me how to make this post in me left column? sorry, I'm a newbie to CSS....=)
test page (http://www.monarchcottages.com/kpltd/test/)

carrie
bluewalrus
12-21-2009, 04:18 AM
Something like this




<!--Division links-->
<div id="links"><img src="logo_front.jpg" alt="" align="left" width="137" border="0" height="89">
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,79,0" id="Movie6a" width="641" height="92">
<param name="movie" value="Movie6a.swf">
<param name="bgcolor" value="#FFFFFF">
<param name="quality" value="high">
<param name="allowscriptaccess" value="samedomain">
<embed type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" name="Movie6a" src="Movie6a.swf" bgcolor="#FFFFFF" quality="high" swliveconnect="true" allowscriptaccess="samedomain" width="641" height="92">
<noembed>
</noembed>
</object></div>
<!--Division heading-->
<div id="heading">
<!--Division heading Maroon COLUMN-->
<div id="heading-maroon"></div>
<!--Division main-->
</div>
<div id="main">
<!--Division main LEFT COLUMN-->
<div id="main-left">
<div class="suckerdiv">
<ul id="suckertree1">
<li><a href="services.html">Services</a>
<ul><li><a href="environmental_services.html">Environmental</a></li>
<li><a href="#">Transportation</a></li>
<li><a href="#">Surveys/Development</a></li>
<li><a href="#">Drainage/Storm Water</a></li>
<li><a href="#">Recreation</a></li>
<li><a href="#">Local Government Services</a></li>
<li><a href="#">Water/Wastewater Operations</a></li>
<li><a href="#">Animal Facilities</a></li></ul>
</li>
<li><a href="#">Projects</a></li>
<li><a href="#">Award Projects</a>
<ul>
<li><a href="#">Engineer Reports</a></li>
<li><a href="#">Item</a></li>
</ul>
</li>
<li><a href="#">Newsletter</a></li>

<li><a href="#">About</a>
<ul>
<li><a href="#">item</a></li>
<li><a href="#">Folder 2.1</a>
<ul>
<li><a href="#">item</a></li>
<li><a href="#">Sub Item 2.1.2</a></li>
<li><a href="#">Sub Item 2.1.3</a></li>
<li><a href="#">Sub Item 2.1.4</a></li>
</ul>
</li>
</ul>
</li>
<ul><li><a href="#">Contact</a></li>
</ul>
<ul>
<li><a href="#">Home</a></li>
</ul>
</ul></div>

<script type="text/javascript">
document.write('<iframe name="menu" src="menu.html" style="position:absolute;left:-500px;display:none;width:0px;height:0px" frameborder="0"></iframe>');
function extractMenuFromIframe(){
document.body.innerHTML+=frames['menu'].document.body.innerHTML}
window.onload=extractMenuFromIframe;
</script><iframe name="menu" src="menu.html" style="position: absolute; left: -500px; display: none; width: 0px; height: 0px;" frameborder="0"></iframe>

<p></p></div>
<!--Division main CENTER COLUMN-->
<div id="main-middle"><p class="main">Kuehl and Payer, Ltd. established in 1983 provide solutions to problems for Northwest Iowa residents, businesses, agricultural businesses, industries, and governments in various professional disciplines. With offices in Storm Lake, Algona, and Sac City and a staff of 38 professionals and technicians, we provide surveying, engineering, environmental, recreational, and management assistance to our diverse clientele.</p>
<p class="main">Animal waste facilities, transportation (streets, highways, bridges, and airport facilities), water and wastewater operations, agricultural and urban drainage, recreational facilities (aquatic parks, ball fields, skateboard parks, trails, etc.), boundary and ALTA surveys are all design services that are available to the clients of Kuehl and Payer, Ltd. Management and various governmental consulting services are additional services provided by our staff members.</p>
<p class="main">Our specialized services for rural and urban clients are tempered with a sensitivity built from our extensive rural experience and individual backgrounds. This experience, background, technological proficiency, comprehensive insight, and community knowledge all enables Kuehl and Payer, Ltd. to build trust and lasting relations with our communities and clients.</p><br>
<br>
&lt;div id="footer"&gt;&lt;/div&gt;<br>
&lt;/body&gt;
<p></p>
<h2>Scroll Bar</h2>
<p>The scroll bar on this division only initiates if you exceed the amount of content that the fixed height allows. To remove it increase the height of the division or reduce the amount of content.</p>
<br><br>
</div>
<!--Division main RIGHT COLUMN-->
<div id="main-right"><h2>Sidebar</h2>
<p>Sidebars can be used for many purposes.</p>
</div>
</div>
<!--Division footer-->
<div id="footer"><address>Copyright © 2009 - yourdomain.com - All Rights Reserved</address></div>
<p></p>

This is from generated source so if your using server side or javascript (i don't think you are) it won't be the same.
djr33
01-01-2010, 09:03 AM
Just a quick note to add:
CSS stores styles-- how stuff should be displayed. It does not store content, only how content is used.
PHP generates html, so it is a good tool for dynamically generating html that has certain things in it. PHP includes are very easy (once you understand the basics), and they are very, very useful.
Ajax is a method of javascript that acts like includes, but in the browser. Because of this it will only work if javascript is on in the browser and a new enough version to support it. It may also be unexpectedly buggy in some cases, like if someone is using a weird browser of if their computer is slow (because Javascript requires extra memory, especially for more complex things).

Javascript itself is something like CSS in how it is stored-- you can use external .js files that can be included in every page. If all you are doing is wanting to create a few elements on the page, then storing them in a Javascript file is probably the best way (if you can't do it with PHP, SSI, or other server-side methods). You can just use Javascript to store what you want, then to later output it as html on the page. It will be easy to include on every page and easy to update.

So the simplest answer to your original question: no, CSS cannot do anything like that. But you can use Javascript in a similar way, if you'd like. (no Ajax required.)

---------
EDIT (referring to John's post below):
Yes, Javascript must be enabled, so a PHP or other solution is better in that sense; if the method used does require javascript, always have a backup plain-html link to an equivalent page, or some users (including search engine crawlers) will not be able to access your content.
jscheuer1
01-01-2010, 09:33 PM
As long as we are adding on here, it cannot be stressed enough that those without javascript enabled/available will not be able to use your menu at all if it is imported via javascript of any kind.