A directory read CMS with directory dynamic tree menu with complete website template!
Hi!. The latest addition to my usefull scripts is this great directory read tree menu example html and php script.
Why is it the best? Well I have seem many out there and they all are almost impossible to style of change in anything other than UL or OL. And other quirks like directories listing below page files because of the alphabetical sorting among other things they are mostly tailored for just viewing files.
This script is made for website navigation as it has 2 methods built in.
You can use the GET method and include the file in the webpage or you can set it to navigate directly to static pages.
Or even better yet the CMXads no SQL way using file get contents or file fopen you know what I mean and then getting the content from the delimited text file and distributing the content around the page with the returned content from list or foreach variables. Of course each page has its own file thats one of the ways we keep it efficient.
What would have made the download even more versatile if I added and editor to post content to a file. But you guys can do that easy enough.
I used a combination of 2 different directory read methods not only to show as an example but it is the best way and easiest way to be able to change the menu styling to any type of menu you want to use with out the recursion repeating issues commonly found with most methods.
It is designed for website use with a content directory with as many subdirectories in that main content folder as you want. So you would say it is 2 levels only. But can be modified if you are a coder.
The script removes the file ext and adds it back just for the include path. You also have the option to scramble the file path visible in the browser. Checkout the demo. Dont know what the directory name is or real file name.
I have included a great looking and functioning java script menu system but you can even use a pure css styling as well.
I have packed it all up in a great fluid css website template to show you how easy it is to use.
Below is the basic script with the php and just the menus js and css for the complete website example click the example link to check it out. And dont forget to download the file with all the great features in my new directory read dropdown menu instant website script example.
Hope you like it and use it and find it useful!
Click here for full website demo using this menu and this is what is in the full download!.
1: <!doctype html>
2: <html lang="en">
3: <head><title></title>
4: <meta charset="UTF-8">
5: <meta name="description" content="Free script example and website a total directory tree content read with custom dropdown menus links. Can set for directory page include or direct page linking. Cant get much easier and its Xpandable the CMXads no SQL way. Easy to change and style menu unlike no other system coded.">
6: <meta name="robots" content="index">
7:
8: <style type="text/css">
9: /* border: 1px solid black;*/
10: .dropv li {
11: display:inline;
12: background-color:#eee;
13: border:1px solid;
14: border-color:#f3f3f3 #bbb #bbb #f3f3f3;
15: margin:0;
16: padding:.5em;
17: zoom: 1;
18: }
19:
20: .dropv, .dropv ul {padding: 0; margin: 0; list-style: none;}
21: .dropv a {display: inline; color: #000000; text-decoration:none; font-weight :bold;}
22: .dropv li {float: left; width:144px;padding: 0px 2px 2px 0px;color: yellow;} /* all list items */
23: .dropv li ul {position: absolute; background: #ffffff;
24: padding: 0px 0px 0px 1px; width:143px; left: -9999px;} /* second-level lists */
25: .dropv li:hover ul {left: 80px;} /* nest list under hovered list items */
26: .dropv li ul li a {color: blue;text-decoration: none; display: block;}
27: .dropv li ul li a:hover {color: white; background:#000000;} /* Action for drop-down list */
28:
29: #masterdiv{
30: width:180px;
31: float:left;
32: }
33:
34: /*LEFT DROPDOWN MENU*/
35: .menutitle{
36: border-top: 1px solid #96d1f8;
37: background: #65a9d7;
38: background: -webkit-gradient(linear, left top, left bottom, from(#3e779d), to(#65a9d7));
39: background: -webkit-linear-gradient(top, #3e779d, #65a9d7);
40: background: -o-linear-gradient(top, #3e779d, #65a9d7);
41: -webkit-border-radius: 8px;
42:
43: border-radius: 8px;
44: -webkit-box-shadow: rgba(0,0,0,1) 0 1px 0;
45:
46: box-shadow: rgba(0,0,0,1) 0 1px 0;
47: text-shadow: rgba(0,0,0,.4) 0 1px 0;
48: cursor:pointer;
49: margin-bottom: 5px;
50: margin-right: 5px;
51:
52: color:#000000;
53: width:160px;
54: padding:2px;
55: font-style:italic;
56: font-size:14px;
57: font-family: "Myriad Pro", "Trebuchet MS", Arial;
58: text-align:center;
59: font-weight:bold;
60: /*/*/border:1px solid #000000;/* */
61: }
62:
63: .level2{
64: margin-bottom: 0.5em;
65: }
66: body{
67: margin:0;
68: padding:0;
69: line-height: 1.5em;
70: }
71:
72:
73:
74: b{font-size: 110%;}
75: em{color: red;}
76:
77:
78: #topsection{
79: background: #EAEAEA;
80: height: 90px; /*Height of top section*/
81: }
82:
83: #topsection h1{
84: font-size: 28px;
85: margin: 0;
86: padding-top: 15px;
87: }
88:
89:
90:
91: #contentwrapper{
92: float: left;
93: width: 100%;
94: }
95:
96: #contentcolumn{
97: margin-right: 200px; /*Set right margin to RightColumnWidth*/
98: }
99:
100: #rightcolumn{
101: float: left;
102: width: 200px; /*Width of right column in pixels*/
103: margin-left: -200px; /*Set left margin to -(RightColumnWidth) */
104: background: #EAEAEA;
105: }
106:
107: #footer{
108: clear: both;
109: width: 100%;
110: background: black;
111: color: #FFF;
112: text-align: center;
113: padding: 4px 0;
114: }
115:
116: #footer a{
117: color: #FFFF80;
118: }
119:
120: .innertube{
121: margin: 10px; /*Margins for inner DIV inside each column (to provide padding)*/
122: margin-top: 0;
123: }
124:
125:
126: </style>
127: <script type="text/javascript">
128:
129: var persistmenu="yes" //"yes" or "no". Make sure each SPAN content contains an incrementing ID starting at 1 (id="sub1", id="sub2", etc)
130: var persisttype="sitewide" //enter "sitewide" for menu to persist across site, "local" for this page only
131:
132: if (document.getElementById){
133: document.write('<style type="text/css">\n')
134: document.write('.level2{display: none;}\n')
135: document.write('</style>\n')
136: }
137:
138: function SwitchMenu(obj){
139: if(document.getElementById){
140: var el = document.getElementById(obj);
141: var ar = document.getElementById("masterdiv").getElementsByTagName("span");
142: if(el.style.display != "block"){
143: for (var i=0; i<ar.length; i++){
144: if (ar[i].className=="level2")
145: ar[i].style.display = "none";
146: }
147: el.style.display = "block";
148: }else{
149: el.style.display = "none";
150: }
151: }
152: }
153:
154: function get_cookie(Name) {
155: var search = Name + "="
156: var returnvalue = "";
157: if (document.cookie.length > 0) {
158: offset = document.cookie.indexOf(search)
159: if (offset != -1) {
160: offset += search.length
161: end = document.cookie.indexOf(";", offset);
162: if (end == -1) end = document.cookie.length;
163: returnvalue=unescape(document.cookie.substring(offset, end))
164: }
165: }
166: return returnvalue;
167: }
168:
169: function onloadfunction(){
170: if (persistmenu=="yes"){
171: var cookiename=(persisttype=="sitewide")? "switchmenu" : window.location.pathname
172: var cookievalue=get_cookie(cookiename)
173: if (cookievalue!="")
174: document.getElementById(cookievalue).style.display="block"
175: }
176: }
177:
178: function savemenustate(){
179: var inc=1, blockid=""
180: while (document.getElementById("sub"+inc)){
181: if (document.getElementById("sub"+inc).style.display=="block"){
182: blockid="sub"+inc
183: break
184: }
185: inc++
186: }
187: var cookiename=(persisttype=="sitewide")? "switchmenu" : window.location.pathname
188: var cookievalue=(persisttype=="sitewide")? blockid+";path=/" : blockid
189: document.cookie=cookiename+"="+cookievalue
190: }
191:
192: if (window.addEventListener)
193: window.addEventListener("load", onloadfunction, false)
194: else if (window.attachEvent)
195: window.attachEvent("onload", onloadfunction)
196: else if (document.getElementById)
197: window.onload=onloadfunction
198:
199: if (persistmenu=="yes" && document.getElementById)
200: window.onunload=savemenustate
201: </script>
202:
203:
204: <script type="text/javascript">
205: /*** Temporary text filler function. Remove when deploying template. ***/
206: var gibberish=["Content loading using get. Can use get file contents or file and load array content anywhere you place variables too!", "Welcome to CMXads directory read demo and instant website", "Demo content."]
207: function filltext(words){
208: for (var i=0; i<words; i++)
209: document.write(gibberish[Math.floor(Math.random()*3)]+" ")
210: }
211: </script>
212:
213: </head>
214: <body>
215: <div id="maincontainer">
216:
217: <div id="topsection"><div class="innertube"><h1>CMXads.com Directory tree read menu script example demo website.</h1></div></div>
218:
219: <div id="contentwrapper">
220: <div id="contentcolumn">
221: <div class="innertube">
222: <h2>Click on a link to load directory read content using get method<br>
223: Checkout the url I added the option to scramble file path.</h2>
224:
225:
226: <?php
227: //load page as an include using get set empty var to anything
228: //leve empty to navigate to the static page itself
229: $useinclude='1';
230: //can set a default page or do it in htaccess
231: $default='content/page1';
232:
233: //Want to scramble file path? use simple str_rot13
234: //only works with and for use with GET page action
235:
236: //scrambles alpha only leaves other character as is
237: //str_rot13 is 2 way no reverse needed
238: //enable rot13 set to 1
239: $rot13='1';
240: if($rot13){
241: $default=str_rot13($default);
242: }
243:
244: //this little function will clean the file name for links
245: //removes file extensiom and replaces - or _
246: function Title($filename) {
247: $title = substr($filename, 0, strlen($filename) - 4);
248: $title = str_replace(array('-','_'), ' ', $title);
249: $title = ucwords($title);
250: return $title;
251: }
252: ////////////////////////////////////////////////////////
253: //adds ext back onto file name for include and checks if file exists
254: function make_file_name($action,$ext) {
255: $f_name = $action.$ext;
256: if(!file_exists($f_name)){
257: return false;
258: }else{
259: return $f_name;
260: }
261: }
262: ///////////////////////////////////////////////
263:
264: //if ($useinclude && isset($_GET['page']) && file_exists($_GET['page'])) {
265: //include(trim($_GET['page']));
266: //}elseif($useinclude && file_exists($default)) {
267: //include($default);
268: //}
269:
270:
271: if (isset($_GET['page']) && !empty($_GET['page'])) {
272: $get_file=trim($_GET['page']);
273: if($rot13){
274: $get_file=str_rot13($get_file);
275: }
276: //echo $get_file;
277: //function below adds file ext and checks for file existence
278: if($file_name=make_file_name($get_file, '.php')){
279:
280: include($file_name);
281: }else{
282: if($rot13){
283: $default=str_rot13($default);
284: }
285: $default= make_file_name($default, '.php');
286: include($default);
287: }
288: }elseif(!isset($_GET['page']) && $useinclude){
289: if($rot13){
290: $default=str_rot13($default);
291: }
292: $default= make_file_name($default, '.php');
293: include($default);
294: }
295:
296:
297: ?>
298:
299:
300:
301: </div>
302: </div>
303: </div>
304:
305: <div id="rightcolumn">
306: <div class="innertube"><b><em>Cool easy style menu.</em></b>
307: <?php
308: //if using include can set your default main page Ex:index.php
309: $page='';
310: //your starting directory to read from if root
311: // $link = './';
312: //your starting directory to read from
313: $link = 'content';
314:
315: //links division can float left or right. see css
316: echo '<div id="masterdiv">';
317: //link button div see css to restyle
318: echo "<div class=\"menutitle\" onclick=\"SwitchMenu('sub1')\">$link</div>";
319: //link span starts at id=sub1
320: echo "<span class=\"level2\" id=\"sub1\">";
321: //this method gets one directory contents
322: $handle=opendir($link);
323: $arraynumber = 0;
324: while ($file = readdir($handle)) {
325: if ($file == '.' || $file == '..') { }
326: else { $itemname[$arraynumber] = $file;}
327: $arraynumber++;
328: }
329: closedir($handle);
330: asort ($itemname); //sorting the page alphabetically
331: reset ($itemname);
332:
333: $a = '0';
334: while (list ($key, $val) = each ($itemname)) {
335: if(!is_dir("$link/$val")){
336: if ($useinclude) {
337: if($rot13){
338: $val1=str_rot13($val);
339: $link1=str_rot13($link);
340: }else{
341: $val1=$val;
342: $link1=$link;
343: }
344:
345: echo "<a href=\"$page?page=$link1/".substr($val1,0,-4)."\">".Title($val)."</a><br>";
346: }else{
347: // if($link[0]=='/'){
348: // $link=substr($link,1);
349: // }
350: echo "<a href=\"$link/$val\">".Title($val)."</a><br>";
351: }
352: $a++;
353: }
354: }
355: echo "</span>";
356:
357:
358: //start of subdirectory read using a second method for multiple directories
359: $file = scandir($link);
360: //print_r($file);
361: $c=count($file);
362: //start count at 2 for span increment in js
363: $f='2';
364: foreach($file as $item) {
365: if (is_dir("$link/$item")) {
366: //$fp="$link/$item";
367: //echo $item;
368: if ($item != '.' && $item != '..' ) {
369: $dir2= "$link/$item";
370: echo "<div class=\"menutitle\" onclick=\"SwitchMenu('sub$f')\">$item</div>";
371: echo "<span class=\"level2\" id=\"sub$f\">";
372: $handle2=opendir($dir2);
373: while ($file2 = readdir($handle2)) {
374: if ($file2 != '.' && $file2 != '..' ) {
375: if ($useinclude) {
376: if($rot13){
377: $dir3=str_rot13($dir2);
378: $file3=str_rot13($file2);
379: }else{
380: $dir3=$dir2;
381: $file3=$file2;
382: }
383:
384: echo "<a href=\"$page?page=$dir3/".substr($file3,0,-4)."\">".substr($file2,0,-4)."</a><br>";
385: }else{
386:
387:
388: if($dir2[0]=='/' || $dir2[1]=='/'){
389: $dir2=substr($dir2,1);
390: }
391: echo "<a href=\"$dir2/$file2\">".substr($file2,0,-4)."</a><br>";
392: }
393: }
394: }
395: echo "</span>";
396: $f++;
397: }
398: }
399: }
400: echo '</div>';
401:
402: ?>
403: <script type="text/javascript">filltext(14)</script></div>
404:
405: </div>
406:
407: <div id="footer"><a href="http://www.cmxads.com">CMXads.com No SQL Scripts and design services</a></div>
408:
409: </div>
410: </body>
411: </html>
412:
413:
Please help me I am handicapped and support myself
Donate With PayPal
Donate Bitcoin
Please donate and help the handicapped.
1Ev8n7R63yqkKsFTrztufvuVah44MCbzpN
There are no comments yet please leave me a nice comment today!