Skip to content

Commit

Permalink
Added accordion menus to the sfSmallscreen plug-in.
Browse files Browse the repository at this point in the history
  • Loading branch information
@mehrpadin
mehrpadin committed Jun 8, 2013
1 parent fa4dcd0 commit 8d2d1ad
Show file tree
Hide file tree
Showing 17 changed files with 890 additions and 160 deletions.
20 changes: 20 additions & 0 deletions css/superfish-smallscreen.css
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,20 @@
ul.sf-menu.sf-accordion {
display: none;
position: absolute;
}
ul.sf-menu.sf-accordion,
ul.sf-menu.sf-accordion ul,
ul.sf-menu.sf-accordion li {
float: left;
width: 100%;
}
ul.sf-menu.sf-accordion ul {
margin: 0;
padding: 0;
}
ul.sf-menu.sf-accordion.sf-expanded,
ul.sf-menu.sf-accordion li.sf-expanded > ul {
left: auto !important;
position: relative;
top: auto !important;
}
344 changes: 253 additions & 91 deletions sfsmallscreen.js
View file

Large diffs are not rendered by default.

39 changes: 39 additions & 0 deletions style/SAMPLES/STYLE_DIRECTORY.txt
View file
Original file line number Diff line number Diff line change
Expand Up @@ -62,6 +62,45 @@
background: #c0c0c0;
outline: 0;
}
.sf-menu.sf-style-STYLENAME li:hover > ul,
.sf-menu.sf-style-STYLENAME li.sfHover > ul {
top: 40px;
}
.sf-menu.sf-style-STYLENAME .sf-sub-indicator {
background-image: url('../images/dropdown-arrows.png');
}
div.sf-accordion-toggle.sf-style-STYLENAME a {
background: #f0f0f0;
color: #0000ff;
padding: 1em;
}
div.sf-accordion-toggle.sf-style-STYLENAME a.sf-expanded,
.sf-menu.sf-style-STYLENAME.sf-accordion li.sf-expanded {
background-color: #c0c0c0;
}
div.sf-accordion-toggle.sf-style-STYLENAME a.sf-expanded,
.sf-menu.sf-style-STYLENAME.sf-accordion li.sf-expanded > a {
font-weight: bold;
}
.sf-menu.sf-style-STYLENAME.sf-accordion li a.sf-accordion-button {
font-weight: bold;
position: absolute;
right: 0;
top: 0;
z-index: 499;
}
.sf-menu.sf-style-STYLENAME.sf-accordion li li a {
padding-left: 2em;
}
.sf-menu.sf-style-STYLENAME.sf-accordion li li li a {
padding-left: 3em;
}
.sf-menu.sf-style-STYLENAME.sf-accordion li li li li a {
padding-left: 4em;
}
.sf-menu.sf-style-STYLENAME.sf-accordion li li li li li a {
padding-left: 5em;
}
.sf-menu.sf-style-STYLENAME ul.sf-megamenu li.sf-megamenu-wrapper ol,
.sf-menu.sf-style-STYLENAME ul.sf-megamenu li.sf-megamenu-wrapper ol li {
margin: 0;
Expand Down
103 changes: 71 additions & 32 deletions style/SAMPLES/THEMES.txt
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@
*
* Instructions:
*
* 1. Change the #superfish-1 (below) to the ID of your Superfish menu.
* 1. Change the #block-superfish-1 (below) to the ID of your Superfish menu.
*
* 2. Add the CSS to your theme, either as a separate CSS file or as a part of the main CSS file.
*
Expand All @@ -12,97 +12,136 @@
*
*/

#superfish-1.sf-style-none {
#block-superfish-1 .sf-style-none {
float: left;
margin: 0;
padding: 0;
}
#superfish-1.sf-style-none.sf-navbar {
#block-superfish-1 .sf-style-none.sf-navbar {
width: 100%;
}
#superfish-1.sf-style-none ul {
#block-superfish-1 .sf-style-none ul {
padding-left: 0;
}
#superfish-1.sf-style-none a {
#block-superfish-1 .sf-style-none a {
color: #0000ff;
padding: 0.75em 1em;
}
#superfish-1.sf-style-none a.sf-with-ul {
#block-superfish-1 .sf-style-none a.sf-with-ul {
padding-right: 2.25em;
}
#superfish-1.sf-style-none.rtl a.sf-with-ul {
#block-superfish-1 .sf-style-none.rtl a.sf-with-ul {
padding-left: 2.25em;
padding-right: 1em;
}
#superfish-1.sf-style-none span.sf-description {
#block-superfish-1 .sf-style-none span.sf-description {
color: #0000ff;
display: block;
font-size: 0.8em;
line-height: 1.5em;
margin: 5px 0 0 5px;
padding: 0;
}
#superfish-1.sf-style-none li,
#superfish-1.sf-style-none.sf-navbar {
#block-superfish-1 .sf-style-none li,
#block-superfish-1 .sf-style-none.sf-navbar {
background: #f0f0f0;
}
#superfish-1.sf-style-none li li {
#block-superfish-1 .sf-style-none li li {
background: #e0e0e0;
}
#superfish-1.sf-style-none li li li {
#block-superfish-1 .sf-style-none li li li {
background: #d0d0d0;
}
#superfish-1.sf-style-none li:hover,
#superfish-1.sf-style-none li.sfHover,
#superfish-1.sf-style-none a:focus,
#superfish-1.sf-style-none a:hover,
#superfish-1.sf-style-none a:active {
#block-superfish-1 .sf-style-none li:hover,
#block-superfish-1 .sf-style-none li.sfHover,
#block-superfish-1 .sf-style-none a:focus,
#block-superfish-1 .sf-style-none a:hover,
#block-superfish-1 .sf-style-none a:active {
background: #c0c0c0;
outline: 0;
}
#superfish-1.sf-style-none ul.sf-megamenu li.sf-megamenu-wrapper ol,
#superfish-1.sf-style-none ul.sf-megamenu li.sf-megamenu-wrapper ol li {
#block-superfish-1 .sf-style-none li:hover > ul,
#block-superfish-1 .sf-style-none li.sfHover > ul {
top: 40px;
}
#block-superfish-1 .sf-style-none .sf-sub-indicator {
background-image: url('../images/dropdown-arrows.png');
}
#block-superfish-1 div.sf-accordion-toggle.sf-style-none a {
background: #f0f0f0;
color: #0000ff;
padding: 1em;
}
#block-superfish-1 div.sf-accordion-toggle.sf-style-none a.sf-expanded,
#block-superfish-1 .sf-menu.sf-style-none.sf-accordion li.sf-expanded {
background-color: #c0c0c0;
}
#block-superfish-1 div.sf-accordion-toggle.sf-style-none a.sf-expanded,
#block-superfish-1 .sf-menu.sf-style-none.sf-accordion li.sf-expanded > a {
font-weight: bold;
}
#block-superfish-1 .sf-menu.sf-style-none.sf-accordion li a.sf-accordion-button {
font-weight: bold;
position: absolute;
right: 0;
top: 0;
z-index: 499;
}
#block-superfish-1 .sf-menu.sf-style-none.sf-accordion li li a {
padding-left: 2em;
}
#block-superfish-1 .sf-menu.sf-style-none.sf-accordion li li li a {
padding-left: 3em;
}
#block-superfish-1 .sf-menu.sf-style-none.sf-accordion li li li li a {
padding-left: 4em;
}
#block-superfish-1 .sf-menu.sf-style-none.sf-accordion li li li li li a {
padding-left: 5em;
}
#block-superfish-1 .sf-style-none ul.sf-megamenu li.sf-megamenu-wrapper ol,
#block-superfish-1 .sf-style-none ul.sf-megamenu li.sf-megamenu-wrapper ol li {
margin: 0;
padding: 0;
}
#superfish-1.sf-style-none ul.sf-megamenu li.sf-megamenu-wrapper a.menuparent {
#block-superfish-1 .sf-style-none ul.sf-megamenu li.sf-megamenu-wrapper a.menuparent {
font-weight: bold;
}
#superfish-1.sf-style-none ul.sf-megamenu li.sf-megamenu-wrapper ol li.sf-megamenu-column {
#block-superfish-1 .sf-style-none ul.sf-megamenu li.sf-megamenu-wrapper ol li.sf-megamenu-column {
display: inline;
float: left;
width: 12em;
}
#superfish-1.sf-style-none.rtl ul.sf-megamenu li.sf-megamenu-wrapper ol li.sf-megamenu-column {
#block-superfish-1 .sf-style-none.rtl ul.sf-megamenu li.sf-megamenu-wrapper ol li.sf-megamenu-column {
float: right;
}
#superfish-1.sf-style-none li.sf-parent-children-1 ul.sf-megamenu {
#block-superfish-1 .sf-style-none li.sf-parent-children-1 ul.sf-megamenu {
width: 12em;
}
#superfish-1.sf-style-none li.sf-parent-children-2 ul.sf-megamenu {
#block-superfish-1 .sf-style-none li.sf-parent-children-2 ul.sf-megamenu {
width: 24em;
}
#superfish-1.sf-style-none li.sf-parent-children-3 ul.sf-megamenu {
#block-superfish-1 .sf-style-none li.sf-parent-children-3 ul.sf-megamenu {
width: 36em;
}
#superfish-1.sf-style-none li.sf-parent-children-4 ul.sf-megamenu {
#block-superfish-1 .sf-style-none li.sf-parent-children-4 ul.sf-megamenu {
width: 48em;
}
#superfish-1.sf-style-none li.sf-parent-children-5 ul.sf-megamenu {
#block-superfish-1 .sf-style-none li.sf-parent-children-5 ul.sf-megamenu {
width: 60em;
}
#superfish-1.sf-style-none li.sf-parent-children-6 ul.sf-megamenu {
#block-superfish-1 .sf-style-none li.sf-parent-children-6 ul.sf-megamenu {
width: 72em;
}
#superfish-1.sf-style-none li.sf-parent-children-7 ul.sf-megamenu {
#block-superfish-1 .sf-style-none li.sf-parent-children-7 ul.sf-megamenu {
width: 84em;
}
#superfish-1.sf-style-none li.sf-parent-children-8 ul.sf-megamenu {
#block-superfish-1 .sf-style-none li.sf-parent-children-8 ul.sf-megamenu {
width: 96em;
}
#superfish-1.sf-style-none li.sf-parent-children-9 ul.sf-megamenu {
#block-superfish-1 .sf-style-none li.sf-parent-children-9 ul.sf-megamenu {
width: 108em;
}
#superfish-1.sf-style-none li.sf-parent-children-10 ul.sf-megamenu {
#block-superfish-1 .sf-style-none li.sf-parent-children-10 ul.sf-megamenu {
width: 120em;
}
33 changes: 33 additions & 0 deletions style/blue.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -58,6 +58,39 @@
.sf-menu.sf-style-blue.sf-navbar li ul li ul {
background-color: transparent;
}
div.sf-accordion-toggle.sf-style-blue a {
background: #095cb1;
border: 1px outset #003973;
color: #ffffff;
padding: 1em;
}
div.sf-accordion-toggle.sf-style-blue a.sf-expanded,
.sf-menu.sf-style-blue.sf-accordion li.sf-expanded {
background-color: #3270c5;
}
div.sf-accordion-toggle.sf-style-blue a.sf-expanded,
.sf-menu.sf-style-blue.sf-accordion li.sf-expanded > a {
font-weight: bold;
}
.sf-menu.sf-style-blue.sf-accordion li a.sf-accordion-button {
font-weight: bold;
position: absolute;
right: 0;
top: 0;
z-index: 499;
}
.sf-menu.sf-style-blue.sf-accordion li li a {
padding-left: 2em;
}
.sf-menu.sf-style-blue.sf-accordion li li li a {
padding-left: 3em;
}
.sf-menu.sf-style-blue.sf-accordion li li li li a {
padding-left: 4em;
}
.sf-menu.sf-style-blue.sf-accordion li li li li a {
padding-left: 5em;
}
.sf-menu.sf-style-blue ul.sf-megamenu li.sf-megamenu-wrapper ol,
.sf-menu.sf-style-blue ul.sf-megamenu li.sf-megamenu-wrapper ol li {
margin: 0;
Expand Down
33 changes: 33 additions & 0 deletions style/coffee.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -59,6 +59,39 @@
.sf-menu.sf-style-coffee.sf-navbar li ul li ul {
background-color: transparent;
}
div.sf-accordion-toggle.sf-style-coffee a {
background: #210c02;
border: 1px solid #381301;
color: #f1dec6;
padding: 1em;
}
div.sf-accordion-toggle.sf-style-coffee a.sf-expanded,
.sf-menu.sf-style-coffee.sf-accordion li.sf-expanded {
background-color: #52250f;
}
div.sf-accordion-toggle.sf-style-coffee a.sf-expanded,
.sf-menu.sf-style-coffee.sf-accordion li.sf-expanded > a {
font-weight: bold;
}
.sf-menu.sf-style-coffee.sf-accordion li a.sf-accordion-button {
font-weight: bold;
position: absolute;
right: 0;
top: 0;
z-index: 499;
}
.sf-menu.sf-style-coffee.sf-accordion li li a {
padding-left: 2em;
}
.sf-menu.sf-style-coffee.sf-accordion li li li a {
padding-left: 3em;
}
.sf-menu.sf-style-coffee.sf-accordion li li li li a {
padding-left: 4em;
}
.sf-menu.sf-style-coffee.sf-accordion li li li li a {
padding-left: 5em;
}
.sf-menu.sf-style-coffee ul.sf-megamenu li.sf-megamenu-wrapper ol,
.sf-menu.sf-style-coffee ul.sf-megamenu li.sf-megamenu-wrapper ol li {
margin: 0;
Expand Down
Loading

0 comments on commit 8d2d1ad

Please sign in to comment.