Skip to content

Commit

Permalink
Actualizar readme.html, readme.md y 2 más archivos...
Browse files Browse the repository at this point in the history
  • Loading branch information
@lamuzzachiodi
lamuzzachiodi committed Oct 18, 2021
0 parents commit c6ddd88
Show file tree
Hide file tree
Showing 4 changed files with 1,109 additions and 0 deletions.
389 changes: 389 additions & 0 deletions readme.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,389 @@
<!DOCTYPE html>
<html><head>
<title>readme</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<style type="text/css">
/* GitHub stylesheet for MarkdownPad (http://markdownpad.com) */
/* Author: Nicolas Hery - http://nicolashery.com */
/* Version: b13fe65ca28d2e568c6ed5d7f06581183df8f2ff */
/* Source: https://github.com/nicolahery/markdownpad-github */

/* RESET
=============================================================================*/

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
}

/* BODY
=============================================================================*/

body {
font-family: Helvetica, arial, freesans, clean, sans-serif;
font-size: 14px;
line-height: 1.6;
color: #333;
background-color: #fff;
padding: 20px;
max-width: 960px;
margin: 0 auto;
}

body>*:first-child {
margin-top: 0 !important;
}

body>*:last-child {
margin-bottom: 0 !important;
}

/* BLOCKS
=============================================================================*/

p, blockquote, ul, ol, dl, table, pre {
margin: 15px 0;
}

/* HEADERS
=============================================================================*/

h1, h2, h3, h4, h5, h6 {
margin: 20px 0 10px;
padding: 0;
font-weight: bold;
-webkit-font-smoothing: antialiased;
}

h1 tt, h1 code, h2 tt, h2 code, h3 tt, h3 code, h4 tt, h4 code, h5 tt, h5 code, h6 tt, h6 code {
font-size: inherit;
}

h1 {
font-size: 28px;
color: #000;
}

h2 {
font-size: 24px;
border-bottom: 1px solid #ccc;
color: #000;
}

h3 {
font-size: 18px;
}

h4 {
font-size: 16px;
}

h5 {
font-size: 14px;
}

h6 {
color: #777;
font-size: 14px;
}

body>h2:first-child, body>h1:first-child, body>h1:first-child+h2, body>h3:first-child, body>h4:first-child, body>h5:first-child, body>h6:first-child {
margin-top: 0;
padding-top: 0;
}

a:first-child h1, a:first-child h2, a:first-child h3, a:first-child h4, a:first-child h5, a:first-child h6 {
margin-top: 0;
padding-top: 0;
}

h1+p, h2+p, h3+p, h4+p, h5+p, h6+p {
margin-top: 10px;
}

/* LINKS
=============================================================================*/

a {
color: #4183C4;
text-decoration: none;
}

a:hover {
text-decoration: underline;
}

/* LISTS
=============================================================================*/

ul, ol {
padding-left: 30px;
}

ul li > :first-child,
ol li > :first-child,
ul li ul:first-of-type,
ol li ol:first-of-type,
ul li ol:first-of-type,
ol li ul:first-of-type {
margin-top: 0px;
}

ul ul, ul ol, ol ol, ol ul {
margin-bottom: 0;
}

dl {
padding: 0;
}

dl dt {
font-size: 14px;
font-weight: bold;
font-style: italic;
padding: 0;
margin: 15px 0 5px;
}

dl dt:first-child {
padding: 0;
}

dl dt>:first-child {
margin-top: 0px;
}

dl dt>:last-child {
margin-bottom: 0px;
}

dl dd {
margin: 0 0 15px;
padding: 0 15px;
}

dl dd>:first-child {
margin-top: 0px;
}

dl dd>:last-child {
margin-bottom: 0px;
}

/* CODE
=============================================================================*/

pre, code, tt {
font-size: 12px;
font-family: Consolas, "Liberation Mono", Courier, monospace;
}

code, tt {
margin: 0 0px;
padding: 0px 0px;
white-space: nowrap;
border: 1px solid #eaeaea;
background-color: #f8f8f8;
border-radius: 3px;
}

pre>code {
margin: 0;
padding: 0;
white-space: pre;
border: none;
background: transparent;
}

pre {
background-color: #f8f8f8;
border: 1px solid #ccc;
font-size: 13px;
line-height: 19px;
overflow: auto;
padding: 6px 10px;
border-radius: 3px;
}

pre code, pre tt {
background-color: transparent;
border: none;
}

