Jump to content

Search the Community

Showing results for tags 'menu'.

  • 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

  1. Hey, so i am currently puting these menu onto my website but i need it to be on the left side and when it opens slide from right to left. How do i change it, i can't find the way to do it. https://codepen.io/erikterwan/pen/EVzeRP
  2. I'm having a problem implementing this Responsive Topnav Example. I've copied the code as is, without any change and it just does not behave like on the w3 site. It fails to reduce in width below about 750px and the mobile menu never appears. Interested to know if anyone else has tried this! Also, how can the selected menu item be shown by color as being the active item? Appreciate some help with this.
  3. I'm glad to announce the release of w3-ddmenu version 1.0. What is it?. It's a drilldown menu fully compatible with w3.css, with an easy setting and very light. For more details, you can visit http://github.com/lamuzzachiodi/w3-ddmenu. I hope it is useful to the w3.css community. Saludos, Alejandro
  4. Below is an excerpted example from the w3schools website with a right justified on hover dropdown but the dropdown will NOT right justify. Can someone please assist here? Thankyou. <!DOCTYPE html> <html> <title>W3.CSS</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css"> <body> <div class="w3-container"> <h2>Navigation Bar with Dropdown</h2> <p>Add a dropdown menu inside the navigation bar:</p> <div class="w3-bar w3-light-grey"> <a href="#" class="w3-bar-item w3-button">Home</a> <a href="#" class="w3-bar-item w3-button">Link 1</a> <div class="w3-dropdown-hover w3-right"> <button class="w3-button">Dropdown</button> <div class="w3-dropdown-content w3-bar-block w3-card-4" style="right:0"> <a href="#" class="w3-bar-item w3-button">Link 1</a> <a href="#" class="w3-bar-item w3-button">Link 2</a> <a href="#" class="w3-bar-item w3-button">Link 3</a> </div> </div> </div> </div> </body> </html>
  5. I have studied HTML and CSS self-taught several times, but I forget everything. It's not for me. So I took Wordpress and chose OceanWP as the theme. I would like some customizations on the OceanWP theme, can I put a wish list on the forum? Thanks to W3school, I know what I would like.
  6. I have a fixed menu with a centered logo, left and right menu items. My float right menu items are showing beside the hamburger menu on responsive/mobile settings. The menu uses float: right for positioning the hamburger menu and the menu items. <div class="topnav" id="myTopnav"> <div class="topnav-centered"> <a href="index.html">JACQUELYN MCGARRY</a> </div> <div class="topnav-right"> <a href="shop.html">SHOP</a> <a href="work.html">WORK</a> </div> <a href="about.html">ABOUT</a> <a href="contact.html">CONTACT</a> <a href="javascript:void(0);" class="icon" onclick="myFunction()"><i class="fa fa-bars"></i> </a> </div> <script> function myFunction() { var x = document.getElementById("myTopnav"); if (x.className === "topnav") { x.className += " responsive"; } else { x.className = "topnav"; } } </script> .topnav { position: fixed; top: 0; width: 100%; padding: 0px; background-color: #f9f7f7; overflow: hidden; text-transform: uppercase; letter-spacing: 2px; border-bottom-style: solid; border-width: 2px; } .topnav a { float: left; display: block; color: #000000; text-align: center; padding: 14px 24px 12px 24px; text-decoration: none; font-size: 13px; font-weight: 900; font-style: normal; } .topnav a:hover { padding: 12px 22px 10px 22px; border-style: solid; border-width: 2px; border-radius: 50%; color: #101010; } .topnav .icon {display: none;} @media screen and (max-width: 600px) { .topnav a{ float: none; display: block; } .topnav-centered a { position: relative; top: 0; left: 0; transform: none; } } @media screen and (max-width: 600px) { .topnav-right { background-color: red; float: none; } } .topnav-centered a { float: none; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } .topnav-right { float: right; } @media screen and (max-width: 500px) { .topnav a:not(:first-child) {display: none;} .topnav a.icon { float: left; display: block; } } @media screen and (max-width: 500px) { .topnav.responsive {position: fixed;} .topnav.responsive .icon { position: absolute; right: 0; top: 0; } .topnav.responsive a { float: none; display: block; /* text-align: left;*/ } }
  7. I created a mobile navigation menu which display navigation icons in the bottom of the mobile screen. I linked google icons page where I'm taking the icons. All 5 icons are displaying in the bottom of screen, however now I'm stuck and don't have an idea how to add links of pages in the menu bar. I mean there is icon with three bar for main menu, like I want to add contact.html, blog.html, images.html in that icon. I mean whenever user click on the three bar it should display the links of these pages where user can click on of those and read. I appreciate your help. Here is the html code here is the CSS code
  8. I'm working on a wordpress website and I have a problem. I have a fixed menu at the top of my website. I added padding-top px to the "content" id. this way my content starts below the header. The problem I am facing right now is that when I'm using anchor links my content wil start underneath the menu. Is there a way I can let my content start below the menu without adding extra padding to the top of the content so that when I'm using anchor links this wil start below the menu? CSS below (text + image): #header-grid { position: fixed; width: 100%; z-index: 1000; /*Werkt alleen in combinatie met "content" id*/ } #content { padding-top: 65px; /* deze werkt samen met "header-grid" id zodat de "sticky menu" de pagina's niet overlappen heb ik de pagina content 65 pixels naar beneden gezet.*/ } @media only screen and (max-width: 768px) { #content { padding-top: 57px; }/*Deze is heeft dezelfde functie als "content" class alleen dan voor responsive voor tablet/mobiel*/ } Also from the inspector:
  9. I've created an outline button menu following the samples here: How TO - Outline Buttons . One of the outline buttons needs to have 3 dropdown items. I've reviewed the samples here: How TO - Dropdown Navbar , but am confused if I can add the dropdown function to only one of the outline buttons. I've attached a screen shot of the effect I'd like to create - except I'd like each item in the dropdown to be a separate outline button. This example is from a CMS we have decided not to use. Here's the HTML code I'm using to create the web page: Thanks in advance.
  10. I'm trying to set up a template for a website, with a responsive top border with dropdowns in the navigation bar. I thought I had it all working at one time, but have gone back to previous files to no avail. The menu is responsive, and goes down into a hamburger icon, but clicking on the hamburger icon does nothing. I'm trying to do this without using too many external files. I think the problem must be in the javascript function combined with the media queries, but I haven't been able to see the problem. I used the W3Schools responsive navbar with dropdowns, from https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_responsive_navbar_dropdown as a basis for this. The files I have are index.htm, a top border file, top.htm in the folder _borders, and 2 css files in a css folder: mystyles.css and topnav.css. This is the basic code from index.htm. I excluded site-identifying code and content. I've attached the other 3 files - didn't know how to paste them here separately. In the top.htm and index.htm I've commented out references to the mystyles.css file and it doesn't make any difference. I'm using Brackets for this, and using Live Preview. If I just open the index file directly in Chrome or Firefox, there is no formatting, no nav bar or menu. But it looks just lovely in the Brackets Live Preview (other than the hamburger icon not responding. With my working website, I can open the index file in Chrome or Firefox and all is good. If someone can provide some direction I'd really appreciate it! <!DOCTYPE html> <html lang="en-us"> <head> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="Content-Type" content="text/html; charset=windows-1252"> <meta name="author" content="USTaxTips.net"/> <link rel="stylesheet" href="../css/mystyles.css"> <link rel="shortcut icon" href="/favicon.ico"> </head> <body> <div w3-include-html="_borders/top.htm"></div> <script> includeHTML(); </script> <div id="container"> </div> </body> </html> mystyles.css topnav.css top.htm
  11. Hi, I'm trying to to create a mega menu as https://www.w3schools.com/howto/howto_css_mega_menu.asp with only images, but the dropdown goes full-width screen and I can't fit it to the menu. Thanks <!DOCTYPE html> <html> <head> <style> * { box-sizing: border-box; } body { margin: 0; } .navbar { overflow: hidden; background-color: #333; font-family: Arial, Helvetica, sans-serif; } .navbar a { float: left; font-size: 16px; color: white; text-align: center; padding: 14px 16px; text-decoration: none; } .dropdown { float: left; overflow: hidden; width: 1000; } .dropdown .dropbtn { font-size: 14px; border: none; outline: none; color: white; padding: 14px 16px; background-color: inherit; margin: 0; } .navbar a:hover, .dropdown:hover .dropbtn { background-color: red; } .dropdown-content { display: none; position: absolute; background-color: #f9f9f9; width: 100%; left: 0; box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); z-index: 1; } .dropdown-content .header { width: 1000; color: black; text-decoration: none; display: block; } .dropdown:hover .dropdown-content { display: block; } /* Create three equal columns that floats next to each other */ .column { width: 1000; display: block; } .column a { float: none; color: black; padding: 16px; text-decoration: none; display: block; width: 1000; } .column a:hover { background-color: #ddd; width: 1000; } /* Clear floats after the columns */ .row:after { content: ""; display: table; clear: both; width: 1000; } </style> </head> <body> <tr align="center"><td><table width=1000 align="center"><tr><td> <div class="navbar"> <div class="dropdown"> <button class="dropbtn">2005 <i class="fa fa-caret-down"></i> </button> <div class="dropdown-content"> <div class="row"> <div class="column"> <a href="http://www.e-minis.net/fantasia-warhammer-underworlds-c-735_6793.html">Comenzamos nuestra aventura con ilusión, nuestro primer pedido vino de Madrid. El segundo se hizo de rogar unos días pero se fue para Barcelona <br><img alt="Warhammer Underworlds Beastgarve" border="0" height="450" src="http://www.e-minis.net/images/correos/whu-Beastgrave-large.jpg" title="Warhammer Underworlds Beastgarve" width="798"></a> </div> </div> </div> </div> <div class="dropdown"> <button class="dropbtn">2006 <i class="fa fa-caret-down"></i> </button> <div class="dropdown-content"> <div class="row"> <div class="column"> <a href="http://www.e-minis.net/index.php?cPath=735_2447_7402"><img src="http://www.e-minis.net/images/correos/kow3-portada01.jpg" width="798" height="465" border="0" alt="Kings of War tercera edición" title="Kings of War tercera edición"></a> </div> </div> </div> </div> <div class="dropdown"> <button class="dropbtn">2007 <i class="fa fa-caret-down"></i> </button> <div class="dropdown-content"> <div class="row"> <div class="column"> <a href="http://www.e-minis.net/enanos/llameadores-p-106386.html"><img src="http://www.e-minis.net/images/correos/MOM-LLAMEADORES01-PORTADA.jpg" width="798" height="445" border="0" alt="MOM Minhiaturas" title="MOM Minhiaturas"></a> </div> </div> </div> </div> <div class="dropdown"> <button class="dropbtn">2008 <i class="fa fa-caret-down"></i> </button> <div class="dropdown-content"> <div class="row"> <div class="column"> <a href="http://www.e-minis.net/juegos-estrategia-cancion-hielo-fuego-juego-miniaturas-c-287_2905_7173.html"><img src="http://www.e-minis.net/images/correos/got-veteranswatch-large.jpg" width="798" height="416" border="0" alt="Canción de hielo y fuego" title="Canción de hielo y fuego"></a> </div> </div> </div> </div> <div class="dropdown"> <button class="dropbtn">2009 <i class="fa fa-caret-down"></i> </button> <div class="dropdown-content"> <div class="row"> <div class="column"> <a href="http://www.e-minis.net/juegos-estrategia-cancion-hielo-fuego-juego-miniaturas-c-287_2905_7173.html"><img src="http://www.e-minis.net/images/correos/got-veteranswatch-large.jpg" width="798" height="416" border="0" alt="Canción de hielo y fuego" title="Canción de hielo y fuego"></a> </div> </div> </div> </div> <div class="dropdown"> <button class="dropbtn">2010 <i class="fa fa-caret-down"></i> </button> <div class="dropdown-content"> <div class="row"> <div class="column"> <a href="http://www.e-minis.net/juegos-estrategia-cancion-hielo-fuego-juego-miniaturas-c-287_2905_7173.html"><img src="http://www.e-minis.net/images/correos/got-veteranswatch-large.jpg" width="798" height="416" border="0" alt="Canción de hielo y fuego" title="Canción de hielo y fuego"></a> </div> </div> </div> </div> <div class="dropdown"> <button class="dropbtn">2011 <i class="fa fa-caret-down"></i> </button> <div class="dropdown-content"> <div class="row"> <div class="column"> <a href="http://www.e-minis.net/juegos-estrategia-cancion-hielo-fuego-juego-miniaturas-c-287_2905_7173.html"><img src="http://www.e-minis.net/images/correos/got-veteranswatch-large.jpg" width="798" height="416" border="0" alt="Canción de hielo y fuego" title="Canción de hielo y fuego"></a> </div> </div> </div> </div> <div class="dropdown"> <button class="dropbtn">2012 <i class="fa fa-caret-down"></i> </button> <div class="dropdown-content"> <div class="row"> <div class="column"> <a href="http://www.e-minis.net/juegos-estrategia-cancion-hielo-fuego-juego-miniaturas-c-287_2905_7173.html"><img src="http://www.e-minis.net/images/correos/got-veteranswatch-large.jpg" width="798" height="416" border="0" alt="Canción de hielo y fuego" title="Canción de hielo y fuego"></a> </div> </div> </div> </div> <div class="dropdown"> <button class="dropbtn">2013 <i class="fa fa-caret-down"></i> </button> <div class="dropdown-content"> <div class="row"> <div class="column"> <a href="http://www.e-minis.net/juegos-estrategia-cancion-hielo-fuego-juego-miniaturas-c-287_2905_7173.html"><img src="http://www.e-minis.net/images/correos/got-veteranswatch-large.jpg" width="798" height="416" border="0" alt="Canción de hielo y fuego" title="Canción de hielo y fuego"></a> </div> </div> </div> </div> <div class="dropdown"> <button class="dropbtn">2014 <i class="fa fa-caret-down"></i> </button> <div class="dropdown-content"> <div class="row"> <div class="column"> <a href="http://www.e-minis.net/juegos-estrategia-cancion-hielo-fuego-juego-miniaturas-c-287_2905_7173.html"><img src="http://www.e-minis.net/images/correos/got-veteranswatch-large.jpg" width="798" height="416" border="0" alt="Canción de hielo y fuego" title="Canción de hielo y fuego"></a> </div> </div> </div> </div> <div class="dropdown"> <button class="dropbtn">2015 <i class="fa fa-caret-down"></i> </button> <div class="dropdown-content"> <div class="row"> <div class="column"> <a href="http://www.e-minis.net/juegos-estrategia-cancion-hielo-fuego-juego-miniaturas-c-287_2905_7173.html"><img src="http://www.e-minis.net/images/correos/got-veteranswatch-large.jpg" width="798" height="416" border="0" alt="Canción de hielo y fuego" title="Canción de hielo y fuego"></a> </div> </div> </div> </div> <div class="dropdown"> <button class="dropbtn">2016 <i class="fa fa-caret-down"></i> </button> <div class="dropdown-content"> <div class="row"> <div class="column"> <a href="http://www.e-minis.net/juegos-estrategia-cancion-hielo-fuego-juego-miniaturas-c-287_2905_7173.html"><img src="http://www.e-minis.net/images/correos/got-veteranswatch-large.jpg" width="798" height="416" border="0" alt="Canción de hielo y fuego" title="Canción de hielo y fuego"></a> </div> </div> </div> </div> <div class="dropdown"> <button class="dropbtn">2017 <i class="fa fa-caret-down"></i> </button> <div class="dropdown-content"> <div class="row"> <div class="column"> <a href="http://www.e-minis.net/juegos-estrategia-cancion-hielo-fuego-juego-miniaturas-c-287_2905_7173.html"><img src="http://www.e-minis.net/images/correos/got-veteranswatch-large.jpg" width="798" height="416" border="0" alt="Canción de hielo y fuego" title="Canción de hielo y fuego"></a> </div> </div> </div> </div> <div class="dropdown"> <button class="dropbtn">2018 <i class="fa fa-caret-down"></i> </button> <div class="dropdown-content"> <div class="row"> <div class="column"> <a href="http://www.e-minis.net/juegos-estrategia-cancion-hielo-fuego-juego-miniaturas-c-287_2905_7173.html"><img src="http://www.e-minis.net/images/correos/got-veteranswatch-large.jpg" width="798" height="416" border="0" alt="Canción de hielo y fuego" title="Canción de hielo y fuego"></a> </div> </div> </div> </div> <div class="dropdown"> <button class="dropbtn">2019 <i class="fa fa-caret-down"></i> </button> <div class="dropdown-content"> <div class="row"> <div class="column"> <a href="http://www.e-minis.net/juegos-estrategia-cancion-hielo-fuego-juego-miniaturas-c-287_2905_7173.html"><img src="http://www.e-minis.net/images/correos/got-veteranswatch-large.jpg" width="798" height="416" border="0" alt="Canción de hielo y fuego" title="Canción de hielo y fuego"></a> </div> </div> </div> </div> </div> </td></tr> </table></td> </body> </html>
  12. I have been struggling to figure out how to and a link on a rotating block menu. Nothing I seem to do creates the desired effect.... HELP! I'm pulling my hair out on this one. I want to make the content Labels links. CSS: *,*:before,*:after { box-sizing: border-box; } :after { content: ""; link: ""; } nav { float: left; position: relative; top: 13px; left: -13px; background: transparent; } nav ul { text-align: center; } nav ul li { position: relative; width: 69px; cursor: pointer; background: crimson; color: white; text-transform: uppercase; transition:all .5s ease-out; } nav ul li:after { position: absolute; background: black; color: crimson; top:0; left: 70px; width: 70px; height: 100%; opacity:.5; transform: perspective(400px) rotateY(90deg); transform-origin: 0 100%; transition:all .5s ease-out; } nav ul li:nth-child(1):after { content: "BIO"; line-height: 69px; } nav ul li:nth-child(2):after { content: "DISC"; line-height: 69px; } nav ul li:nth-child(3):after { content: "VIDEO"; line-height: 69px; } nav ul li:nth-child(4):after { content: "SHOWS"; line-height: 69px; } nav ul li:hover { transform: translateX(-69px); } nav ul li:hover:after { opacity: 1; transform: perspective(400px) rotateY(0deg) scale(1) ; } nav ul li > div { display: inline-block; padding: 24px 0; background: transparent; } nav ul li div { position: relative; } MENU HTML: <section id="menu"> <nav class="navbar-fixed-top"> <ul> <li> <div style="font-size: 1.25rem;" class="icon-notebook"></div> </li> <li> <div style="font-size: 1rem;" class="socicon socicon-play"></div> </li> <li> <div style="font-size: 1.25rem;" class="etl-icon icon-video"></div> </li> <li> <div style="font-size: 1.25rem;" class="icon-global"><div class="nav ul li"></div> </li> </ul> </nav> </section>
  13. Simple Menu Text Links eye fish effect. Pure CSS, without JavaScript. <!DOCTYPE html> <html> <head> <title>Simple Menu</title> <style type="text/css"> body { font: normal normal 100% Helvetica, sans-serif; } li { font-size: 1em; transition: all 0.2s; } li:hover { font-size: 2em; } li:hover + li { font-size: 1.6em; } li:hover + li + li { font-size: 1.3em; } </style> </head> <body> <h1>Simple Menu</h1> <ul> <li><a href="#">Texto del Link primero ...</a></li> <li><a href="#">Texto del Link segundo ...</a></li> <li><a href="#">Texto del Link tercero ...</a></li> <li><a href="#">Texto del Link cuarto ...</a></li> <li><a href="#">Texto del Link quinto ...</a></li> <li><a href="#">Texto del Link sexto ...</a></li> <li><a href="#">Texto del Link séptimo ...</a></li> <li><a href="#">Texto del Link octavo ...</a></li> </ul> <p>Scriptshow <a href="#">Web</a> Experiments</p> </body> </html> Un Saludo.
  14. Hi! I am new here and was wondering if I could possibly get some help. I am having some serious trouble trying to figure out why my menu won't sit behind my modal. =( I have wracked my brain trying to figure out what it could be, but have not been able to come up with a conclusion. Please ignore the text as the page is obviously still in testing, but the page shows how the modal goes in front. I also have other issues with IE in that the menu doesn't show up properly, but that may be due to too many style tags? I do very much enjoy my CSS. lol Things have evolved since 2009 ^_^; Here is the link to the page in question and I am attaching the raw files that I think you would need to see where I may have done something wrong. Is it possible that they just aren't compatible? www.technicolor-dreams.net/ani-001.html Thanks in advance! =D -Sarah Also... If you could... Could you explain things as simply as possible? I am not as advanced with coding in knowing all the terminology such as parent and sibling elements. >_<! css.css ani-001.html menu.html
  15. I am working on a site to make it look and work like the images below. I got the push menu figured out because I found the tutorial here. I have the 2nd div for the line toggle and and the logo and the 3rd div for the main content Problem is I don't know how to make the 2nd div full length height: 100% didn't work nor do I knoq how to center the lines on top or center the logo in the center of the div's length. Underneath the photos is my current code. Please assist as this is a ballpark I've never played in. Thank you in advance !!!!!!!!! <head> <style> body { font-family: "Lato", sans-serif; } .sidenav { height: 100%; width: 0; position: fixed; z-index: 1; top: 0; left: 0; background-color: #212121; overflow-x: hidden; transition: 0.5s; padding-top: 60px; } .sidenav a { padding: 8px 8px 8px 32px; text-decoration: none; font-size: 25px; color: #818181; display: block; transition: 0.3s; } .sidenav a:hover, .offcanvas a:focus{ color: #f1f1f1; } .sidenav p { position: absolute; bottom: 100px; color: #CACFD2; font-size: 12px; left:10%; } .sidenav .closebtn { position: absolute; top: 0; right: 25px; font-size: 36px; margin-left: 50px; } .sidenav a.mail { color: #CACFD2; font-size: 12px; left:10%; padding: 0; text-decoration: none; } #logozone { background-color: #212121; transition: margin-left .5s; float: left; width: 10%; height: 100%; padding: 2px; } img { display: block; margin: auto; width: 50%; } @media screen and (max-height: 450px) { .sidenav {padding-top: 2px;} .sidenav a {font-size: 18px;} } </style> </head> <body> <div id="mySidenav" class="sidenav"> <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">&times;</a> <a href="#">Home</a> <a href="#">Current Projects</a> <p>client info</p> </div> <div id="logozone"> <span style="text-align:center; font-size:30px;color:#CACFD2;cursor:pointer" onclick="openNav()">&#9776; <div><img src="here.jpg"></div> </div> <script> function openNav() { document.getElementById("mySidenav").style.width = "250px"; document.getElementById("logozone").style.marginLeft = "250px"; } function closeNav() { document.getElementById("mySidenav").style.width = "0"; document.getElementById("logozone").style.marginLeft= "0"; } </script> </div> <div>This is a the main content area</div> </body>
  16. Am able to use this code to bind a.id = :auc_id in order to display certain result needed for menu code, but when i introduce it in the submenu i dont get any result below are the codes for menu and submenu' MENU works fine, display whats need to be showned thanks to a.id = :auc_id $query = "SELECT s.team_id, s.teams AS teams1, ss.team_id, ss.teams AS teams2, a.id, a.team1, a.team2 FROM " . $DBPrefix . "auctions a LEFT JOIN " . $DBPrefix . "sports s ON (s.team_id = a.team1) LEFT JOIN " . $DBPrefix . "sports ss ON (ss.team_id = a.team2) WHERE a.id = :auc_id and a.id = a.id"; $params = array(); $params[] = array(':auc_id', $id, 'int'); $db->query($query, $params); ?> <script type="text/javascript" src="js/dropdownjquery.js"></script> <script type="text/javascript"> $(document).ready(function() { $("#menu").change(function() { $(this).after('<div id="loader"><img src="images/loading.gif" alt="loading subcategory" /></div>'); $.get('loadsubcat.php?menu=' + $(this).val(), function(data) { $("#sub_cat").html(data); $('#loader').slideUp(200, function() { $(this).remove(); }); }); }); }); </script> <form name="bid"> <label for="category">Select Winner</label> <select name="willwin" id="menu"> <?php if ($db->numrows() > 0){ while ($row = $db->fetch()) { ?> <option value=''></option> <option value="<?php echo $row["team1"]; ?>"><?php echo $row["teams1"]; ?></option> <option value="<?php echo $row["team2"]; ?>"><?php echo $row["teams2"]; ?></option> <?php } } ?> SUBMENU displays all the details in bid table column auction bidder willwin willlose 38 4 3 2 39 4 2 4 39 5 4 2 the result should have a display for column ((auction) 38) willwin (3) but instead i get 3,2,4 <?php include('config.php'); $menu = $_GET['menu']; $query = mysql_query("SELECT a.id, s.team_id, s.teams, u.nick, b.id, b.willwin, b.willlose, b.bidder FROM vs_bids b LEFT JOIN " . $DBPrefix . "vs_users u ON (u.id = b.bidder) LEFT JOIN " . $DBPrefix . "vs_auctions a ON (a.id = b.auction) LEFT JOIN " . $DBPrefix . "vs_sports s ON (s.team_id = b.willwin) WHERE willlose='$menu' and a.id = b.auction and b.bidder NOT IN ('b.tagged') and b.tagged IN ('b.bidder')"); while($row = mysql_fetch_array($query)) { echo "<option value=''></option>"; echo "<option value='$row[team_id]'>$row[nick]...$row[teams]</option>"; } ?> i cant seem to introduce b.auction = :auc_id which will help in displaying the correct result, but once have converted it like the menu above but doesnt seem to work, so i converted it back. please need help with the issue here, thanks.
  17. Hello, I was excited to find a template that would work well for me on the W3.CSS site in their examples section (Architect Template- third one down on their templates page: https://www.w3schools.com/w3css/w3css_templates.asp). Unfortunately, it seems that the menu on the Architect Template disappears from view when screen width drops below 600 pixels (tested in both Chrome and IE). I don't know CSS well enough to fix it, and am wondering if it is enough of an error that the template might get fixed if there is a way I could let someone at W3schools know. Otherwise, is that an easy fix that someone here might know how best to fix? I appreciate the free template and understand if this is something I need to work out on my own. Thanks!
  18. Hello, I am very new in the field coding and especially with CSS. This is a basic question about how to write the code for a page for two rows of buttons (preferably with photographs as backgrounds) that when hovered over a menu with multiple links drops down and retracts when the cursor is moved off the button. I have gotten the hover menu drop down menu figured out, but the two things I have not figured out are 1) how to divide the buttons in to two rows and 2) how to have a photograph as the button image. I have attached a simple digram of what I am attempting to build - the grey square represent images If there is anyone that can assist, I would be really appreciative. Thanks!
  19. Hi, I recently codded a html im kinda new i need help by getting a better stylish nav bar or menu bar here is the coding. Could you please tell me what to do or just copy my codding make it the same but have a menu or nav bar. For any proposes this is my website - http://jackaust.cf/ i also have all the htmls like index about and more. index.html <html> <head> <title>Jackaust | Home </title> </head> <![if !IE]> <link rel="icon" href="http://www26.online-convert.com/dl/web2/download-file/548acf9d-4132-4fa8-9169-14a465f8c8a8/photo_4_.ico" type="image/x-icon" /> <![endif]> <!-- This is needed for IE --> <link rel="shortcut icon" href="http://www26.online-convert.com/dl/web2/download-file/548acf9d-4132-4fa8-9169-14a465f8c8a8/photo_4_.ico" type="image/ico" /> <body bgcolor="#474747"> <body background ="IMG/test3.jpg"> <center> <table width="1908" align="center" cellpadding="0" cellspacing="0"> <tr> <td> <img src="IMG/banner2.png"> </td> </tr> </table> <table widgth="1908" align="center" cellpadding="0" cellspacing="0"> <tr> <td align="center"> <br> <font face="Lucida Fax" size="15" color="#fff"> <body link="white" link="white"> <a href="index.html">Home</a>| <a href="about.html">About</a> | <a href="videos.html">Videos</a> | <a href="downloads.html">Downloads</a> </font> </td> </tr> </table> <br> <table width="1908" align="center" cellpadding="0" cellspacing="0"> <tr> <td align="center"> <H1> <font face="Arial" size="15" color="#fff"> <br> <B><U>Welcome People To Jackaust Official Website!</B></U> <br> <br> <H4> <font face="Arial" size="4" color="#ffffff"> Welcome to my website it took ages to make through html finally its done! </H1> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> about.html <html> <head> <title>Jackaust | About </title> </head> <![if !IE]> <link rel="icon" href="http://www26.online-convert.com/dl/web2/download-file/548acf9d-4132-4fa8-9169-14a465f8c8a8/photo_4_.ico" type="image/x-icon" /> <![endif]> <!-- This is needed for IE --> <link rel="shortcut icon" href="http://www26.online-convert.com/dl/web2/download-file/548acf9d-4132-4fa8-9169-14a465f8c8a8/photo_4_.ico" type="image/ico" /> <body bgcolor="#474747"> <body background ="IMG/test3.jpg"> <center> <table width="1908" align="center" cellpadding="0" cellspacing="0"> <tr> <td> <img src="IMG/banner2.png"> </td> </tr> </table> <table widgth="1908" align="center" cellpadding="0" cellspacing="0"> <tr> <td align="center"> <br> <font face="Lucida Fax" size="15" color="#fff"> <a href="index.html">Home</a>| <a href="about.html">About</a> | <a href="videos.html">Videos</a> | <a href="downloads.html">Downloads</a> </font> </td> </tr> </table> <br> <table width="1908" align="center" cellpadding="0" cellspacing="0"> <tr> <td align="center"> <H1> <font face="Arial" size="15" color="#fff"> <br> <B><U>About Me</B></U> <br> <br> <H4> <font face="Arial" size="4" color="#ffffff"> I'm Jackaust and I make YouTube videos and play alot of games! </H1> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> videos.html <html> <head> <title>Jackaust | Videos </title> </head> <![if !IE]> <link rel="icon" href="http://www26.online-convert.com/dl/web2/download-file/548acf9d-4132-4fa8-9169-14a465f8c8a8/photo_4_.ico" type="image/x-icon" /> <![endif]> <!-- This is needed for IE --> <link rel="shortcut icon" href="http://www26.online-convert.com/dl/web2/download-file/548acf9d-4132-4fa8-9169-14a465f8c8a8/photo_4_.ico" type="image/ico" /> <body bgcolor="#474747"> <body background ="IMG/test3.jpg"> <center> <table width="1908" align="center" cellpadding="0" cellspacing="0"> <tr> <td> <img src="IMG/banner2.png"> </td> </tr> </table> <table widgth="1908" align="center" cellpadding="0" cellspacing="0"> <tr> <td align="center"> <br> <font face="Lucida Fax" size="15" color="#fff"> <a href="index.html">Home</a>| <a href="about.html">About</a> | <a href="videos.html">Videos</a> | <a href="downloads.html">Downloads</a> </font> </td> </tr> </table> <br> <table width="1908" align="center" cellpadding="0" cellspacing="0"> <tr> <td align="center"> <H1> <font face="Arial" size="15" color="#fff"> <br> <B><U>Videos</B></U> <br> <br> <H4> <font face="Arial" size="4" color="#ffffff"> <li><a href="https://www.youtube.com/channel/UCMYDsxDPlFPEk7UKGhiKDiw"><img src="IMG/photo.jpg" alt=""><span style="position:relative;bottom:20px;"></span></a></li> These are my some of my YouTube Videos </H1> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> Downloads.html <html> <head> <title>Jackaust | Home </title> </head> <![if !IE]> <link rel="icon" href="http://www26.online-convert.com/dl/web2/download-file/548acf9d-4132-4fa8-9169-14a465f8c8a8/photo_4_.ico" type="image/x-icon" /> <![endif]> <!-- This is needed for IE --> <link rel="shortcut icon" href="http://www26.online-convert.com/dl/web2/download-file/548acf9d-4132-4fa8-9169-14a465f8c8a8/photo_4_.ico" type="image/ico" /> <body bgcolor="#474747"> <body background ="IMG/test3.jpg"> <center> <table width="1908" align="center" cellpadding="0" cellspacing="0"> <tr> <td> <img src="IMG/banner2.png"> </td> </tr> </table> <table widgth="1908" align="center" cellpadding="0" cellspacing="0"> <tr> <td align="center"> <br> <font face="Lucida Fax" size="15" color="#fff"> <a href="index.html">Home</a>| <a href="about.html">About</a> | <a href="videos.html">Videos</a> | <a href="downloads.html">Downloads</a> </font> </td> </tr> </table> <br> <table width="1908" align="center" cellpadding="0" cellspacing="0"> <tr> <td align="center"> <H1> <font face="Arial" size="15" color="#fff"> <br> <B><U>Here you can download items.</B></U> <br> <br> <H4> <font face="Arial" size="4" color="#ffffff"> Nouthing to download </H1> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br>
  20. Hi everyone, I am a newbe and would like to ask for help with the following task: I am designing a website with a vertical accordion-menu on the left side that should stay fixed. So far no problem, an example I found on the w3school site. Now I would like the buttons that do not have sub-menu items to link to the index-, kontakt- pages directly. The recommended description to link a button is to include it into <form> tag and assign a «formaction» to it. When I do this the accordion looses the ability to spring open. Do I have to adapt anything in the Java-script or is there another way to solve this. Ideally I would like the accordion menu to behave like this: when clicking one menu item the corresponding page should be shown with the submenu items opened. when choosing anothe menu item that page should be opened and the previous sub-menu items closed. my coding attempt looks like that: ————————————————————————————— <!DOCTYPE html> <html><!-- InstanceBegin template="/Templates/acc_template.dwt" codeOutsideHTMLIsLocked="false" --> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>My Accordion Menu Website</title> <style> button.accordion { background-color: #eee; color: #444; cursor: pointer; padding: 18px; width: 100%; border: none; text-align: left; outline: none; font-size: 15px; transition: 0.4s; } button.accordion.active, button.accordion:hover { background-color: #ddd; } div.panel { padding: 0 18px; display: none; background-color: white; } </style> </head> <body> <!--Anfang Seiten-Menu Accordeon DIV--> <nav> <div class="accnavleft"> <!--Anfang Buttons--> <form><button class="accordion" formaction="/index.html">Homepage</button></form> <form> <button class="accordion" formaction="//page_one.html">Page one</button></form> <div class="panel"> <ul> <li><a href="#navb">first paragraph page one</a></li> <li><a href="#navc">2nd paragraph page one/a></li> <li><a href="#navd">3rd paragraph page one</a></li> <li><a href="#nave">4th paragraph page one/a></li> </ul> </div> <form> <button class="accordion" formaction="/page_two.html">Page two</button></form> <div class="panel"> <ul> <li><a href="#navf">first paragraph page two</a></li> <li><a href="#navg">2nd paragraph page two/a></li> <li><a href="#navh">3rd paragraph page two</a></li> <li><a href="#navi">4th paragraph page two/a></li> </ul> </div> <form> <button class="accordion" formaction="/page_three.html">Page three</button></form> <div class="panel"> <ul> <li><a href="#navj">first paragraph page three</a></li> <li><a href="#navk">2nd paragraph page three/a></li> <li><a href="#navl">3rd paragraph page three</a></li> <li><a href="#navm">4th paragraph page three/a></li> </ul> </div> <form> <button class="accordion" formaction="/kontakt.html">Kontakt</button></form> <div class="panel"> <ul> </ul> </div> <form> <button class="accordion" formaction="/impressum.html">Impressum</button></form> <div class="panel"> <ul> </ul> </div> </div> </nav> <!--end Seiten Menu DIV accordeon --> <!--Java Script of Accordion --> <script> var acc = document.getElementsByClassName("accordion"); var i; for (i = 0; i < acc.length; i++) { acc.onclick = function(){ this.classList.toggle("active"); var panel = this.nextElementSibling; if (panel.style.display === "block") { panel.style.display = "none"; } else { panel.style.display = "block"; } } } </script> <!--end of Accordion --> <!-- "Content" --> <main> <div style="margin-left:25%;padding:1px 16px;height:100%;"> <h1>first paragraph page one</h1><br /> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Unde, doloremque maiores excepturi iste porro cumque rem praesentium illo labore error quasi magni cupiditate rerum sequi dolores architecto consectetur harum soluta neque placeat culpa nesciunt molestias quam facilis ipsum ab aspernatur ut similique aperiam nemo tempore earum esse repellat provident eum blanditiis tempora molestiae! Optio, asperiores neque nam reiciendis ad rerum.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Unde, doloremque maiores excepturi iste porro cumque rem praesentium illo labore error quasi magni cupiditate rerum sequi dolores architecto consectetur harum soluta neque placeat culpa nesciunt molestias quam facilis ipsum ab aspernatur ut similique aperiam nemo tempore earum esse repellat provident eum blanditiis tempora molestiae! Optio, asperiores neque nam reiciendis ad rerum. <a name="navb"></a> <h1>2nd paragraph page one</h1><br /> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Unde, doloremque maiores excepturi iste porro cumque rem praesentium illo labore error quasi magni cupiditate rerum sequi dolores architecto consectetur harum soluta neque placeat culpa nesciunt molestias quam facilis ipsum ab aspernatur ut similique aperiam nemo tempore earum esse repellat provident eum blanditiis tempora molestiae! Optio, asperiores neque nam reiciendis ad rerum.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Unde, doloremque maiores excepturi iste porro cumque rem praesentium illo labore error quasi magni cupiditate rerum sequi dolores architecto consectetur harum soluta neque placeat culpa nesciunt molestias quam facilis ipsum ab aspernatur ut similique aperiam nemo tempore earum esse repellat provident eum blanditiis tempora molestiae! Optio, asperiores neque nam reiciendis ad rerum. <a name="navc"></a> <h1>3rd paragraph page one</h1><br /> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Unde, doloremque maiores excepturi iste porro cumque rem praesentium illo labore error quasi magni cupiditate rerum sequi dolores architecto consectetur harum soluta neque placeat culpa nesciunt molestias quam facilis ipsum ab aspernatur ut similique aperiam nemo tempore earum esse repellat provident eum blanditiis tempora molestiae! Optio, asperiores neque nam reiciendis ad rerum.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Unde, doloremque maiores excepturi iste porro cumque rem praesentium illo labore error quasi magni cupiditate rerum sequi dolores architecto consectetur harum soluta neque placeat culpa nesciunt molestias quam facilis ipsum ab aspernatur ut similique aperiam nemo tempore earum esse repellat provident eum blanditiis tempora molestiae! Optio, asperiores neque nam reiciendis ad rerum. <a name="navd"></a> <h1>4th paragraph page one</h1><br /> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Unde, doloremque maiores excepturi iste porro cumque rem praesentium illo labore error quasi magni cupiditate rerum sequi dolores architecto consectetur harum soluta neque placeat culpa nesciunt molestias quam facilis ipsum ab aspernatur ut similique aperiam nemo tempore earum esse repellat provident eum blanditiis tempora molestiae! Optio, asperiores neque nam reiciendis ad rerum.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Unde, doloremque maiores excepturi iste porro cumque rem praesentium illo labore error quasi magni cupiditate rerum sequi dolores architecto consectetur harum soluta neque placeat culpa nesciunt molestias quam facilis ipsum ab aspernatur ut similique aperiam nemo tempore earum esse repellat provident eum blanditiis tempora molestiae! Optio, asperiores neque nam reiciendis ad rerum. <a name="nave"></a> <h1>5th paragraph page one</h1><br /> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Unde, doloremque maiores excepturi iste porro cumque rem praesentium illo labore error quasi magni cupiditate rerum sequi dolores architecto consectetur harum soluta neque placeat culpa nesciunt molestias quam facilis ipsum ab aspernatur ut similique aperiam nemo tempore earum esse repellat provident eum blanditiis tempora molestiae! Optio, asperiores neque nam reiciendis ad rerum.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Unde, doloremque maiores excepturi iste porro cumque rem praesentium illo labore error quasi magni cupiditate rerum sequi dolores architecto consectetur harum soluta neque placeat culpa nesciunt molestias quam facilis ipsum ab aspernatur ut similique aperiam nemo tempore earum esse repellat provident eum blanditiis tempora molestiae! Optio, asperiores neque nam reiciendis ad rerum. <a name="navf"></a> </div> </main> <!-- End Content --> </body> </html> Accord_Menu_Button_link.html
  21. Hi, Need some CSS help regarding SubMenu creation. I have this below code for responsive Main Menu which is working fine. I need to create a SubMenu under the main menu. For example :- Menu2 will habe two submenu like Menu2_SubMenu1 & Menu2_SubMenu2. The color, format and hovering effect will be same like Main menu. Can you kindly help me out with the CSS for the same. I am messing up with the Submenu CSS code code. Thanks in advance for your help. Regards, Ari. Here is the WORKING code where I would like to include sub-menu.( for example under **Menu2**). <!DOCTYPE html> <html> <head> <style> body { margin: 0; } ul.topnav { list-style-type: none; margin: 0px; padding: 0; overflow: hidden; background-color: #2D5C88; text-align: center; /* For fixed header */ position: fixed; width: 100%; z-index: 1000; } ul.topnav li { display: inline; } ul.topnav li a { display: inline-block; color: #fff; text-align: center; padding: 8px 30px 8px 30px; text-decoration: none; transition: 0.3s; font-size: 13px; font-family: 'Verdana', Geneva, sans-serif; } ul.topnav li a:hover { background-color: #33699b; } ul.topnav li.icon { display: none; } @media screen and (max-width:680px) { ul.topnav li:not(:first-child) { display: none; } ul.topnav li.icon { float: right; display: inline-block; } } @media screen and (max-width:680px) { ul.topnav.responsive { position: relative; } ul.topnav.responsive li.icon { position: absolute; right: 0; top: 0; } ul.topnav.responsive li { float: none; display: inline; } ul.topnav.responsive li a { display: block; text-align: left; } } </style> </head> <body> <ul class="topnav" id="myTopnav"> <li><a class="active" href="google.com">Menu1</a></li> <li><a href="http://www.gogle.com">**Menu2**</a></li> <li><a href="http://www.gogle.com/">Menu3</a></li> <li class="icon"> <a href="javascript:void(0);" style="font-size:15px;" onclick="myFunction()">☰</a> </li> </ul> </body> </html>
  22. For whatever reason, anytime I use "position: sticky" in whatever form whether it's browser supported or through the Stickyfill.js it breaks the w3-bar navigation menu. w3schools.com obviously has a way to make it work. But I can't. Sticky off - dropdown menu works perfect. Stick ON and the menu button clicks but the dropdown content is not displayed. Or at the very least it's not visible if it is. http://dev.daellusknights.com/index.html <-- Sticky ON (broken) http://dev.daellusknights.com/index2.html <-- Sticky OFF (works) Is this a known issue or am I just missing something. Currently working with MS Edge and latest Chrome on Win 10 Pro (dev)
  23. Yes, I am still using this menu for the mobile and tablet layout! http://www.w3schools.com/howto/howto_js_topnav.asp I would like to know how to do the following: I don't want a menu bar all the way across the screen on mobile and tablet layout. I want to do a slide from the side of the screen on mobile and tablet layout. Thanks.
  24. Hello, New here I am currently have 3 different stylesheets for my website: Desktop - layout.css is working fine. Tablet - tablet.css is also working fine. now I have a css for mobile which is mobile.css. On the mobile.css when I look the version on an iPhone 6 the navigation bar is so small. here is the index.html and mobile.css file: Mobile CSS File: body { margin: 0; background-image: url(../images/bg2.jpg); } img { max-width: 100%; height: auto; } ul.topnav { list-style-type: none; margin: 0; padding: 25px; overflow: hidden; background-color: #333; } ul.topnav li {float: left;} ul.topnav li a { display: inline-block; color: #f2f2f2; text-align: center; padding: 30px 16px; text-decoration: none; transition: 0.3s; font-size: 25px; } ul.topnav li a:hover {background-color: #555;} ul.topnav li.icon {display: none;} @media screen and (max-width:320px) { ul.topnav li:not(:first-child) {display: none;} ul.topnav li.icon { float: right; display: inline-block; } } @media screen and (max-width:320px) { ul.topnav.responsive {position: relative;} ul.topnav.responsive li.icon { position: absolute; right: 0; top: 0; } ul.topnav.responsive li { float: none; display: inline; } ul.topnav.responsive li a { display: block; text-align: left; } } Index.html file is: <html> <head> <meta charset="utf-8"> <meta name="viewpoint" content="width=device-width,initial=1.0"> <link href="css/mobile.css" type="text/css" rel="stylesheet" media="screen and (min-width: 0px) and (max-width: 320px)" /> <link href="css/tablet.css" type="text/css" rel="stylesheet" media="screen and (min-width: 321px) and (max-width: 1023px)" /> <link href="css/layout.css" type="text/css" rel="stylesheet" media="screen and (min-width: 1024px)" /> <title>Morris Technologies of Amarillo</title> </head> <body> <div id="wrapper"> <div id="header"> <img src="images/header.jpg" alt="Morris Technologies of Amarillo" width="1000" height="300"> </div> <ul class="topnav" id="myTopnav"> <li><a href="#home">Home</a></li> <li><a href="#news">News</a></li> <li><a href="#contact">Contact</a></li> <li><a href="#about">About</a></li> <li class="icon"> <a href="javascript:void(0);" onclick="myFunction()">☰</a> </li> </ul> </div> <script> /* Toggle between adding and removing the "responsive" class to topnav when the user clicks on the icon */ function myFunction() { var x = document.getElementById("myTopnav"); if (x.className === "topnav") { x.className += " responsive"; } else { x.className = "topnav"; } } </script> </body>
  25. Does it work to set the first tab red like it is, the second blue, and the third green? http://www.w3schools.com/w3css/tryit.asp?filename=tryw3css_tabulators_active
×
×
  • Create New...