Jump to content
Please Use CODE Tags

Help with dropdown menu onclick [Warning: A lot of code in spoilers]

Jeroen1322
By Jeroen1322
in Programming
 Share
Posted

Hi guys!

 

I'm making a website for a client and i've made and hover dropdown menu but they want a onclick menu so when you click it, it drops down.

 

(Btw yes i used an template because they didn't want to come up with their own design so i showed them a template and they licked it... I'm not proud of it!)

 

The source code is:

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>Serraris Notaris</title><meta name="keywords" content="Serraris, Notaris, Notaris, Wijk bij Duurstede, Notaris Wijk bij Duurstede, Notaris Serraris" /><meta name="description" content="Notaris Serraris is oplossingsgericht, Kosten bewust, Vriendelijk, Snel." /><link href="templatemo_style.css" rel="stylesheet" type="text/css" /><link rel="stylesheet" href="css/nivo-slider.css" type="text/css" media="screen" /><script type="text/javascript" src="js/jquery-1.6.3.min.js" ></script><script type="text/javascript" src="js/jquery-ui.min.js" ></script><script type="text/javascript">$(document).ready(function(){$("#featured > ul").tabs({fx:{opacity: "toggle"}}).tabs("rotate", 5000, true);});</script><link rel="stylesheet" type="text/css" href="css/ddsmoothmenu.css" /><script type="text/javascript" src="js/ddsmoothmenu.js">/************************************************ Smooth Navigational Menu- (c) Dynamic Drive DHTML code library (www.dynamicdrive.com)* This notice MUST stay intact for legal use* Visit Dynamic Drive at http://www.dynamicdrive.com/ for full source code***********************************************/</script><script type="text/javascript">ddsmoothmenu.init({mainmenuid: "templatemo_menu", //menu DIV idorientation: 'h', //Horizontal or vertical menu: Set to "h" or "v"classname: 'ddsmoothmenu', //class added to menu's outer DIV//customtheme: ["#1c5a80", "#18374a"],contentsource: "markup" //"markup" or ["container_id", "path_to_menu_file"]})</script><link rel="stylesheet" href="css/slimbox2.css" type="text/css" media="screen" /> <script type="text/JavaScript" src="js/slimbox2.js"></script> </head><body><div id="templatemo_wrapper"><div id="templatemo_header"><span class="header_border"></span>     <div id="site_title"><a rel="nofollow" href="#">Serraris</a></div><div id="templatemo_menu" class="ddsmoothmenu">            <ul>                <li><a href="index.html" class="selected"><span></span>Home</a></li>                <li><a href="nieuws.html"><span></span>Nieuws</a>                </li>                <li><a href="about.html"><span></span>Over ons</a>                    <ul>                        <li><a href="#">Pagina 1</a></li>                        <li><a href="#">Pagina 2</a></li>                        <li><a href="#">Pagina 3</a></li>                        <li><a href="#">Pagina 4</a></li>                        <li><a href="#">Pagina 5</a></li>                    </ul>                </li>                               <li><a href="contact.html"><span></span>Contact</a></li>            </ul>            <br style="clear: left" />        </div> <!-- end of templatemo_menu -->        <div class="clear"></div>    </div> <!-- END of header -->    <div id="templatemo_slider" ><div class="slider-wrapper theme-default">            <div class="ribbon"></div>            <div id="slider" class="nivoSlider">                <a href="#"><img src="images/slider/01.jpg" alt="Slider Image 1" title="#caption1" /></a>                <a href="#"><img src="images/slider/02.jpg" alt="Slider Image 2" title="#caption2" /></a>                <a href="#"><img src="images/slider/03.jpg" alt="Slider Image 3" title="#caption3" /></a>                <a href="http://www.flashmo.com" rel="nofollow">                 <img src="images/slider/04.jpg" alt="Slider Image 4" title="#caption4" /></a>            </div>            <div id="caption1" class="nivo-html-caption">               <h2>Titel Slideshow</h2>               <p>Tekst Slideshot</p>               <a href="#" class="slider_more_button">Lees meer</a>            </div>            <div id="caption2" class="nivo-html-caption">               <h2>Titel Slideshow</h2>               <p>Tekst Slideshow</p>               <a href="#" class="slider_more_button">Lees meer</a>            </div>            <div id="caption3" class="nivo-html-caption">               <h2>Titel Slideshow</h2>               <p>Tekst Slideshow</p>               <a href="#" class="slider_more_button">Lees meer</a>            </div>            <div id="caption4" class="nivo-html-caption">               <h2>Titel Slideshow</h2>               <p>Tekst Slideshow</p>               <a href="#" class="slider_more_button">Lees meer</a>            </div>        </div><script type="text/javascript" src="js/jquery.nivo.slider.pack.js"></script>        <script type="text/javascript">        $(window).load(function() {            $('#slider').nivoSlider({effect: 'random',captionOpacity: 1, controlNav: true, // 1,2,3... navigationdirectionNavHide: false,            directionNav: true,animSpeed: 800, // Slide transition speed       pauseTime: 4000, // How long each slide will show});        });        </script></div> <!-- END of slider -->        <div id="templatemo_main_content">     <div id="templatemo_sidebar">            <div class="sidebar_content_box">            <h3>Zijkant doosje 1</h3>            <ul class="sidebar_gallery">            Hier kan tekst komen            </ul>            </div>            <div class="sidebar_content_box">                <h3>Zijkant doosje 2</h3>                <ul class="sidebar_gallery">Hier kan tekst komen<br/><br/><br/><br/>                </ul>                <div class="clear"></div></div>        </div>                <div id="templatemo_content">         <div class="col_2">             <div class="content_wrapper content_mb_30">                    <h2 class="post_title">Titel</h2>                    <img src="images/templatemo_image_05.jpg" alt="flower 5" class="img_border img_nom" />                    <p>Tekst</p>                    <div class="clear"></div>                <a href="#" class="more right">Lees meer</a></div>                <div class="content_wrapper">                                        <h2 class="post_title"><a href="#">Titel</a></h2>                    <img src="images/templatemo_image_06.jpg" alt="flower 6" class="img_border img_nom" />                    <p>Tekst <br /> <a href="#">Link</a></p>                    <div class="clear"></div>                <a href="#" class="more right">More</a></div>            </div>         <div class="col_2 no_margin_right">                    <h2>Recente updates</h2>                <div class="news_list">                    <img src="images/templatemo_image_01.jpg" alt="Flower 1"  class="img_fl img_border img_border_s" />                    <a href="#">Titel update</a>                    <p>Tekst update</p>                  <div class="clear"></div>                </div>                           <div class="news_list">                    <img src="images/templatemo_image_02.jpg" alt="Flower 2" class="img_fl img_border img_border_s" />                    <a href="#">Titel update</a>                    <p>Tekst update<br />tekst</p>                  <div class="clear"></div>                </div>                    <div class="news_list">                    <img src="images/templatemo_image_03.jpg" alt="Flower 3" class="img_fl img_border img_border_s" />                    <a href="#">Titel</a>                    <p>Dit is een tekst<br /><br /><a href="#">Dit is een link</a></p>                    <div class="clear"></div>                </div>                <div class="news_list">                <img src="images/templatemo_image_04.jpg" alt="Flower 4" class="img_fl img_border img_border_s" />                <a href="#">Titel</a>                <p>Tekst</p>              <div class="clear"></div>            </div>                                             <div class="clear"></div>                <a href="#" class="more right">Lees meer</a>            </div>         </div>        <div class="clear"></div>    </div> <!-- END of templatemo_main_content -->        <div id="templatemo_footer">     Copyright © 2014 Serraris Notaris | ontworpen & gemaakt door: <a rel="nofollow" href="http://www.webbouwgrooten.nl">Webbouw Grooten</a>    </div> <!-- END of templatemo_footer --></div> <!-- END of templatemo_wrapper --></body><script type='text/javascript' src='js/logging.js'></script></html>[

 

and my CSS's files are:

 

templatemo_style
/*  Credit: http://www.templatemo.com  */body {	margin: 0;	padding: 50px 0;	color: #666;	font-family: Verdana, Arial, Helvetica, sans-serif;	font-size: 12px;	line-height: 18px; 	background-color: #fdfdcd; 	background-position: center top;    background-attachment:fixed;}h1, h2, h3, h4, h5, h6 {	color:#333;	font-weight:400;	padding: 0;	margin: 0 0 10px 0;	font-family: Verdana, Geneva, sans-serif;}h1 { font-size:34px; margin-bottom: 35px  }h2 { font-size:26px; margin-bottom: 30px; line-height: 30px; }h3 { font-size:20px; line-height: 24px }h4 { font-size:18px }h5 { font-size:16px }h6 { font-size:12px }h1 a, h2 a, h3 a, h4 a, h5 a, h6 a{	color:#95200c;}img { margin: 0; padding: 0; border: 0; }.img_border { border: 1px solid #ccc; background: #fff; padding: 4px }.img_nom { display: block; margin-bottom: 15px }.img_fl { float: left; display: block; margin: 1px 20px 8px 0 }.img_fr { float: right; margin: 1px 0 8px 20px }p { margin: 0 0 10px 0; padding: 0 color:#d7ca13;}em { color: #771201 }label { display: block; }input { margin-bottom: 10px }a:link, a:visited { color:#000; text-decoration: none}a:hover { text-decoration:underline }a:hover,a:active { outline:none }a.more { display: inline-block; padding: 4px 15px; text-decoration: none; margin-top: 5px; color: #fff; line-height: 24px; text-align: center; background: #444 }a.more:hover { background: #000 }ul, ol { margin: 0; padding: 0; list-style: none }ul.list_bullet { margin: 10px 0 10px 15px; padding: 0; list-style: none }ul.list_bullet li { color:#797979; margin: 0 0 7px 0; padding: 0 0 0 20px; background: url(images/templatemo_bullet.png) no-repeat scroll 0 5px  }ul.list_bullet li a { color: #797979; font-weight: normal; text-decoration: none }ul.list_bullet li a:hover { color: #797979 }#templatemo_wrapper {	width: 980px;	margin: 0 auto;	padding: 0 10px;}/** Columns **/.content_wrapper { overflow: hidden; width: 100% }.content_mb_30 { margin-bottom: 30px }.content_mb_60 { margin-bottom: 60px }.col_2 {width:300px; margin-right: 40px }.col_3 {width:190px; margin-right: 35px }.col_23 {width:415px; margin-right: 35px }.col_2, .col_3, .col_23 { float:left }.clear { clear: both }.left { float:left }.right { float:right }.center { margin: 0 auto }.no_margin_right {margin-right:0 !important;}#templatemo_sidebar .sidebar_content_box_right {color:#FFF; cursor:text; color:#fdfdcd;}#templatemo_sidebar .sidebar_content_box_right:hover {text-decoration:none;}/*** Header ***/#templatemo_header {	position: relative;	margin-top: 10px;}#templatemo_header span.header_border {	position: absolute;	top: -10px;	right: 0;	height: 10px;	width: 700px;	background: url(images/templatemo_content_top.png)}#site_title { float: left; width: 280px; height: 80px; background: url(images/templatemo_header_bg.png) top no-repeat }#site_title a { display: block; padding: 20px; font-size: 40px; line-height: 40px; color: #fff; text-align: right }#templatemo_menu {	float: right;	width: 700px;	height: 80px;	background: #0e0e0e;}/*** Slider ***/#templatemo_slider {	clear: both;	width: 980px;	height: 360px;}/*** Main Content ***/#templatemo_main_content {	width: 980px;	padding-bottom: 10px;	background: url(images/templatemo_content_bg.png) repeat-y right;}/*** Sidebar ***/#templatemo_sidebar {	float: left;	width: 280px;	background-color: #fdfdcd;;	padding-top: 20px;}#templatemo_sidebar h3 { 	color: #fff;}#templatemo_sidebar a {	color: #999}ul.sidebar_link li {	padding: 10px 0;	border-bottom: 1px solid #fdfdcd}.sidebar_content_box {	padding: 20px;	margin-bottom: 20px;	background: #111}ul.sidebar_gallery li {	display: block;	float: left;	margin: 0 10px 10px 0}#contact_form { padding: 0 }#contact_form form { margin: 0px; padding: 0px; }#contact_form form .input_field { 	width: 288px; 	padding: 5px; 	margin-bottom: 20px; 	color: #333333;  	background: #FFFFFF; 	border: 1px solid #dedede;	font-family: Verdana, Arial, Helvetica, sans-serif;}#contact_form form label { display: block; margin-bottom: 5px; }#contact_form form textarea { 	width: 628px; 	height: 130px; 	padding: 5px; 	margin-bottom: 10px; 	color: #333333; 	background: #FFFFFF; 	border: 1px solid #dedede;	font-family: Verdana, Arial, Helvetica, sans-serif;}#contact_form .submit_btn, #comment_form .submit_btn {	display: block; 	padding: 8px 16px; 	text-align: center; 	text-decoration: none; 	font-weight: bold;  	background-color: #444444; 	border: 1px solid #333333; 	color: #FFFFFF; 	font-size: 11px; 	cursor: pointer;}/*** Content ***/#templatemo_content {	float: right;	padding: 30px;	width: 640px;	background: #092281}#templatemo_content h2.post_title {	font-size: 20px;	font-weight: 700;	margin-bottom: 10px}.news_list { margin-bottom: 30px }.news_list .date { color: #fff }.news_list a { display: block; margin-bottom: 5px; font-weight: 700 }.news_list p { font-size: 11px }/* Gallery */#gallery li { display: block; float: left; margin: 0 0 30px 0; padding: 0; width: 640px; position: relative; }#gallery li span { display: block }#gallery li span a.more { display: block; margin-top: 10px }#gallery li.no_margin_right { margin-right: 0 }#gallery li span {	display: none; 	font-size: 11px; 	position: absolute; 	bottom: 5px; 	left: 5px; 	padding: 10px; 	background: #fff; 	color: #ccc;	width: 600px; 	line-height: 1.2em;	background: url(images/caption_background.png) repeat;}#gallery li span h4 { color: #fff; margin-bottom: 10px; font-size: 14px }#gallery li a:hover { text-decoration: none }.post { margin-bottom: 20px; padding-bottom: 20px; background: url(images/templatemo_hr.png) bottom repeat-x }.post h2 { margin-bottom: 10px; font-size: 24px; font-weight: 700 }.post img { margin-bottom: 5px }.post_meta {border: 1px solid #666; border-left: 0; border-right: 0; padding: 5px; height: 16px; margin-bottom: 10px }.post_meta span { float: left; display: block; float: left; margin-right: 20px; padding-left: 20px; background-repeat: no-repeat; background-position: left center  }.post_meta span.post_author { background-image: url(images/agent.png) }.post_meta span.date { background-image: url(images/calendar.png) }.post_meta span.tag { background-image: url(images/tag.png) }.post_meta span.comment { float: right; background-image: url(images/chat-02.png) }ol.comment_list { margin: 0 0 40px; padding: 0; list-style: none }ol.comment_list .comment_box { padding: 20px; background: url(images/templatemo_divider.png) repeat-x bottom }ol.comment_list li { margin-bottom: 20px }ol.comment_list li ul { list-style: none; background: none }ol.comment_list li ul li { margin-bottom: 20px }ol.comment_list li ul li .comment_box {  }.comment_content { float: right; width: 630px }ol.comment_list li ul li.depth_2 .comment_content  { width: 590px }ol.comment_list li ul li.depth_3 .comment_box { }ol.comment_list li ul li.depth_3 .comment_content  { width: 550px }#comment_form { width: 400px; margin-top: 40px }#comment_form form label { display: block }#comment_form form .input_field { 	width: 288px; 	padding: 5px; 	margin-bottom: 20px; 	color: #333333;  	background: #FFFFFF; 	border: 1px solid #dedede;	font-family: Verdana, Arial, Helvetica, sans-serif;}#comment_form form textarea { 	width: 388px; 	height: 130px; 	padding: 5px; 	margin-bottom: 10px; 	color: #333333; 	background: #FFFFFF; 	border: 1px solid #dedede;	font-family: Verdana, Arial, Helvetica, sans-serif;}/*** FOOTER ***/#templatemo_footer {	padding: 20px 10px;	text-align: right;	background: url(images/templatemo_content_bottom.png) top right no-repeat}#templatemo_footer a { color: #999 }.templatemo_paging { margin: 0 0 20px; padding: 0 }.templatemo_paging ul { margin: 0; padding: 0; list-style: none }.templatemo_paging ul li { margin: 0; padding: 0; display: inline }.templatemo_paging ul li a { float: left; display: block; color: #666; text-decoration: none; margin-right: 5px; padding: 5px 10px; background: #eeeeee; border: 1px solid #dddddd}.templatemo_paging ul li a:hover { background: #666666; border: 1px solid #333333; color: #fff } 

ddsmoothmenu
.ddsmoothmenu{}.ddsmoothmenu ul{	margin: 0;	padding: 22px 35px;	list-style-type: none;}/*Top level list items*/.ddsmoothmenu ul li{	position: relative;	display: inline;	float: left;}/*Top level menu link items style*/.ddsmoothmenu ul li a {	display: block;	height: 35px;	padding: 0 20px;	line-height: 35px;	font-size: 14px;	margin-right: 5px;	color: #fff;		text-align: center;	text-decoration: none;	font-weight: 400;	outline: none;}* html .ddsmoothmenu ul li a{ /*IE6 hack to get sub menu links to behave correctly*/display: inline-block;}.ddsmoothmenu ul li a.selected, .ddsmoothmenu ul li a:hover { /*CSS class that's dynamically added to the currently active menu items' LI A element*/	background: url(../images/templatemo_menu_item_hover.png);}/*1st sub level menu*/.ddsmoothmenu ul li ul {	position: absolute;	width: 160px;	margin: 0;	padding: 10px 0;	display: none; /*collapse all sub menus to begin with*/	visibility: hidden;	background: #000;	border-left: 0;	border-right: 0;	color: #ccc;}/*Sub level menu list items (undo style from Top level List Items)*/.ddsmoothmenu ul li ul li{display: list-item;float: none;background: none;}/*All subsequent sub menu levels vertical offset after 1st level sub menu */.ddsmoothmenu ul li ul li ul{top: 0;}/* Sub level menu links style */.ddsmoothmenu ul li ul li a{	font-weight: 500;	width: 120px; /*width of sub menus*/	margin: 0;	padding: 7px 20px;	height: 18px;	line-height: 18px;	font-size: 11px;	text-align: left;	background: none;	color: #666;}.ddsmoothmenu ul li ul li a.selected, .ddsmoothmenu ul li ul li a:hover {	color: #fff;}/* Holly Hack for IE \*/* html .ddsmoothmenu{height: 1%;} /*Holly Hack for IE7 and below*/ 

nivo-slider
/*Skin Name: Nivo Slider Default ThemeSkin URI: http://nivo.dev7studios.comSkin'>http://nivo.dev7studios.comSkin Type: flexibleDescription: The default skin for the Nivo Slider.Version: 1.0Author: Gilbert PellegromAuthor URI: http://dev7studios.com*/.theme-default .nivoSlider {	float: right;	width: 700px;	height: 360px;	position:relative;	background:#fff url(loading.gif) no-repeat 50% 50%;}.theme-default .nivoSlider img {	position:absolute;	width: 700px;	height: 360px;	top:0px;	left:0px;	display:none;}.theme-default .nivoSlider a {	border:0;	display:block;}.theme-default .nivo-controlNav {	position:absolute;	left:50%;	bottom:0;    ; /* Tweak this to center bullets */	padding: 5px 10px;	background: #000;	z-index: 100;}.theme-default .nivo-controlNav a {	display:block;	width:15px;	height:14px;	background: url(../images/slider_control_btn.png);	text-indent:-9999px;	border:0;	margin-right:3px;	float:left;}.theme-default .nivo-controlNav a.active {	background-position: -15px 0;}.theme-default .nivo-directionNav a {	display:block;	width:38px;	height:46px;	background: url(../images/slider_next_previous.png) no-repeat;	text-indent:-9999px;	border:0;}.theme-default a.nivo-nextNav {	background-position:-38px 0;	right:-50px;}.theme-default a.nivo-prevNav {	left:-50px;}.theme-default .nivo-caption {    font-family: Helvetica, Arial, sans-serif;}.theme-default .nivo-caption a {    color:#fff;    border-bottom:1px dotted #fff;}.theme-default .nivo-caption a:hover {    color:#fff;}/* * jQuery Nivo Slider v2.7 * http://nivo.dev7studios.com * * Copyright 2011, Gilbert Pellegrom * Free to use and abuse under the MIT license. * http://www.opensource.org/licenses/mit-license.php *  * March 2010 */  /* The Nivo Slider styles */.nivoSlider {	position:relative;}.nivoSlider img {	position:absolute;	top:0px;	left:0px;}/* If an image is wrapped in a link */.nivoSlider a.nivo-imageLink {	position:absolute;	top:0px;	left:0px;	width:100%;	height:100%;	border:0;	padding:0;	margin:0;	z-index:6;	display:none;}/* The slices and boxes in the Slider */.nivo-slice {	display:block;	position:absolute;	z-index:5;	height:100%;}.nivo-box {	display:block;	position:absolute;	z-index:5;}/* Caption styles */.nivo-caption {	position:absolute;	display: block;	padding: 20px;	left:-280px;	top:30px;	width: 240px;	height: 260px;	background: url(../images/slider_caption_bg.png);	color:#fff;	z-index:8;	text-align: right}.nivo-caption h2 {	color: #fff;	margin: 0 0 30px 0; 	padding: 0;}.nivo-caption p {	color: #ccc;	font-size: 14px;	margin-bottom: 20px;}.nivo-caption a {	font-weight: 700;	display:inline !important;}.nivo-html-caption {    display:none;}/* Direction nav styles (e.g. Next & Prev) */.nivo-directionNav a {	position:absolute;	top:45%;	z-index:9;	cursor:pointer;}.nivo-prevNav {	left:0px;}.nivo-nextNav {	right:0px;}/* Control nav styles (e.g. 1,2,3...) */.nivo-controlNav a {	position:relative;	z-index:9;	cursor:pointer;}.nivo-controlNav a.active {	font-weight:bold;} 

slimbox2
/* SLIMBOX */#lbOverlay {	position: fixed;	z-index: 9999;	left: 0;	top: 0;	width: 100%;	height: 100%;	background-color: #000;	cursor: pointer;}#lbCenter, #lbBottomContainer {	position: absolute;	z-index: 9999;	overflow: hidden;	background-color: #fff;}.lbLoading {	background: #fff url(../images/loading.gif) no-repeat center;}#lbImage {	position: absolute;	left: 0;	top: 0;	border: 10px solid #fff;	background-repeat: no-repeat;}#lbPrevLink, #lbNextLink {	display: block;	position: absolute;	top: 0;	width: 50%;	outline: none;}#lbPrevLink {	left: 0;}#lbPrevLink:hover {	background: transparent url(../images/prevlabel.gif) no-repeat 0 15%;}#lbNextLink {	right: 0;}#lbNextLink:hover {	background: transparent url(../images/nextlabel.gif) no-repeat 100% 15%;}#lbBottom {	font-family: Verdana, Arial, Geneva, Helvetica, sans-serif;	font-size: 10px;	color: #666;	line-height: 1.4em;	text-align: left;	border: 10px solid #fff;	border-top-style: none;}#lbCloseLink {	display: block;	float: right;	width: 66px;	height: 22px;	background: transparent url(../images/closelabel.gif) no-repeat center;	margin: 5px 0;	outline: none;}#lbCaption, #lbNumber {	margin-right: 71px;}#lbCaption {	font-weight: bold;}

 

I have to much Javascript files to place so if you think editing them will help PM me so i can send you a link that you can download the files or something.

 

 

You can find the prototype here. (if you hover over the "Over ons" menu link you get the dropdown menu)

 

DON'T LOOK AT THE DESIGN! It is horrible and not finished yet! :P

 

 

Thanks a lot!

[CPU: AMD FX-6100 @3.3GHz ] [MoBo: Asrock 970 Extreme4] [GPU: Gigabyte 770 OC ] [RAM: 8GB] [sSD: 64gb for OS] [PSU: 550Watt Be Quiet!] [HDD: 1TB] [CPU cooler: Be Quiet! Shadow Rock Pro Sr1]  -Did i solve your question/problem? Please click 'Marked Solved'-

Link to comment
Share on other sites
Link to post
Share on other sites
Posted

Are you using a JS library like jQuery or Prototype?

With jQuery, it's just $('{menu_item}').click(function () { $('{sub_menu}').show(); }); to show it and almost the same to close it, but with mouseOut and hide.

Projects | > Project DisplayGRID < | > Portable Virtualization Server < | > CORE GTX < | Projects

Community | > Schnitzel Teamspeak Server < | Community

Guides | > Getting started with a NAS < | > Setting up your Ubiquiti Access Points < | > pfSense Guide < | Guides

Link to comment
Share on other sites
Link to post
Share on other sites
Posted
  • Author

Are you using a JS library like jQuery or Prototype?

With jQuery, it's just $('{menu_item}').click(function () { $('{sub_menu}').show(); }); to show it and almost the same to close it, but with mouseOut and hide.

That is a very good question.. I have no idea! One thing that i noticed it is done with CSS i believe, because when i was examenating the code i saw some menu property's with :hover. Otherwise i'll look in the Js files

[CPU: AMD FX-6100 @3.3GHz ] [MoBo: Asrock 970 Extreme4] [GPU: Gigabyte 770 OC ] [RAM: 8GB] [sSD: 64gb for OS] [PSU: 550Watt Be Quiet!] [HDD: 1TB] [CPU cooler: Be Quiet! Shadow Rock Pro Sr1]  -Did i solve your question/problem? Please click 'Marked Solved'-

Link to comment
Share on other sites
Link to post
Share on other sites
Posted
  • Author

Just use jQuery man, it's so much easier and quicker.

As i said i'm using a template and didn't create the original code :P 

[CPU: AMD FX-6100 @3.3GHz ] [MoBo: Asrock 970 Extreme4] [GPU: Gigabyte 770 OC ] [RAM: 8GB] [sSD: 64gb for OS] [PSU: 550Watt Be Quiet!] [HDD: 1TB] [CPU cooler: Be Quiet! Shadow Rock Pro Sr1]  -Did i solve your question/problem? Please click 'Marked Solved'-

Link to comment
Share on other sites
Link to post
Share on other sites
Posted

As i said i'm using a template and didn't create the original code :P

Ah okay, but starting partially from scratch and using jQuery is what I recommend, I can help you if you'd like.

Link to comment
Share on other sites
Link to post
Share on other sites
Posted
  • Author

Ah okay, but starting partially from scratch and using jQuery is what I recommend, I can help you if you'd like.

Yeah i usually create the whole thing myself but i've made something like 3 designs and they all didn't like it, and they wouldn't come up with their own so i just used a template. 

 

If you want i can make all the files a .zip or .rar and mail it to you so you can edit them and see what happens, does that sound good? Btw i'll need your e-mail adres ofcourse is you could just PM that. :)

[CPU: AMD FX-6100 @3.3GHz ] [MoBo: Asrock 970 Extreme4] [GPU: Gigabyte 770 OC ] [RAM: 8GB] [sSD: 64gb for OS] [PSU: 550Watt Be Quiet!] [HDD: 1TB] [CPU cooler: Be Quiet! Shadow Rock Pro Sr1]  -Did i solve your question/problem? Please click 'Marked Solved'-

Link to comment
Share on other sites
Link to post
Share on other sites
Posted

This does the job and does work but instead of using js you could of used css3 transitions.
 
So basically you'd have something like this.
 

li .menu-item{	height: 35px;	transition:height 250ms;	overflow:hidden;}li .menu-item:active{	height:auto;	overflow:visible;}
<ul class="navigation">	<li class="menu-item">		<a href="about.php">About Us</a>		<ul>			<li>Sub item 1</li>			<li>Sub item 2</li>			<li>Sub item 3</li>		</ul>	</li></ul>

So basically by default you have only what is within the height of the navigation item visible and the rest hidden and since the navigation item is 35px hight be default only the navigation title is visible and when you click it it'll transition to the height of auto and show everything so basically it will fit the height to the content and this will have a nice transition aswell.

 

I'm entirely sure that this code I provided won't work since the list items are still defined to be shown vertically but other then that it should be fine. I haven't tried it yet though and also quickly written that code within the post section itself so if it doesn't work then I wouldn't be surpised. The concept is 100% fine and I know that it works but the code provided to execute this doesn't.

 

If you really want then I'll quickly spend a few minutes writing the code for you to make it work but I think that by just explaining the concept should help you out.

Link to comment
Share on other sites
Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share
Go to topic listing Programming

×