kbd {
-moz-border-bottom-colors: none;
-moz-border-left-colors: none;
-moz-border-right-colors: none;
-moz-border-top-colors: none;
background-color: #DDDDDD;
background-image: linear-gradient(#F1F1F1, #DDDDDD);
background-repeat: repeat-x;
border-color: #DDDDDD #CCCCCC #CCCCCC #DDDDDD;
border-image: none;
border-radius: 2px 2px 2px 2px;
border-style: solid;
border-width: 1px;
font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
line-height: 10px;
padding: 1px 4px;
}

/* QUOTES
=============================================================================*/

blockquote {
border-left: 4px solid #DDD;
padding: 0 15px;
color: #777;
}

blockquote>:first-child {
margin-top: 0px;
}

blockquote>:last-child {
margin-bottom: 0px;
}

/* HORIZONTAL RULES
=============================================================================*/

hr {
clear: both;
margin: 15px 0;
height: 0px;
overflow: hidden;
border: none;
background: transparent;
border-bottom: 4px solid #ddd;
padding: 0;
}

/* TABLES
=============================================================================*/

table th {
font-weight: bold;
}

table th, table td {
border: 1px solid #ccc;
padding: 6px 13px;
}

table tr {
border-top: 1px solid #ccc;
background-color: #fff;
}

table tr:nth-child(2n) {
background-color: #f8f8f8;
}

/* IMAGES
=============================================================================*/

img {
max-width: 100%
}
</style>
<!-- base href="file:///C:/repositorio/w3-ddmenu/" -->
</head>
<body>
<h1>What is w3-ddmenu ?</h1>
<p>It is a drilldown menu to be used with <strong><em><a href="https://www.w3schools.com/w3css/" title="w3.css">w3.css</a></em></strong> based on <strong><em><a href="http://www.dynamicdrive.com/dynamicindex1/drilldownmenu.htm" title="Drill Down Menu v1.6">Drill Down Menu v1.6- (c) Dynamic Drive DHTML</a></em></strong>.</p>
<p>Thought to be as simple as possible, everything is contained in a single file.</p>
<hr>
<h1>How does it work ?</h1>
<p>This script convert a nested UL list contained inside a DIV element into a drilldown menu.</p>
<p>The menu is constituted by three parts.</p>
<p>A top panel with a breadcrumb trail (<strong><em>"crumb"</em></strong>).</p>
<p>The menu itself (<strong><em>"menu"</em></strong>).</p>
<p>The body containing both (<strong><em>"body"</em></strong>).</p>
<p>You call the constructor function w3_drilldownmenu() to initialize a the menu. The format is:</p>
<pre><code>var uniquevariable=new w3_drilldownmenu(options)
</code></pre>

<p>Where "uniquevariable" should be an unique variable for each instance of menu.</p>
<p>So, for example, as seen in the first example :</p>
<pre><code>var menu = new w3_drilldownmenu({
menu:{id:'drillmenu'},
crumb:{id:'drillcrumb'},
body:{id:'drillbody'},
});
</code></pre>

<p>The only mandatory options are the "id" of each of them.</p>
<p>In the second example you can see the rest of the options.</p>
<h3>Options for each section :</h3>
<ul>
<li><strong>menu</strong>: title , titlebg, titletxt, bg, border, txt, backtxt, height, width</li>
<li><strong>crumb</strong>: title, bg , txt, border</li>
<li><strong>body</strong>: bg, txt, border</li>
</ul>
<p>Where:</p>
<ul>
<li><strong>title</strong> : text (for default, <em>"Home"</em>)</li>
<li><strong>titlebg</strong> : color of background of title</li>
<li><strong>titletxt</strong>: color of text of title</li>
<li><strong>bg</strong>: color of background</li>
<li><strong>txt</strong> : color of text</li>
<li><strong>border</strong>: color of border</li>
<li><strong>backtxt</strong>: text of the option to back a level (for default, <em>"Back"</em>)</li>
<li><strong>heigth</strong>: heigth of the menu (for default, <em>"auto"</em>)</li>
<li><strong>width</strong>: width of the menu (for default, <em>"auto"</em>)</li>
</ul>
<blockquote>
<p>The colors to use are those defined in the w3.css color classes
without the prefix "w3-".You can also use the predefined themes.</p>
</blockquote>
<p>For example, <em>"red"</em>, <em>"pale-green"</em>, <em>"theme-dark"</em>, etc.</p>
<p>The hover colors are defined, for simplicity, by inverting the colors of the text and the element's background.</p>
<h3>And other general options:</h3>
<ul>
<li><strong>speed</strong>: speed of animation (for default,<em>70</em>)</li>
<li>
<p><strong>persist</strong>: set if one UL is already chosen when the menu is loaded instead of the top level UL.
It have two suboptions:</p>
<ul>
<li><strong>enable</strong>: true or false, depending if you want activate it or not (for default, <em>false</em>)</li>
<li><strong>selectedulid</strong>: the "id" of the UL chosen when the
menu is loaded (for default, null). If null then is loaded the last UL
viewed. If not null, the value must be an valid "id". In both cases, <em>enable</em> must be defined as true.</li>
</ul>
<p>Examples:</p>
<p>Let be the menu <em>"drilldownmenu1"</em>, </p>
<pre><code>persist: {enable:true, selectedulid:'firstme'}
</code></pre>

<p>load the UL with the id <em>"firstme"</em> of the menu <em>"drilldownmenu1"</em>.</p>
<p>But,</p>
<pre><code>persist: {enable:true}
</code></pre>

<p>load the last UL selected before close the page containig the menu <em>"drilldownmenu1"</em>.</p>
</li>
</ul>
<h3>How to select an item programatically ?</h3>
<p>You can to select an item through code rather than user interface using </p>
<pre><code>menu.slidetoul('id')
</code></pre>

<p>This way you load the UL <em>"id"</em> of <em>"menu"</em>.
</p>
<p>For example,</p>
<pre><code>&lt;button class="w3-button w3-yellow w3-margin"
onclick="menu1.slidetoul('bc')"&gt;British Columbia&lt;/button&gt;
</code></pre>

<hr>
<h1>That's all.</h1>
<p>Your comments or suggestions are always welcome.</p>
<p><strong><em>Luis Alejandro Muzzachiodi (2021)</em></strong></p>




</body></html>
<!-- This document was created with MarkdownPad, the Markdown editor for Windows (http://markdownpad.com) -->
Loading

0 comments on commit c6ddd88

Please sign in to comment.