Jump to content

impressDesign

Members
  • Posts

    2
  • Joined

  • Last visited

Everything posted by impressDesign

  1. Hi, I was wondering if anyone out there knows a work around for getting the JQuery smoothScroll script (or any other smooth scroll script) to work when you have your first div to display full screen?. The script I use works perfectly normally but this is the first time I've used it on a page with the opening div set to be full screen. Ive done a bit of research and it seems its either the div that is set to 100% height or the body with an overflow set to hidden thats the problem. ...or both. I think I understand that with these settings the browser thinks there is nothing to scroll to so the script doesn't trigger - is that right? I can't write JavaScript so I was wondering if there is a CSS work around for this to get it working...? The page I have at the moment has a div that opens full page with a wowSlider background. I took this code from the wowslider site so not sure if there is a better way to do it or not?? CSS: body { overflow: hidden; margin:0px; padding:0px; text-align:center; font-family: 'Montserrat', sans-serif; color:#000; } #wowslider-container1 { position: absolute; top: 0; left: 0; z-index: 0; } .content { position: absolute; top: 0; left: 0; bottom: 0; right: 0; overflow: auto; z-index: 1; } .full-wrapper { width: 100%; min-height: 100%; } HTML <div id="wowslider-container1"> - the background slider </div> <div class="content"> - wraps all the content that goes over the slider <div class="full-wrapper"> - the first div that is set to full screen </div> <div class="normalDiv"> - normal divs there after </div> <div class="normalDiv"> </div> </div>
  2. I was wondering if anyone out there can tell me a better way to replicate the main menu on the site www.sklz.com. Its a basic dropdown menu but the dropdown section is full width (instead of being under the menu item itself). Im assuming that the menu on this site is JavaScript driven but I was hoping to make it purely from CSS. I am open to doing a JS or JQuery based one if there is an easy solution but as mention, would prefer CSS. Ive played around and come up with the below CSS based solution but I'm not sure its the best way to do it... CSS ------------ body { margin:0px; padding:0px; text-align:center; } .dropdown { position: relative; display:block; cursor:pointer; width:25%; float:left; } .dropdownText { text-decoration:none; padding:20px 0px; background-color:#000; color:#fff; position: relative; z-index:20; margin:0px 0px 0px 0px; } .dropdown-content { display: block; position:fixed; left:0; background-color: #f9f9f9; width:100%; box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); padding: 12px 16px; z-index: 10; margin:-200px 0px 0px 0px; transition:all ease-out 1s; } .dropdown:hover .dropdown-content { display: block; margin:0px 0px 0px 0px; } HTML ------------------ <div style="width:100%; z-index:5; position:relative;"> <div class="dropdown"> <div class="dropdownText">Mouse over me 1</div> <div class="dropdown-content"> <div style="float:left; width:32%"> <p><a href="#">Product link 1</a></p> <p><a href="#">Product link 1</a></p> <p><a href="#">Product link 1</a></p> </div> <div style="float:left; width:32%"> <p><a href="#">Product link 1</a></p> <p><a href="#">Product link 1</a></p> <p><a href="#">Product link 1</a></p> </div> <div style="float:left; width:32%"> <p><a href="#">Product link 1</a></p> <p><a href="#">Product link 1</a></p> <p><a href="#">Product link 1</a></p> </div> </div> </div> <div class="dropdown"> <div class="dropdownText">Mouse over me 2</div> <div class="dropdown-content"> <div style="float:left; width:49%"> <p><a href="#">Product link 1</a></p> <p><a href="#">Product link 1</a></p> <p><a href="#">Product link 1</a></p> </div> <div style="float:left; width:49%"> <p><a href="#">Product link 1</a></p> <p><a href="#">Product link 1</a></p> <p><a href="#">Product link 1</a></p> </div> </div> </div> <div class="dropdown"> <div class="dropdownText">Mouse over me 3</div> <div class="dropdown-content"> <p><a href="#">Product link 1</a></p> <p><a href="#">Product link 1</a></p> <p><a href="#">Product link 1</a></p> </div> </div> <div class="dropdown"> <div class="dropdownText">Mouse over me 4</div> <div class="dropdown-content"> <p><a href="#">Product link 1</a></p> </div> </div> <div style="clear:both;"></div> </div>
×
×
  • Create New...