Jump to content

MysteryLover

Members
  • Posts

    2
  • Joined

  • Last visited

MysteryLover's Achievements

Newbie

Newbie (1/7)

0

Reputation

  1. I've looked through a lot of responses to questions here, and the only consistent thing seems to be how rude the "guru" replies are... is it a requirement to be as rude as possible when replying? I'm not likely to bother using these forums after this... There are plenty of other places to learn about things without the nasty attitude from supposed experts. I didn't realize you required the code examples from your own site to answer my question - but I've pasted the JavaScript and CSS below. To have multiple buttons that work, I have had to create multiple versions of these code blocks to correspond with the individual buttons... example btn1Function and btn2Function, btn1ID and btn2ID, etc. I don't want to have to do that for every button if I want them to look and act the same (hence my posting title Apply same style to multiple nav buttons...). Is there a way to do the code once, but have it apply to/be referenced by multiple buttons? This is the JavaScript code: /* When the user clicks on the button, toggle between hiding and showing the dropdown content */ function myFunction() { document.getElementById("myDropdown").classList.toggle("show"); } // Close the dropdown menu if the user clicks outside of it window.onclick = function(event) { if (!event.target.matches('.dropbtn')) { var dropdowns = document.getElementsByClassName("dropdown-content"); var i; for (i = 0; i < dropdowns.length; i++) { var openDropdown = dropdowns; if (openDropdown.classList.contains('show')) { openDropdown.classList.remove('show'); } } } } This is the CSS that goes with it: /* Dropdown Button */ .dropbtn { background-color: #3498DB; color: white; padding: 16px; font-size: 16px; border: none; cursor: pointer; } /* Dropdown button on hover & focus */ .dropbtn:hover, .dropbtn:focus { background-color: #2980B9; } /* The container <div> - needed to position the dropdown content */ .dropdown { position: relative; display: inline-block; } /* Dropdown Content (Hidden by Default) */ .dropdown-content { display: none; position: absolute; background-color: #f1f1f1; min-width: 160px; box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); z-index: 1; } /* Links inside the dropdown */ .dropdown-content a { color: black; padding: 12px 16px; text-decoration: none; display: block; } /* Change color of dropdown links on hover */ .dropdown-content a:hover {background-color: #ddd} /* Show the dropdown menu (use JS to add this class to the .dropdown-content container when the user clicks on the dropdown button) */ .show {display:block;}
  2. How can I avoid having to create an individual CSS and JavaScript entry for every button in a nav bar? Since every button has to have a unique ID for the JavaScript to work on it, I want to avoid having to literally write/copy-paste the same JS code for every button. I'm just starting to learn JavaScript because of the "on click" necessary for my nav buttons, so I've not clear how I can reference that same code for every button. I can make it work if I have a full code entry in my .js file for each button, but I can't figure out how to just have the code once. I took the code from the W3Schools examples of clickable nav buttons, and I'm nesting them a couple layers deep. Thank you! C
×
×
  • Create New...