"
User:Vinoo/AccordionMenu2
From 2014.igem.org
< User:Vinoo(Difference between revisions)
m |
m |
||
| Line 3: | Line 3: | ||
$(document).ready(function(){ | $(document).ready(function(){ | ||
| - | $('#cssmenu > ul > li:has(ul)').addClass("has-sub"); | + | $('#cssmenu > ul > li:has(ul)').addClass("has-sub"); |
| - | $('#cssmenu > ul > li > a').click(function() { | + | $('#cssmenu > ul > li > a').click(function() { |
| - | + | var checkElement = $(this).next(); | |
| - | + | ||
| - | + | $('#cssmenu li').removeClass('active'); | |
| - | + | $(this).closest('li').addClass('active'); | |
| - | + | ||
| - | + | ||
| - | + | if((checkElement.is('ul')) && (checkElement.is(':visible'))) { | |
| - | + | $(this).closest('li').removeClass('active'); | |
| - | + | checkElement.slideUp('normal'); | |
| - | + | } | |
| - | + | ||
| - | + | if((checkElement.is('ul')) && (!checkElement.is(':visible'))) { | |
| - | + | $('#cssmenu ul ul:visible').slideUp('normal'); | |
| - | + | checkElement.slideDown('normal'); | |
| - | + | } | |
| - | + | ||
| - | + | if (checkElement.is('ul')) { | |
| - | + | return false; | |
| - | + | } else { | |
| - | + | return true; | |
| - | + | } | |
| - | }); | + | }); |
}); | }); | ||
| Line 37: | Line 37: | ||
#cssmenu li, | #cssmenu li, | ||
#cssmenu a { | #cssmenu a { | ||
| - | + | margin: 0; | |
| - | + | padding: 0; | |
| - | + | border: 0; | |
| - | + | list-style: none; | |
| - | + | font-weight: normal; | |
| - | + | text-decoration: none; | |
| - | + | line-height: 1; | |
| - | + | font-family: 'Open Sans', sans-serif; | |
| - | + | font-size: 1em; | |
| - | + | position: relative; | |
| + | } | ||
| + | #cssmenu { | ||
| + | width: 250px; | ||
| + | border-bottom: 4px solid #656659; | ||
| + | -webkit-border-radius: 3px; | ||
| + | -moz-border-radius: 3px; | ||
| + | border-radius: 3px; | ||
} | } | ||
#cssmenu a { | #cssmenu a { | ||
| - | + | line-height: 1.3; | |
} | } | ||
| - | |||
| - | |||
| - | |||
| - | |||
| - | |||
| - | |||
| - | |||
| - | |||
| - | |||
#cssmenu > ul > li:first-child { | #cssmenu > ul > li:first-child { | ||
| - | + | background: #66665e; | |
| - | + | background: -moz-linear-gradient(#66665e 0%, #45463d 100%); | |
| - | + | background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #66665e), color-stop(100%, #45463d)); | |
| - | + | background: -webkit-linear-gradient(#66665e 0%, #45463d 100%); | |
| - | + | background: linear-gradient(#66665e 0%, #45463d 100%); | |
| - | + | border: 1px solid #45463d; | |
| - | + | -webkit-border-radius: 3px 3px 0 0; | |
| - | + | -moz-border-radius: 3px 3px 0 0; | |
| - | + | border-radius: 3px 3px 0 0; | |
} | } | ||
#cssmenu > ul > li:first-child > a { | #cssmenu > ul > li:first-child > a { | ||
| - | + | padding: 15px 10px; | |
| - | + | background: url(menu_images/pattern.png) top left repeat; | |
| - | + | border: none; | |
| - | + | border-top: 1px solid #818176; | |
| - | + | -webkit-border-radius: 3px 3px 0 0; | |
| - | + | -moz-border-radius: 3px 3px 0 0; | |
| - | + | border-radius: 3px 3px 0 0; | |
| - | + | font-family: 'Ubuntu', sans-serif; | |
| - | + | text-align: center; | |
| - | + | font-size: 1.2em; | |
| - | + | font-weight: 300; | |
| - | + | text-shadow: 0 -1px 1px #000000; | |
} | } | ||
#cssmenu > ul > li:first-child > a > span { | #cssmenu > ul > li:first-child > a > span { | ||
| - | + | padding: 0; | |
} | } | ||
#cssmenu > ul > li:first-child:hover { | #cssmenu > ul > li:first-child:hover { | ||
| - | + | background: #66665e; | |
| - | + | background: -moz-linear-gradient(#66665e 0%, #45463d 100%); | |
| - | + | background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #66665e), color-stop(100%, #45463d)); | |
| - | + | background: -webkit-linear-gradient(#66665e 0%, #45463d 100%); | |
| - | + | background: linear-gradient(#66665e 0%, #45463d 100%); | |
} | } | ||
#cssmenu > ul > li { | #cssmenu > ul > li { | ||
| - | + | background: #e94f31; | |
| - | + | background: -moz-linear-gradient(#e94f31 0%, #d13516 100%); | |
| - | + | background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #e94f31), color-stop(100%, #d13516)); | |
| - | + | background: -webkit-linear-gradient(#e94f31 0%, #d13516 100%); | |
| - | + | background: linear-gradient(#e94f31 0%, #d13516 100%); | |
} | } | ||
#cssmenu > ul > li:hover { | #cssmenu > ul > li:hover { | ||
| - | + | background: #e84323; | |
| - | + | background: -moz-linear-gradient(#e84323 0%, #c33115 100%); | |
| - | + | background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #e84323), color-stop(100%, #c33115)); | |
| - | + | background: -webkit-linear-gradient(#e84323 0%, #c33115 100%); | |
| - | + | background: linear-gradient(#e84323 0%, #c33115 100%); | |
} | } | ||
#cssmenu > ul > li > a { | #cssmenu > ul > li > a { | ||
| - | + | font-size: .9em; | |
| - | + | display: block; | |
| - | + | background: url(menu_images/pattern.png) top left repeat; | |
| - | + | color: #ffffff; | |
| - | + | border: 1px solid #ba2f14; | |
| - | + | border-top: none; | |
| - | + | text-shadow: 0 -1px 1px #751d0c; | |
} | } | ||
#cssmenu > ul > li > a > span { | #cssmenu > ul > li > a > span { | ||
| - | + | display: block; | |
| - | + | padding: 12px 10px; | |
| - | + | -webkit-border-radius: 4px; | |
| - | + | -moz-border-radius: 4px; | |
| - | + | border-radius: 4px; | |
} | } | ||
#cssmenu > ul > li > a:hover { | #cssmenu > ul > li > a:hover { | ||
| - | + | text-decoration: none; | |
} | } | ||
#cssmenu > ul > li.active { | #cssmenu > ul > li.active { | ||
| - | + | border-bottom: none; | |
} | } | ||
#cssmenu > ul > li.has-sub > a span { | #cssmenu > ul > li.has-sub > a span { | ||
| - | + | background: url(menu_images/icon_plus.png) 96% center no-repeat; | |
} | } | ||
#cssmenu > ul > li.has-sub.active > a span { | #cssmenu > ul > li.has-sub.active > a span { | ||
| - | + | background: url(menu_images/icon_minus.png) 96% center no-repeat; | |
} | } | ||
| - | |||
#cssmenu ul ul { | #cssmenu ul ul { | ||
| - | + | display: none; | |
| - | + | background: #fff; | |
| - | + | border-right: 1px solid #a2a194; | |
| - | + | border-left: 1px solid #a2a194; | |
} | } | ||
#cssmenu ul ul li { | #cssmenu ul ul li { | ||
| - | + | padding: 0; | |
| - | + | border-bottom: 1px solid #d4d4d4; | |
| - | + | border-top: none; | |
| - | + | background: #f7f7f7; | |
| - | + | background: -moz-linear-gradient(#f7f7f7 0%, #ececec 100%); | |
| - | + | background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #f7f7f7), color-stop(100%, #ececec)); | |
| - | + | background: -webkit-linear-gradient(#f7f7f7 0%, #ececec 100%); | |
| - | + | background: linear-gradient(#f7f7f7 0%, #ececec 100%); | |
} | } | ||
#cssmenu ul ul li:last-child { | #cssmenu ul ul li:last-child { | ||
| - | + | border-bottom: none; | |
} | } | ||
#cssmenu ul ul a { | #cssmenu ul ul a { | ||
| - | + | padding: 10px 10px 10px 25px; | |
| - | + | display: block; | |
| - | + | color: #676767; | |
| - | + | font-size: .8em; | |
| - | + | font-weight: normal; | |
} | } | ||
#cssmenu ul ul a:before { | #cssmenu ul ul a:before { | ||
| - | + | content: '\00BB'; | |
| - | + | position: absolute; | |
| - | + | left: 10px; | |
| - | + | color: #e94f31; | |
} | } | ||
#cssmenu ul ul a:hover { | #cssmenu ul ul a:hover { | ||
| - | + | color: #e94f31; | |
} | } | ||
</style> | </style> | ||
| - | <div id= | + | <body> |
| - | + | ||
| - | + | <div id='cssmenu'> | |
| - | + | <ul> | |
| - | + | <li><a href='http://google.com'><span>Home</span></a></li> | |
| - | + | <li><a href='http://google.com'><span>Products</span></a> | |
| - | + | <ul> | |
| - | + | <li><a href='http://google.com'>Widgets</a></li> | |
| - | + | <li><a href='#'>Menus</a></li> | |
| - | + | <li><a href='#'>Products</a></li> | |
| - | + | </ul> | |
| - | + | </li> | |
| - | + | <li><a href='#'><span>Company</span></a> | |
| - | + | <ul> | |
| - | + | <li><a href='#'>About</a></li> | |
| - | + | <li><a href='#'>Location</a></li> | |
| - | + | </ul> | |
| - | + | </li> | |
| + | <li><a href='#'><span>Contact</span></a></li> | ||
| + | </ul> | ||
</div> | </div> | ||
| - | </html> | + | </body> |
| + | </html> | ||
Latest revision as of 21:06, 12 December 2013
