Jump to content

Search the Community

Showing results for tags 'dropdown menu'.



More search options

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


Forums

  • W3Schools
    • General
    • Suggestions
    • Critiques
  • HTML Forums
    • HTML/XHTML
    • CSS
  • Browser Scripting
    • JavaScript
    • VBScript
  • Server Scripting
    • Web Servers
    • Version Control
    • SQL
    • ASP
    • PHP
    • .NET
    • ColdFusion
    • Java/JSP/J2EE
    • CGI
  • XML Forums
    • XML
    • XSLT/XSL-FO
    • Schema
    • Web Services
  • Multimedia
    • Multimedia
    • FLASH

Find results in...

Find results that contain...


Date Created

  • Start

    End


Last Updated

  • Start

    End


Filter by number of...

Joined

  • Start

    End


Group


AIM


MSN


Website URL


ICQ


Yahoo


Jabber


Skype


Location


Interests


Languages

Found 7 results

  1. J.P

    Dropdown Menu Responsive

    Good Morning , Ive added a menu bar into my test site and it displays fine on desktop , but experiencing issues on phones and tablets . The menu bar does responds and fits to the relevant size of the screen, however the drop down button / link stays at the top in the main part of the nav bar instead of dropping into the relevant order of menu links . Please see the issue here http://www.jrstech.co.uk/OrginalHCForum/ Please could anyone provide some help, i'm sure I've missed something simple ! Thank you for your help in advance . here is my code for the menu bar : <div class="topnav" id="myTopnav"> <a class="nav-link" href="https:\\www.whufc.com">Home</a> <a class="nav-link" href="#">Blogs</a> <a class="nav-link" href="#">Videos</a> <a class="nav-link" href="#">Thames Iron Works</a> <div class="nav-dropdown"> <button class="nav-dropbtn">Dropdown <i class="fa fa-caret-down"></i> </button> <div class="dropdown-content"> <a href="#">Link 1</a> <a href="#">Link 2</a> <a href="#">Link 3</a> </div> </div> <a class="nav-link" href="#">Contact Us</a> <a href="javascript:void(0);" style="font-size:15px;" class="icon" onclick="myFunction()">&#9776;</a> </div> here's my CSS : .topnav { overflow: hidden; background: #782b3a; box-shadow: inset 1px 0 7px 1px rgba(255,255,255,.5); margin-top: 10px; margin-bottom: 10px; padding: 12px ; text-align: center; font: normal normal medium 'Trebuchet MS',Verdana,Arial; border-bottom: 2px solid #1bb1e7; } .active { border-bottom: 4px solid #fff; color: white; } .topnav .icon { display: none; color: #fff; } .nav-dropdown { background: #782b3a; color: #ffffff; font-size: 20px; text-decoration: none; border-top: 0px solid #782b3a; border-bottom: 0px solid #782b3a; padding: 4px 0; margin: 0 10px ; display: inline-block; } .nav-dropdown .nav-dropbtn { font-size: 20px; border: none; outline: none; color: white; background-color: #782b3a; font-family: inherit; margin: 0px; transition: 0.95s ease; background: #782b3a; color: #ffffff; font-size: 20px; text-decoration: none; border-top: 0px solid #782b3a; border-bottom: 0px solid #782b3a; padding: 2px 0; margin: 0 0px ; } .dropdown-content { background-color: #782b3a; border-radius: 13px; display: none; position: absolute; background-color: #782b3a; min-width: 50px; z-index: 1; padding: 0px; } .dropdown-content a { float: none; color: white; padding: 12px 16px; text-decoration: none; display: block; text-align: left; margin-top: 0 10px ; transition: 0.95s ease; border-bottom: 4px solid #782b3a; padding: 2px 0px; } .nav-link { background: #782b3a; color: #ffffff; font-size: 20px; text-decoration: none; border-top: 0px solid #782b3a; border-bottom: 0px solid #782b3a; padding: 2px 0; margin: 0 10px ; display: inline-block; } .nav-link:hover { border-top: 2px solid #782b3a; border-bottom: 3px solid #1bb1e7; padding: 0px 0; color: #ffffff; text-decoration: none; transition: 0.45s ease; } .2topnav a:hover, .dropdown:hover .dropbtn { height: 0px; border-bottom: 44px solid #fff; padding: 3px 50px; } .dropdown-content a:hover { background-color: #fff; color: black; background: #782b3a; color: #ffffff; font-size: 20px; text-decoration: none; border-bottom: 4px solid #1bb1e7; padding: 2px 0; } .nav-dropdown:hover .dropdown-content { display: block; border-bottom: 2px solid #1bb1e7; Padding: 10px 20px; } Here's my responsive code @media screen and (max-width: 600px) { .topnav a:not(:first-child), .dropdown .dropbtn { display: none; } .topnav a.icon { float: right; display: block; } } @media screen and (max-width: 600px) { .topnav.responsive {position: relative;} .topnav.responsive .icon { position: absolute; right: 0; top: 0; } .topnav.responsive a { float: none; display: block; text-align: left; } .topnav.responsive .dropdown {float: left;} .topnav.responsive .dropdown-content {position: relative;} .topnav.responsive .dropdown .dropbtn { display: block; width: 100%; text-align: left; } }
  2. Hi, I am using w3css top navigation bar using a drop down menu. I would like to have a multilevel drop down menu for some of the items. I would like that each season opens up to another submenu where I can display eg, the years pictures or blogs etc. At the moment the code for the html and css is eg, HTML <div class="dropdown"> <button class="dropbtn"><strong>History</strong></button> <div class="dropdown-content"> <a href="#">Season2016</a> <a href="#">Season 2017</a> </div> </div> CSS .dropdown { font-family: "Comic Sans MS", cursive, sans-serif; float: left; overflow: hidden; } .dropdown .dropbtn { font-family: "Comic Sans MS", cursive, sans-serif; font-size: 16px; border: none; outline: none; color: black; padding: 14px 16px; background-color: inherit; } .dropdown-content { display: none; position: absolute; background-color: #f9f9f9; min-width: 160px; box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); z-index: 1; } .dropdown-content a { float: none; color: black; padding: 12px 16px; text-decoration: none; display: block; text-align: left; } .dropdown-content a:hover { background-color: #ddd; } .dropdown:hover .dropdown-content { display: block; }
  3. Hi, in this hover dropdown menu example (https://www.w3schools.com/howto/tryi...ropdown_navbar), the menu words are aligned left starting from 'Home'. Where do you place the 'text-align: center' statement in the coding to shift all the words towards the center of the navigation bar? Somehow it isn't as simple as it seems to me. For your benefit, I attach sample coding in example.html. Thanks for your advice. example.html
  4. I have tried with various ways to make a selection of an option from a dropdown menu using jquery. Here is the menu: <select class="dropdown"> <option value="08:00">08:00</option> <option value="08:30">08:30</option> <option value="09:00">09:00</option> <option value="09:30">09:30</option> <option value="10:00">10:00</option> </select> I have tried various js codes but I cannot make it work-here is what I have tried: $(".dropdown").prop("selected","08:30");$( ".dropdown" ).attr("selected","08:30");$(".dropdown option[value=08:30]").prop("selected"); I am trying to set(for example) the option to 08:30
  5. Internet Explorer (even 9) has been nothing but a royal and complete pain in the *** thus far. I finally got a dropdown menu working via CSS and it works great in Firefox and Chrome. However! There's one major problem.. When ever I add a list-style-image or even a list-style-type tag, it appears above everything in Internet Explorer. I'll post the code below, and if anyone can figure out this problem or how to fix it i'll sign my soul to you. PLEASE READ: To see the list effects, I have only added them to two areas at the moment. Diablo 3's "Class Guide" menu and the sub-menu "Barbarian" should have the list-style effects applied to them. View the site in internet explorer to see the problem for yourself *REMOVED* For Analytics purposes Here's the code:/* THE CSS MENU * KEEP COLORS:#1B1B1B, #808080, #282828, #FFD100*/ #nav {float:left;margin:0;padding:0;}#nav li .sub {list-style-image:url(../images/list.png…#nav li a, #nav li {float:left;/*border-radius: 40px 0 / 40px 0;*/}#nav li {list-style:none;position:relative;z-ind…#nav li a {padding: 8px 1.5em;text-decoration:none;color:white;b… solid #808080;border-left:1px solid #404040;border-top:1px solid #404040;background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#808080), to(#1B1B1B));background: -webkit-linear-gradient(top, #808080, #1B1B1B); background: -moz-linear-gradient(top, #808080, #1B1B1B);background: -ms-linear-gradient(top, #808080, #1B1B1B);background: -o-linear-gradient(top, #808080, #1B1B1B);filter: progid:DXImageTransform.Microsoft.gradie… endColorstr='#1B1B1B'); /* IE6 & IE7 */-ms-filter: "progid:DXImageTransform.Microsoft.gradi… endColorstr='#1B1B1B')"; /* IE8 */box-shadow: inset 3px 3px 15px #404040;}#nav li a:hover {background:#282828;color:#FFD100;background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#808080), to(#000));background: -webkit-linear-gradient(top, #808080, #000); background: -moz-linear-gradient(top, #808080, #000);background: -ms-linear-gradient(top, #808080, #000);background: -o-linear-gradient(top, #808080, #000);filter: progid:DXImageTransform.Microsoft.gradie… endColorstr='#000000'); /* IE6 & IE7 */-ms-filter: "progid:DXImageTransform.Microsoft.gradi… endColorstr='#000000')"; /* IE8 */box-shadow: inset 3px 3px 15px #000;}/* SUBMENU */#nav li ul {display:none;position:absolute;left:0;t…#nav li:hover > ul {display:block;z-index:100;}#nav li ul li, #nav li ul li a {float:none;}#nav li ul li a {width:150px;display:block;} /* SUB SUB MENU */ #nav li ul li ul {display:none;}#nav li ul li:hover ul {left:100%;top:0;}
  6. I've been working on this for a while and I've had varying levels of success but have not been able to achieve what I'm after so far. I'm looking to do this with CSS, no jquery or anything like it. I followed the "Son of Suckerfish" tutorial and that got me somewhat there, but when I tried to make the 2nd level dropdown, it started getting all funky and I haven't been able to figure it out. Not to mention, it isn't working properly in IE9 or FF, only Chrome and Safari (for Windows). Below is the design view of the dropdown navigation: So far, I've gotten it most of the way, but the 2nd level area with the green background, it does funky things with positioning and seems as if it has 2 different colored backgrounds. I'm sure it has something to do with the way the jquery is being used to position the first dropdown and it's causing the 2nd to act funny.Basically, I'd like to get rid of the jquery, or at least figure out how to make it work with the way I've got it setup, and then figure out why the positioning is all wonky on the 2nd dropdown. Below is my CSS: /* Navigation */#nav {font-family:Georgia; position: relative; width: 900px; height: 30px; font-size: 16px; font-weight: bold; color: #333; margin: 0px auto; padding:20px 14px 0 0;}#nav ul {list-style: none;}#nav a:link, #nav a:visited {display: inline-block; text-decoration:none; color:#333; padding: 0 10px; margin:0 6px 0 6px;}#nav a:active, #nav a:hover {background: #3d3d3d; color: #cbdb2a;}#nav li {float: left; width: auto;}#nav li ul {position: absolute; width: 8em; left: -999em; text-align: center;}#nav li:hover ul.nav_dd_1 li a {display: block; left: auto; background: #3d3d3d; font-family:Arial; font-size: 12px; color: #fff; width: 82px; margin: 0 6px 0 6px;}#nav li:hover ul.nav_dd_2 li a {display: block; left: auto; background: #3d3d3d; font-family:Arial; font-size: 12px; color: #fff; width: 157px; margin: 0 6px 0 6px;}#nav li:hover ul.nav_dd_2 li ul li a {background: #cbdb2a; color: #333;}#nav li:hover ul.nav_dd_3 li a {display: block; left: auto; background: #3d3d3d; font-family:Arial; font-size: 12px; color: #fff; width: 158px; margin: 0 6px 0 6px;}#nav li:hover ul.nav_dd_4 li a {display: block; left: auto; background: #3d3d3d; font-family:Arial; font-size: 12px; color: #fff; width: 163px; margin: 0 6px 0 6px;}#nav ul li:hover ul li a:hover {background: #cbdb2a; color: #333; }#nav li:hover ul, #nav li.sfhover ul {left: auto; text-align: center; }#nav li ul ul {margin: -25px 0 0 183px; width: 157px; background: #cbdb2a; color: #333; font-family: Arial; font-size: 12px; height: 25px;}#nav ul li:hover ul li ul li a:hover {background: #fff; color: #333; margin-left: 0px; height: 25px; width: 157px;}#nav li:hover ul ul, #nav li.sfhover ul ul {left: -999em;}#nav li:hover ul, #nav li li:hover ul, #nav li.sfhover ul, #nav li li.sfhover ul {left: auto;} And the HTML: <div id="nav"> <ul> <li><a href="#1">Why Lake</a>| <ul class="nav_dd_1"> <li><a href="#">Test Link</a></li> <li><a href="#">Test Link</a></li> <li><a href="#">Test Link</a></li> <li><a href="#">Test Link</a></li> </ul> </li> <li><a href="#2">Community Profile</a>| <ul class="nav_dd_2"> <li><a href="#">Test Link</a> <ul> <li><a href="#">Sub Link</a></li> <li><a href="#">Sub Link</a></li> <li><a href="#">Sub Link</a></li> </ul> </li> <li><a href="#">Test Link</a></li> <li><a href="#">Test Link</a></li> <li><a href="#">Test Link</a></li> </ul> </li> <li><a href="#3">Business Retention</a>| <ul class="nav_dd_3"> <li><a href="#">Test Link</a></li> <li><a href="#">Test Link</a></li> <li><a href="#">Test Link</a></li> <li><a href="#">Test Link</a></li> </ul> </li> <li><a href="#4">Business Attraction</a>| <ul class="nav_dd_4"> <li><a href="#">Test Link</a></li> <li><a href="#">Test Link</a></li> <li><a href="#">Test Link</a></li> <li><a href="#">Test Link</a></li> </ul> </li> <li><a href="#5">News</a>| </li> <li><a href="#6">About Us</a> </li> </ul></div> I'm looking for any help anyone is willing to offer. Thanks!
  7. Does anyone know how to get this dropdown working, i got the first submenu to work but im not getting the third one to work at allThis is the CSS im using to make it work well partly work: <style type="text/css"><!--#menu {margin:0px;padding:0px;}#menu ul {margin:0px;padding:0px;line-height:25px;}#menu li {margin:0px;padding:0px;list-style:none;float:left;position:relative;background:#ABABAB;}#menu ul li a {text-align:center;text-decoration:none;height:30px;width:100px;display:block;color:#E5E5E5;border:1px solid #fff;text-shadow:1px 1px 1px #000;}#menu ul ul {position:absolute;visibility:hidden;top:32px;}#menu ul li:hover ul {visibility:visible;}/**********************************/#menu li:hover {background:#900;}#menu ul li:hover ul li a:hover{background:#ccc;color:#000;}#menu a:hover {color:#fff;}--></style></head><body><div id="menu"><ul><li><a href="#">Home</a></li> <li><a href="#">Products</a> <ul> <li><a href="#">Ice Cream</a> <ul> <li><a href="#">Mango</a></li> </ul> </li> </ul> </li> </ul></div></body></html> anyone know what im doing wron?
×
×
  • Create New...