html - Opening a div from navigation bar -
i open div when clicking on button, @ moment div opens when hover on button, need open when clicking on .i have never used java script before, guess that's need click on button. can me on doing using code below. hope don't have change whole website doing operation
<html lang ="en-us"> <head> <link rel="stylesheet" type="text/css" href="css/main1.css" media="all"> <link rel="stylesheet" type="text/css" href="css/slide.css" media="all"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <script type="text/javascript"> var tday=new array("sunday","monday","tuesday","wednesday","thursday","friday","saturday"); var tmonth=new array("january","february","march","april","may","june","july","august","september","october","november","december"); function getclock(){ var d=new date(); var nday=d.getday(),nmonth=d.getmonth(),ndate=d.getdate(); var nhour=d.gethours(),nmin=d.getminutes(),nsec=d.getseconds(),ap; if(nhour==0){ap=" am";nhour=12;} else if(nhour<12){ap=" am";} else if(nhour==12){ap=" pm";} else if(nhour>12){ap=" pm";nhour-=12;} if(nmin<=9) nmin="0"+nmin; if(nsec<=9) nsec="0"+nsec; document.getelementbyid('clockbox').innerhtml=""+tday[nday]+", "+tmonth[nmonth]+" "+ndate+" "+nhour+":"+nmin+":"+nsec+ap+""; } window.onload=function(){ getclock(); setinterval(getclock,1000); } </script> </head> <body> <style> body { padding: 0; margin: 0; } * {box-sizing:border-box} body {font-family: verdana,sans-serif;margin:0} .myslides {display:none} /* slideshow container */ .slideshow-container { position: fixed; width:100%; height: 100%; top:0px; left:0px; z-index:0; } /* next & previous buttons */ .prev, .next { cursor: pointer; position: absolute; top: 50%; width: auto; padding: 16px; margin-top: -22px; color: white; font-weight: bold; font-size: 18px; transition: 0.6s ease; border-radius: 0 3px 3px 0; } /* position "next button" right */ .next { right: 0; border-radius: 3px 0 0 3px; } /* on hover, add black background color little bit see-through */ .prev:hover, .next:hover { background-color: rgba(0,0,0,0.8); } /* dots/bullets/indicators */ .dot { cursor:pointer; height: 13px; width: 13px; margin: 0 2px; background-color: #bbb; border-radius: 50%; display: inline-block; transition: background-color 0.6s ease; } .active, .dot:hover { background-color: #717171; } /* fading animation */ .fade { -webkit-animation-name: fade; -webkit-animation-duration: 1.5s; animation-name: fade; animation-duration: 1.5s; } @-webkit-keyframes fade { {opacity: .4} {opacity: 1} } @keyframes fade { {opacity: .4} {opacity: 1} } /* on smaller screens, decrease text size */ @media screen , (max-width: 300px) { .prev, .next,.text {font-size: 11px} } .box{ background-color:#ffe680; width:895px; height:500px; position:fixed; margin-top:154px; margin-left:288px; z-index:1; } h1 { color:white; text-shadow: 3px 2px red; } .dropbtn { background-color: #4caf50; color: white; padding: 16px; font-size: 16px; border: none; cursor: pointer; } .dropdown { position: relative; display: inline-block; z-index:1; } .dropdown-content { display: none; position: fixed; background-color: rgba(0,0,0,0.4); min-width: 160px; box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); z-index: 1; margin-left:200px; margin-top:96px; width:800; height:500; } .dropdown-content { color: white; text-decoration: none; display: inline; width: 800px; height: 200px; } .dropdown:hover .dropdown-content { display: block; } .dropdown:hover .dropbtn { background-color: #f28686; } settimeout( function(){$('box').hide();} , 4000); </style> <div class="dropdown"> <button class="dropbtn" style="margin-left:208px;">news</button> <div class="dropdown-content"style="margin-left:325;"> <h1 style="margin-left:50;">cooperate news</h1> <ul style="float:left; margin-right:60%;margin-top:-10;line-height:2;list- style:none;"> <li> <a href="http://www.molex.com/molex/home"> *how connected cars turning revenue-generating machines - august 29, 2016</a></li> <li><a href="#">*delphu, mobileye join forces develop selfdrive system - august 23,2016</a></li> <li> <a href="#">*mit spinoff market breakthrough batteries 2017 - august 22,2016</a></li> <li> <a href="#">*cisco cuts workforce 7 percent speed transition software - august 18, 2016</a></li> </ul> <h1 style="margin-left:490; margin-top:-60;">chengdu news</h1> <ul style="margin-left: 55%; margin-top:-396;float:left; line-height:2;list-style:none;"> <li> <a href="#">* 10 year service award ceremony</a></li> <li><a href="#">* pdp training</a></li> <li> <a href="#">* iso 27001 project kick-off</a></li> <li> <a href="#">* 2016 internship program update</a></li> <li><a href="#">* wbc update-- first reading salon</a></li> <li style=" margin-top:190px; margin-left:180px;"><a href="http://www.molex.com/molex/home" style="color:white;">more>>></a></li> </ul> </div> </div> <div class="dropdown" style="margin-left:110;"> <button class="dropbtn"style="margin-left:250px;">notice & policy</button> <div class="dropdown-content"style="margin-left:215;"> <h1 style="margin-left:50;">cooperate news</h1> <ul style="float:left; margin-right:60%;margin-top:-10;line-height:2;list-style:none;"> <li> <a href="http://www.molex.com/molex/home"> *how connected cars turning revenue-generating machines - august 29, 2016</a></li> <li><a href="#">*delphu, mobileye join forces develop selfdrive system - august 23,2016</a></li> <li> <a href="#">*mit spinoff market breakthrough batteries 2017 - august 22,2016</a></li> <li> <a href="#">*cisco cuts workforce 7 percent speed transition software - august 18, 2016</a></li> </ul> <h1 style="margin-left:490; margin-top:-60;">chengdu news</h1> <ul style="margin-left: 55%; margin-top:-396;float:left; line-height:2;list-style:none;"> <li> <a href="#">* 10 year service award ceremony</a></li> <li><a href="#">* pdp training</a></li> <li> <a href="#">* iso 27001 project kick-off</a></li> <li> <a href="#">* 2016 internship program update</a></li> <li><a href="#">* wbc update-- first reading salon</a></li> <li style=" margin-top:190px; margin-left:180px;"><a href="http://www.molex.com/molex/home" style="color:white;">more>>></a></li> </ul> </div> </div> <div class="dropdown" style="margin-left:220;"> <button class="dropbtn"style="margin-left:292px;">workflow & mis</button> <div class="dropdown-content"style="margin-left:105;"> <h1 style="margin-left:50;">online workflow:</h1> <ul style="float:left; margin-right:60%;margin-top:-10;line-height:2;list-style:none"> <li> <a href="#"> mii</a></li> <li><a href="#">aps wf reports</a></li> <li> <a href="#">par apply (tis)</a></li> <li> <a href="#">par applcation (ccs)</a></li> <li> <a href="#">par application (dss)<a></li> <li> <a href="#">company chop application<a></li> <li> <a href="#">facility maintenance<a></li> <li> <a href="#">cycle count review<a></li> </ul> <h1 style="margin-left:490; margin-top:-60;">mis:</h1> <ul style="margin-left: 55%; margin-top:-270;float:left; line-height:2;list-style:none;"> <li> <a href="#">user id application</a></li> <li><a href="#">meeting room booking guide</a></li> <li> <a href="#">how apply mass sas</a></li> <li> <a href="#">office 365 -email- retention policy</a></li> <li><a href="#">how report con-call issue or problem level 3</a></li> </ul> </div> </div> <div class="dropdown" style="margin-left:410;"> <button class="dropbtn"style="width:120px;height:95px;margin-left:254px;margin-top:0px;background-color:#e6e6e6;"></button> <img src="molex.png" alt="molex" height="30px" width="100px" style="margin-top: 45; position:fixed; z-index:1;margin-left:268;"> </div> <div class="dropdown" style="margin-left:451;"> <button class="dropbtn"style="margin-left:334px;">canteen</button> <div class="dropdown-content"style="margin-left:-126;"> <h1 style="margin-left:50;">menu today</h1> <ul style="float:left; margin-right:60%;margin-top:-10;line-height:2;list-style:none; color:white;"> <img src="logo update.jpg"> <li> lunch:</li> <li >dinner:</li> <li > midnight:</li> </ul> <h1 style="margin-left:466; margin-top:-56; font-size:28px;">canteen committee:</h1> <h1 style="margin-left:465; margin-top:-102px;float:left;">advices:</h1> </div> </div> <div class="dropdown" style="margin-left:562;"> <button class="dropbtn"style="margin-left:375px;">activity & organization</button> <div class="dropdown-content"style="margin-left:-237;"> <h1 style="margin-left:50;">activity</h1> <ul style="float:left; margin-right:60%;margin-top:-10;line-height:2;list-style:none"> <li> <a href="#">family day</a></li> <li><a href="#">photography contest</a></li> <li> <a href="#">talent show</a></li> <li> <a href="#">singing contest</a></li> </ul> <h1 style="margin-left:490; margin-top:-60;">organization</h1> <ul style="margin-left: 55%; margin-top:-144;float:left; line-height:2;list-style:none;"> <li> <a href="#">walfare committee</a></li> <li><a href="#">badminton club</a></li> <li> <a href="#">photography club</a></li> <li> <a href="#">riding club</a></li> <li><a href="#">dancing club</a></li> <li> <a href="#">women's business committee (wbc)</a></li> <li> <a href="#">corporate social responsibility (csr)</a></li> </ul> </div> </div> <div class="dropdown" style="margin-left:672;"> <button class="dropbtn"style="margin-left:417px;">culture</button> <div class="dropdown-content"style="margin-left:-347;"> <h1 style="margin-left:50;">mbm column</h1> <ul style="float:left; margin-right:60%;margin-top:-10;line-height:2;list-style:none"> <li> <a href="#">introduction of mbm</a></li> <li><a href="#">mbm materials</a></li> <li> <a href="#">mbm in chengdu</a></li> </ul> <h1 style="margin-left:490; margin-top:-60;">molex chengdu</h1> <ul style="margin-left: 448px; margin-top:-114px;float:left; line-height:2;list-style:none;"> <li> <a href="#">vision</a></li> <li><a href="#">newsletter</a></li> <li> <a href="#">10 year anniversary magazine</a></li> <li><a href="等等等等等等.htm" target='_blank' title="click here open word document"> click here open word document</a></li> </ul> </div> </div> <ul class="cb-slideshow"> <li> <span>image 01</span> <div> <img src="1.jpg" alt="molex" height="100%" width="100%"> </div> </li> <li><span>image 01</span> <div> <img src="2.jpg" alt="molex" height="100%" width="100%"> </div></li> <li><span>image 01</span> <div> <img src="3.jpg" alt="molex" height="100%" width="100%"> </div></li> <li> <span>image 01</span> <div> <img src="1.jpg" alt="molex" height="100%" width="100%"> </div> </li> </ul> </div> <h1 style="position:fixed;z-index:1; margin-top:40%;margin-left:30%;"><div id="clockbox" style=""> </div></h1> <script> = 1; showslides(slideindex); function plusslides(n) { showslides(slideindex += n); } function currentslide(n) { showslides(slideindex = n); } function showslides(n) { var i; var slides = document.getelementsbyclassname("myslides"); var dots = document.getelementsbyclassname("dot"); if (n > slides.length) {slideindex = 1} if (n < 1) {slideindex = slides.length} (i = 0; < slides.length; i++) { slides[i].style.display = "none"; } (i = 0; < dots.length; i++) { dots[i].classname = dots[i].classname.replace(" active", ""); } slides[slideindex-1].style.display = "block"; dots[slideindex-1].classname += " active"; } var today = new date(); document.getelementbyid('time').innerhtml=today; </script> </body> </html>
the codes posted along question doesn't point out issue (what button , div) simple open div on click javascript be
if div default display: none
$(document).ready(function() { $('.button').click(function() { $('div').fadein(); //could .show() or .css("display", "block") }); }); if links .preventdefault()
$(document).ready(function(e) { e.preventdefault(); $('.button').click(function() { $('div').fadein(); //could .show() or .css("display", "block") }); });
Comments
Post a Comment