Goedemiddag,
Ik ben al een tijdje aan het kloten met de sidebar op webshop.dgdevelopment.nl maar kom er niet uit waarom hij het de eerste keer doet zoals het hoort, maar daana niet meer.
Alvast bedankt ;)
HTML / JQuery:
CSS:Code:<!DOCTYPE html> <html> <head> <title>SCN Cashier</title> <meta charset="utf-8" /> <link rel="stylesheet" type="text/css" href="/core/template/css/style.css" /> <script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script> <script type="text/javascript"> $(document).ready(function() { $(".left .sideMenu").hover(function() { $(".left .sideMenu a#toggle").animate({left: 340, height: 60}, 1000); $(".left .sideMenu .content").animate({left: 0, height: 1000, width: 300}, 1000, function() { $(".left .products, .left .sideMenu a#toggle").hover(function() { //Add this: ", .left .sideMenu a#toggle" for buggy handle $(".left .sideMenu a#toggle").animate({left: 0, height: 60}, 1000); $(".left .sideMenu .content").animate({left: -340, height: 1000, width: 300}, 1000); $(".left .sideMenu a#toggle").html("››"); }); }); //$(".left .sideMenu .content").css({boxShadow: '3px 0 10px #999999'}); $(".left .sideMenu a#toggle").html("‹‹"); }); }); </script> </head> <body> <div id="content"> <div class="left"> <div class="sideMenu"> <a href="#" id="toggle">››</a> <div class="content"> <h2>Product Category:</h2> <nav> <a href="#">Drinken</a> <a href="#">Eten</a> </nav> </div> </div> <div class="products"> <div class="product"> <h2>Cola</h2> <img src="/core/template/images/cola.png" width="75"> </div> </div> </div> <div class="right"> <div class="content"> <h2>Cart:</h2> </div> </div> </div> </body> </html>
Code:*{ margin: 0; padding: 0; } body { font-family: Verdana; font-size: 15px; color: #555555; font-weight: lighter; } #content { } /*yet to specify*/ #content .left { width: 80%; height: 1000px; float: left; background: #dfdfdf; } #content .left .sideMenu a#toggle { width: 20px; height: 60px; padding: 40px 0 0 5px; display: inline-block; text-decoration: none; color: #FFFFFF; top: 50%; position: fixed; z-index: 100; background: #a9a9a9; border-top-right-radius: 5px; border-bottom-right-radius: 5px; } /*#content .left .sideMenu .content { width: 200px; height: 1000px; top: 0; left: 0; display: none; position: fixed; background: #a9a9a9; }*/ #content .left .sideMenu .content { width: 300px; height: 1000px; padding: 20px; background: blue; position: fixed; top: 0; left: -340px; background: #a9a9a9; } #content .left .sideMenu .content h2 { color: #f5006d; } #content .left .sideMenu .content nav { position: relative; margin-top: 20px; } #content .left .sideMenu .content nav a { width: 100%; height: 30px; padding: 10px; display: inline-block; background: #dfdfdf; border-bottom: 1px solid #a9a9a9; } #content .left .products { padding: 20px; width: 100%; height: 100%; } #content .right { float: right; width: 20%; height: 1000px; background: #cfcfcf; } #content .right .content { padding: 20px; } #content .right .content h2 { color: #f5006d; }
- JQuery sidebar bugt
-
27-06-2013, 13:46 #1Particulier
- Berichten
- 403
- Lid sinds
- 14 Jaar
JQuery sidebar bugt
-
In de schijnwerper
Goedkope 10 Gbps Virtual Private Server (VPS) in Nederland (Met PURE NVMe opslag!)HostingProfessionele tekstschrijver 2 cent per woord (geen AI)Freelance / WerkUitermate Complete en Betrouwbare Webhosting: Vanaf €3,99 per maand!Hosting(Dag)aanbieding/kortingscode website | Incl. FB Pagina 10k / nieuwsbrief 13K abboneesWebsite te koop
Plaats een
- + Advertentie
- + Onderwerp
Marktplaats
Webmasterforum
- Websites algemeen
- Sitechecks
- Marketing
- Domeinen algemeen
- Waardebepaling
- CMS
- Wordpress
- Joomla
- Magento
- Google algemeen
- SEO
- Analytics
- Adsense
- Adwords
- HTML / XHTML
- CSS
- Programmeren
- PHP
- Javascript
- JQuery
- MySQL
- Ondernemen algemeen
- Belastingen
- Juridisch
- Grafisch ontwerp
- Hosting Algemeen
- Hardware Info
- Offtopic