Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
Browse files

added distance to orgentation

  • Loading branch information...
commit 1db8b32d497b2a11815edce264a2cc28bc5b532b 1 parent 1c9bbf7
Dennis Mårtensson authored
Showing with 29 additions and 38 deletions.
  1. +7 −3 README.md
  2. +0 −15 dropdown.css
  3. +15 −3 dropdown.js
  4. +7 −17 test.html
View
10 README.md
@@ -6,18 +6,22 @@ This is a dropdown menu element, It is build to be esay to use and flexible.
Example:
```html
-<x-dropdown id="x-dropdown" data-width="150">
+<x-dropdown id="x-dropdown" data-width="200">
<ul>
<li><a href="#" data-action-type="openMenu">[show menu]</a>
- <ul selected="false" orgentation="right">
+ <ul selected="false" orgentation="" distance="">
<li><a>1nd lev - 1</a></li>
<li><a>2nd lev - 2</a></li>
+ <li><a>1nd lev - 3</a></li>
+ <li><a>1nd lev - 4</a></li>
<li>
<ul>
<li><a href="#" data-action-type="openMenu">[show sub]</a>
- <ul selected="false" data-orgentation="">
+ <ul selected="false" orgentation="right" distance="20">
<li><a>1nd lev - 1</a></li>
<li><a>2nd lev - 2</a></li>
+ <li><a>1nd lev - 3</a></li>
+ <li><a>1nd lev - 4</a></li>
</ul>
</li>
</ul>
View
15 dropdown.css
@@ -8,19 +8,4 @@ x-dropdown ul li ul[selected="false"] {
x-dropdown ul li ul[selected="true"] {
display: block;
-}
-
-x-dropdown ul[orgentation="right"] {
- padding: 0px;
- padding-left: 100px;
-}
-
-x-dropdown ul[orgentation="left"] {
- padding: 0px;
- padding-right: 100px;
-}
-
-x-dropdown ul[orgentation="top"] {
- padding: 0px;
- padding-bottom: 100px;
}
View
18 dropdown.js
@@ -2,11 +2,10 @@ xtag.register('x-dropdown', {
onCreate: function() {
},
-
+
onInsert: function() {
var width = this.getAttribute('data-width');
- var orgentation = this.getAttribute('data-orgentation');
if (typeof window.innerWidth != 'undefined') {
var viewportwidth = window.innerWidth;
@@ -18,6 +17,19 @@ xtag.register('x-dropdown', {
this.getElementsByTagName('ul')[0].style.maxWidth = width + 'px';
+ xtag.query(document, 'ul').forEach(function(element){
+ var orgen = element.getAttribute('orgentation');
+ var distance = element.getAttribute('distance');
+
+ if(orgen == 'right'){
+ element.style.paddingLeft= distance + 'px';
+ }else if(orgen == 'left'){
+ element.style.paddingRight= distance + 'px';
+ }else if(orgen == 'top'){
+ element.style.paddingBottom= distance + 'px';
+ }
+ });
+
},
events: {
@@ -52,7 +64,7 @@ xtag.register('x-dropdown', {
},
setters: {
- // Add DOM object setters
+
},
methods: {
openMenu: function(link) {
View
24 test.html
@@ -16,34 +16,24 @@
<x-dropdown id="x-dropdown" data-width="">
<ul>
<li><a href="#" data-action-type="openMenu">[show menu]</a>
- <ul selected="false" orgentation="right">
+ <ul selected="false" orgentation="" distance="">
<li><a>1nd lev - 1</a></li>
- <li><a>2nd lev - 2</a></li>
+ <li><a>1nd lev - 2</a></li>
<li><a>1nd lev - 3</a></li>
<li><a>1nd lev - 4</a></li>
<li><a>1nd lev - 5</a></li>
<li><a>1nd lev - 6</a></li>
<li><a>1nd lev - 7</a></li>
<li><a>1nd lev - 8</a></li>
- <li><a>1nd lev - 9</a></li>
- <li><a>1nd lev - 10</a></li>
- <li><a>1nd lev - 11</a></li>
+
<li>
<ul>
<li><a href="#" data-action-type="openMenu">[show sub]</a>
- <ul selected="false" data-orgentation="right">
- <li><a>1nd lev - 1</a></li>
+ <ul selected="false" orgentation="right" distance="20">
+ <li><a>2nd lev - 1</a></li>
<li><a>2nd lev - 2</a></li>
- <li><a>1nd lev - 3</a></li>
- <li><a>1nd lev - 4</a></li>
- <li><a>1nd lev - 5</a></li>
- <li><a>1nd lev - 6</a></li>
- <li><a>1nd lev - 7</a></li>
- <li><a>1nd lev - 8</a></li>
- <li><a>1nd lev - 9</a></li>
- <li><a>1nd lev - 10</a></li>
- <li><a>1nd lev - 11</a></li>
- <li><a>1nd lev - 12</a></li>
+ <li><a>2nd lev - 3</a></li>
+ <li><a>2nd lev - 4</a></li>
</ul>
</li>
</ul>
Please sign in to comment.
Something went wrong with that request. Please try again.