Jump to content

Search the Community

Showing results for tags 'navigation'.

  • 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

Calendars

  • Community Calendar

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. Hi all, Can anyone expand on this lesson link below but to add a submenu in the menu as well? I cannot get this to work. I need a submenu between links 2 and 3. I can get the submenu to show all the time, but not be active upon hover of Link 2. When a user hovers on Link 2, another submenu should pop out to the right with more dropdown links. Where have I gone wrong here? https://www.w3schools.com/howto/howto_css_dropdown_navbar.asp My HTML <!--header code starts here--> <a class="btn" href="homepage"><i class="fa fa-home"></i></a> <a class="active" href="index.html">Index</a> <a class="active3" href="Updates">Updates</a> <!--dropdowncode starts --> <div class="dropdown"> <button class="dropbtn">Business Updates <i class="fa fa-caret-down"></i> </button> <div class="dropdown-content"> <a href="Link1.htm">Buisness Plans</a> <a href="Link2.htm">Link2</a> <a href="submenu.htm">Submenu Link 1<i class="fa fa-caret-right"></i></a> <div class="dropdown-content2"> <a class href="Submenu2.htm">Submenu Link2</a> <a href="Submenu3.htm">Submenu Link 3</a> <a href="Submenu4.htm">Submenu Link 4</a> <a href="Submenu5.htm">Submenu Link 5</a> </div> <a href="Link3.htm">Link3</a> <a href="Link4.htm">Link4</a> <a href="Link5.htm">Link5</a> <a href="Link6.htm">Link6</a> <a href="Link7.htm">Link7</a> <a href="Link8.htm">Link8</a> </div> </div> <div class="dropdown"> <button class="dropbtn">Construction Updates <i class="fa fa-caret-down"></i> </button> <div class="dropdown-content"> <a href="#">Buisness Plans</a> <a href="Link2.htm">Link2</a> <a href="Link3.htm">Link3</a> <a href="Link4.htm">Link4</a> <a href="Link5.htm">Link5</a> <a href="Link6.htm">Link6</a> <a href="Link7.htm">Link7</a> <a href="Link8.htm">Link8</a> </div> </div> <!--header code ends --> CSS /* MENU CODE STARTS*/ /* BUTTON*/ .btn { background-color: #333; float: left; border: none; color: white; padding: 8px 16px; font-size: 22px; cursor: pointer; } .search { background-color: #333; float: right; border: none; color: white; padding: 8px 16px; font-size: 22px; cursor: pointer; } /* Add a black background color to the top navigation */ .topnav { background-color: #333; overflow: hidden; color: #006666; font-weight: bold; font-family: helvetica, verdana, arial, helvetica, sans-serif; } /* Style the links inside the navigation bar */ .topnav a { float: left; color: #f2f2f2; text-align: center; padding: 14px 16px; text-decoration: none; font-size: 12px; font-family: helvetica, verdana, arial, helvetica, sans-serif; } /* Change the color of links on hover */ .topnav a:hover { background-color: #ddd; color: black; font-family: helvetica, verdana, arial, helvetica, sans-serif; } /* Add a color to the active/current link */ .topnav a.active { background-color: #0B6121; color: white; } ul.a { list-style-type: none; } ul.b { list-style-type: square; } ol.c { list-style-type: upper-roman; } ol.d { list-style-type: lower-alpha; } /* Add a color to the OTHER active/current link */ .topnav a.active2 { background-color: #006666; color: white; } ul.a { list-style-type: none; } ul.b { list-style-type: none; } ol.c { list-style-type: upper-roman; } ol.d { list-style-type: lower-alpha; } ul.a { list-style-type: none; } ul.b { list-style-type: square; } ol.c { list-style-type: upper-roman; } ol.d { list-style-type: lower-alpha; } .topnav input[type=text] { border: 1px solid #ccc; } } /* Navbar container */ .navbar { overflow: hidden; background-color: #333; font-family: Helvetica; } /* Links inside the navbar */ .navbar a { float: left; font-size: 16px; color: white; text-align: center; padding: 14px 16px; text-decoration: none; } /* The dropdown container */ .dropdown { float: left; overflow: hidden; } /* Dropdown button INHERIT COLOR */ .dropdown .dropbtn { font-size: 12px; font-family: helvetica, verdana, arial, helvetica, sans-serif; font-weight: bold; border: none; outline: none; color: white; padding: 14px 16px; background-color: inherit; font-family: inherit; /* Important for vertical align on mobile phones */ margin: 0; /* Important for vertical align on mobile phones */ } /* Add a darkgrey background color to navbar links on hover */ .navbar a:hover, .dropdown:hover .dropbtn { background-color: darkgrey; } /* Dropdown content (hidden by default) */ .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 (hidden by default) */ .dropdown-content2 { display: none; position: absolute; margin-top: 0px; margin-left: 320px; background-color: #f9f9f9; min-width: 160px; box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); z-index: 1; } /* Text Links inside the dropdown */ .dropdown-content a { float: none; color: black; padding: 12px 16px; text-decoration: none; display: block; text-align: left; } /* Add a grey background color to dropdown links on hover */ .dropdown-content a:hover { background-color: #ddd; } /* Show the dropdown menu on hover */ .dropdown:hover .dropdown-content { display: block; } /* Show the dropdown menu on hover */ .dropdown:hover .dropdown-content2 { display: block; } /* Style the buttons that are used to open the tab content */ .tab button { background-color: inherit; float: left; border: none; outline: none; cursor: pointer; padding: 14px 16px; transition: 0.3s; } /* Change background color of buttons on hover */ .tab button:hover { background-color: #ddd; } /* Create an active/current tablink class */ .tab button.active { background-color: #ccc; } /* Style the tab content */ .tabcontent { display: none; padding: 6px 12px; border: 1px solid #ccc; border-top: none; } .fa-caret-right{ float:right; }
  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 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
  4. Hello, I'm pretty new to html/css and I need some help with the menu from the navigation and the hero-image at less than 620px width. So when I scale down the website, I would like the menu to get under the logo and be centered both. Also, how can I prevent the submit button to overflow the container from the hero-image at less than 620px? This happens when the headline breaks into 2 rows. Here is the codepen link: https://codepen.io/ancapopescu6/pen/xMqJMY Thank you very much!
  5. Hello, With reference to your "Responsive TopNav" example here: https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_topnav it works fine for the most part, except that when the "hamburger" icon is used it does not close down again after making a selection. I have included my own slightly modified version of your example, simplified so there are only "home" and "news" menu items, and the hamburger icon will appear when reducing the width below 1000px. How can this be modified to collapse the hamburger links upon making a selection? Thanks... Jon <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> <style> body { margin: 0; font-family: Arial, Helvetica, sans-serif; } .topnav { overflow: hidden; background-color: #333; position: absolute; left: 0; top: 0; width: 100%; } .topnav a { float: left; display: block; color: #f2f2f2; text-align: center; padding: 14px 16px; text-decoration: none; font-size: 17px; } .topnav a:hover { background-color: #ddd; color: black; } .active { background-color: #4CAF50; color: white; } .topnav .icon { display: none; } @media screen and (max-width: 1000px) { .topnav a:not(:first-child) {display: none;} .topnav a.icon { float: right; display: block; } } @media screen and (max-width: 1000px) { .topnav.responsive {position: relative;} .topnav.responsive .icon { position: absolute; right: 0; top: 0; } .topnav.responsive a { float: none; display: block; text-align: left; } } </style> </head> <body> <div class="topnav" id="myTopnav"> <a href="#home" class="active">Home</a> <a href="#news">News</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> <div style="padding-left:16px; padding-top:40px"> <h2>Responsive Topnav Example</h2> <p>Resize the browser window to see how it works.</p> </div> <h2 id="home">Home</h2> asdf<br> asdf<br> asdf<br> asdf<br> asdf<br> asdf<br> <h2 id="news">News</h2> asdf<br> asdf<br> asdf<br> </body> </html>
  6. I just converted my ancient website over to using w3css. I am wondering if there is a way to vertically center text in a navigation bar made with w3-bar (see attached image). I am trying to recreate an ancient navigation banner from 1998 (See other attached image.) Any tips would be appreciated. In doing some web searches, I did find one or two with the same question, but neither solution worked for me.
  7. 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
  8. Good day everyone! I will admit right off the hop that I know very little about javascript programming but I hope that with your help, I can learn something today. I've looked on w3 and elsewhere to find my answer but I have not been successful. I think what I'm trying to do is simple... Using w3.css, I am trying to create a navigation menu that will include more than one dropdown menu. I have the menu working to a point. Right now if I click on the three links with sub menus, the sub menus will display. However, they do not 'hide' unless I click on the top-menu link. That is, if I click on 'Training', the sub menu appears but will only disappear if I click on 'Training' again. Of course I want the sub-menu to disappear if I click anywhere outside the sub-menu or have another sub-menu appear if I click on its top-menu link. I've attached my html file for you to have a look. Any help and guidance would be greatly appreciated. Thanks so much! Have a great day! <!DOCTYPE html> <html> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css"> <body> <div class="w3-container"> <ul class="w3-navbar w3-light-grey"> <li><a href="#">Home</a></li> <li class="w3-dropdown-click"> <a onclick="myFunction()" href="#">Manuals <i class="fa fa-caret-down"></i></a> <div id="sub-menu" class="w3-dropdown-content w3-white w3-card-4"> <a href="#">Power Unit/Truck/Bus Safety Inspections and Standards</a> <a href="#">School Bus Safety Inspections and Standards</a> <a href="#">Trailer/Semi-Trailer Safety Inspections and Standards</a> <a href="#">Motorcycle Safety Inspections and Standards</a> </div> </li> <li class="w3-dropdown-click"> <a onclick="myFunction2()" href="#">Forms <i class="fa fa-caret-down"></i></a> <div id="sub-menu2" class="w3-dropdown-content w3-white w3-card-4"> <a href="#">Supply Form</a> <a href="#">Backup Forms</a> <a href="#">Station Application</a> </div> </li> <li class="w3-dropdown-click"> <a onclick="myFunction3()" href="#">Training <i class="fa fa-caret-down"></i></a> <div id="sub-menu3" class="w3-dropdown-content w3-white w3-card-4"> <a href="#">Option 1</a> <a href="#">Option 2</a> <a href="#">Option 3</a> </div> </li> <li><a href="#">Who to Call</a></li> </ul> </div> <script> function myFunction() { var x = document.getElementById("sub-menu"); if (x.className.indexOf("w3-show") == -1) { x.className += " w3-show"; }else { x.className = x.className.replace(" w3-show", ""); } } function myFunction2() { var x = document.getElementById("sub-menu2"); if (x.className.indexOf("w3-show") == -1) { x.className += " w3-show"; }else { x.className = x.className.replace(" w3-show", ""); } } function myFunction3() { var x = document.getElementById("sub-menu3"); if (x.className.indexOf("w3-show") == -1) { x.className += " w3-show"; }else { x.className = x.className.replace(" w3-show", ""); } } </script> </body> </html> test.html
  9. I'm having an odd issue with a drop-down menu using w3.css and the w3-bar, w3-dropdown-hover & w3-dropdown-content classes to create a drop-down navigation menu. When the dropdown content contains only one or two links, it works fine, but anything more causes the dropdown content width to extend far further than necessary. I'm sure I'm doing something wrong, but I followed the example given on https://www.w3schools.com/w3css/w3css_navigation.asp and I can't see where I've messed it up. I've attached a screenshot showing the oddly wide dropdown menu, and the live site can be visited at www.aridsmart.com if anyone wants to check out my CSS and HTML.
  10. I recently took over somebody else's website and am trying to get an element to size up and down when the window changes size. I tried to add Position: Absolute; to no avail. I currently have it as Position: Fixed so it moves with the scroll. Specific page is here and I'm referring to the three sidebar nav menus on the left. #mySidenav a { position: fixed; /* Position them relative to the browser window */ left: -25px; /* Position them outside of the screen */ transition: 0.3s; /* Add transition on hover */ padding: 15px; /* 15px padding */ width: 200px; /* Set a specific width */ text-decoration: none; text-align: center; font-size: 18px; /* Increase font size */ color: white; /* White text color */ border-radius: 0 5px 5px 0; /* Rounded corners on the top right and bottom right side */ } #mySidenav a:hover { left: 0; /* On mouse-over, make the elements appear as they should */ text-decoration: underline; } #board { top: 320px; background-color: #5d2a2c; } #blog { top: 380px; background-color: #5d2a2c; } #kidswehelp { top: 440px; background-color: #5d2a2c; Any help would be beyond amazing.
  11. Hey guys. So I have just learned the basics of HTML and CSS and I am on my way to creating my first real website. But I have this problem - I have a navigation bar with a dropdown button (which contains links to products). And when I am going to create a new html page - lets say another product (that sits inside the dropdown) I then have to update the navigation bar code on every page I have. This is not wise to do - repeating the same code, error prone, etc. Is there a proper way to write navigation bar once and have it on every page? I mean, can I embed it somehow? Or embed product pages? Thanks.
  12. Hi, I'm trying to setup a sidenav with multiple accordion dropdowns. The first one seems to work fine but the rest just reopen the first in the list. Anyone any idea what I'm doing wrong? It may well be blatantly obvious as I'm no expert! Thanks, Dave. The code I'm using (css) is: ____________________________________________________________________________________ <nav class="w3-sidenav w3-light-grey w3-card-2" style="width:140px;"> <a href="index.php">Home</a> <div class="w3-accordion"> <a onclick="myAccFunc()" href="#">First group<i class="fa fa-caret-down"></i></a> <div id="demoAcc" class="w3-accordion-content w3-white w3-card-4"> <a href="one.php">one</a> <a href="two.php">two</a> <a href="three.php">three</a> </div> </div> <div class="w3-accordion"> <a onclick="myAccFunc()" href="#">First group<i class="fa fa-caret-down"></i></a> <div id="demoAcc" class="w3-accordion-content w3-white w3-card-4"> <a href="four.php">four</a> <a href="five.php">five</a> <a href="six.php">six</a> </div> </div> <div class="w3-accordion"> <a onclick="myAccFunc()" href="#">Second group<i class="fa fa-caret-down"></i></a> <div id="demoAcc" class="w3-accordion-content w3-white w3-card-4"> <a href="four.php">four</a> <a href="five.php">five</a> <a href="six.php">six</a> </div> </div> <div class="w3-accordion"> <a onclick="myAccFunc()" href="#">Third group<i class="fa fa-caret-down"></i></a> <div id="demoAcc" class="w3-accordion-content w3-white w3-card-4"> <a href="seven.php">seven</a> <a href="eight.php">eight</a> <a href="nine.php">nine</a> </div> </div> <a href="https://twitter.com/my_page" target="_blank"><img src="/img/twitter.gif" width="100px"></a> <a href="https://www.facebook.com/my_page/" target="_blank"><img src="/img/facebook.gif" width="100px"></a> </nav> ____________________________________________________________________________________
  13. Hi there, I just recently started using w3.css and was looking for some code template for a navigation bar, that is responsive. Here on your website there is just one useful suggestion for a collapsing navigation bar (near the end). Sadly this didn't help me with a navigation bar, which has a dropdown element, since these links won't be displayed on small devices (especially since hovering is not supported on most respective devices). So I made a few alterations based on the try it code (original code here) to make it work. I wanted to post my modifications here so, if you think they are useful, they might be implemented as another code snippet for orientation on the w3.css navigaton page. Hope you enjoy, if not so be it my code: <!DOCTYPE html> <html> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css"> <body> <ul class="w3-navbar w3-large w3-black w3-hide-small"> <li><a href="#">Link 1</a></li> <li><a href="#">Link 2</a></li> <li class="w3-dropdown-hover"><a href="#">Dropdown Hover</a> <div class="w3-dropdown-content w3-card-4"> <a href="#">Sublink 3a</a> <a href="#">Sublink 3b</a> <a href="#">Sublink 3c</a> </div> </li> </ul> <a class="w3-center w3-hide-medium w3-hide-large" href="#" onclick="myFunction()"> <div class="w3-black" style="padding: 8px 16px"> ☰ </div> </a> <div id="demo" class="w3-hide w3-hide-large w3-hide-medium"> <ul class="w3-navbar w3-left-align w3-border-top w3-large w3-black"> <li><a href="#">Link 1</a></li> <li><a href="#">Link 2</a></li> <li><a href="#">Dropdown Hover</a> <ul class="w3-navbar w3-left-align" style="padding-left: 15px;"> <li><a href="#">Sublink 3a</a></li> <li><a href="#">Sublink 3b</a></li> <li><a href="#">Sublink 3c</a></li> </ul> </li> </ul> </div> <div class="w3-container"> <p>In the example below, the navigation bar is replaced with a button (☰) in the center when shown on tablets and mobile devices. When the button is clicked, the navigation bar will be displayed stacked. Dropdown Menus will be displayed, since mobile devices don't support hovering.</p> <p>Resize the screen to see the effect.</p> </div> <script> function myFunction() { var x = document.getElementById("demo"); if (x.className.indexOf("w3-show") == -1) { x.className += " w3-show"; } else { x.className = x.className.replace(" w3-show", ""); } } </script> </body> </html> Peace and love
  14. Hello W3Schools! Its been a while I am trying to help a friend setting up he's webshop. It is already online but trying to make it look more nice according to webdesign template - this is hes website shop (www.thai-online.dk) i have already changed A LOT on this design, now i mostly need the menu... as you see the menu navigation has a lot of categories, and he told me that he wanted to add a lot more in the future if this shop could run online, so i am trying to figure out a solution for this. I already like the design myself, except the menu, so i have come to a solution that i am working on and hopefully you can help me out, work with me. As you see i currently have added 13 Categories, now my idea is to code some PHP into the menu on OpenCart so that if the menu design is ABOVE "1100px" in width AND has more than 7-8 categories on the menu, it will only show the 7-8 categories and at the end of it all show a little plus sign "+", when clicked on the plus sign a little side-menu will appear out from that little plus sign. The reason for using the 1100px width thing is to know if its on a pc orr on a mobile (if you know a better way please tell me, this is just to show you what i want) i know for sure the "plus sign" already has been made somewhere, but how to actually do it? We are using opencart version 2.0.1.2 or something like that... this is the code i found on the .tbl file: <?php foreach ($categories as $category) { ?> <?php if ($category['children']) { ?><li class="dropdown"><a href="<?php echo $category['href']; ?>" class="dropdown-toggle" data-toggle="dropdown"><span><?php echo $category['name']; ?></span> <img width="8" height="8" class="menu-close" src="catalog/view/theme/atr374opc2101/image/menu_close.gif" /><img width="8" height="8" class="menu-open" src="catalog/view/theme/atr374opc2101/image/menu_open.gif" /></a> <div class="dropdown-menu"> <div class="dropdown-inner"> <?php foreach (array_chunk($category['children'], ceil(count($category['children']) / $category['column'])) as $children) { ?> <ul class="list-unstyled"> <?php foreach ($children as $child) { ?><!-- --><li><a href="<?php echo $child['href']; ?>"><?php echo $child['name']; ?></a></li><!-- --><?php } ?> </ul> <?php } ?> </div> <a href="<?php echo $category['href']; ?>" class="see-all"><span><?php echo $text_all; ?> <?php echo $category['name']; ?></span></a></div> </li><?php } else { ?><!-- --><li><a href="<?php echo $category['href']; ?>"><span><?php echo $category['name']; ?></span></a></li><?php } ?> <?php } ?> On another note, we are also using BootStrap (latest version) to make the design responsive. And the reason why i use the 1100px width, like i said before is because of knowing if the screen is that wide AND to tell if i should be adding the category addon... if the screen however is less than 1100px (or so...), the menu should be normal. Reason why i do this is because i already like the responsive design, i only need to edit the PC-Screen design a little bit so the menu can fit without problems. Hope you all can help out one way or another, still struggling with this little thing Thanks in advance and again, its been a while, so..... HELLO // rootKID
  15. ShynedM

    center navigation

    Hi, I've downloaded a template and I'm now editing it in Dreamweaver. I am trying to center the top navigation menu, and from some reason I can't do it. Please see attached screen shot of the style sheet. Any advice would be helpful. Many thanks
  16. this the code for the navigation of a template i want to add an external page in the menu so what should i do for adding an external html page in this menu navigation. <div id="top-menu"> <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> <ul class="nav navbar-nav"> <li><a class="menu" href="#templatemo_home_page">Home</a></li> <li><a class="menu" href="#templatemo_service_page">Services</a></li> <li><a class="menu" href="#templatemo_work_page">Projects</a></li> <li><a class="menu" href="#templatemo_team_page">Our Team</a></li> <li><a class="menu" href="#templatemo_contact_page">Contact</a></li> </ul> </div> </div>
  17. Hello, I recently added different menu navigations for specific pages on my site: millcityenergy.com using the wordpress plug-in page specific menu items while it works fine for desktop, the mobile version displays all the pages in the dropdown (select a page). I've tried different custom css codes and as a novice, I have been unsuccessful. Screenshot attached. Any idea of how to narrow down the pages and/or follow the same navigation as desktop? Any help will be greatly appreciated. Thank you, Lauren
  18. I recently found W3 Schools site related to my search for information on navigation bars. What I am most interested in learning is how to build a navigation bar that matches what W3 Schools has on their own website. I especially want to learn how to build a navbar that has dropdowns that behave the like the ones they have for Tutorials and Examples. I have been unable to locate anything on their tutorials that would show me an example of how that is done. If anyone has any or could point me in the direction of where I can find some examples, I would be extremely thankful.
  19. Okay, so I'm trying to use: http://codyhouse.co/gem/3d-rotating-navigation/ but the text from my nav bar and buttons appear above it when I scroll down.. https://gyazo.com/fdb218e18dbe364635fd9652c693eaaa https://gyazo.com/f26263256f2a0e55488150d9ff008b10 Anybody know hot to fix this? :3 Thanks
  20. Hello All, I've been having an issue with getting this code to work on one site that was copied from another site that it works fine on. The code is basically to make the main navigation button show an "active" style to reflect what page (section/page) your on. The site I'm trying to get it work on now is: http://mototrbo.spcomm.com and this is the code I'm using: <script> $(function () { setNavigation(); }); function setNavigation() { var path = window.location.pathname; path = path.replace(//$/, ""); path = decodeURIComponent(path); $("#menu a").each(function () { var href = $(this).attr('href'); if (path.substring(0, href.length) === href) { $(this).closest('li').addClass('current-menu-item'); $('li.current-menu-item').parents().not('ul').addClass('current-menu-item'); } }); }</script> Any thoughts and/or help would be greatly appreciated! Thanks in advance, mh
  21. Hello, I had some help here a little while ago on getting some code to work so that the buttons of the main navigation of the site reflected with page and/or section you are in/on. I am trying to re-use the code on a new site and am running into some issues...mainly, it's not working. The new site is here: http://clarkwireless.oiw10.com I ended up using this code to target all the "main/top layer" buttons: <script> var current = window.location.href; if ( current == "http://clarkwireless.oiw10.com" || current == "http://clarkwireless.oiw10.com/" || current == "http://clarkwireless.oiw10.com/index.htm" ){ jQuery('#menu > li > a[href=/index.htm]')().addClass("active"); } else if ( current.indexOf("http://clarkwireless.oiw10.com/about-us/") > -1 || current.indexOf("http://clarkwireless.oiw10.com/news") > -1 || current.indexOf("http://clarkwireless.oiw10.com/resources") > -1 || current.indexOf("http://clarkwireless.oiw10.com/videos") > -1 || current == "http://clarkwireless.oiw10.com/contact-us.htm" ){ jQuery('#menu > li > a[href$=/about-us/index.htm]').parent().addClass("active"); }</script> And I ended up using this code to catch the buttons in the drop downs: <script> $(function () { setNavigation(); }); function setNavigation() { var path = window.location.pathname; path = path.replace(//$/, ""); path = decodeURIComponent(path); $("#menu a").each(function () { var href = $(this).attr('href'); if (path.substring(0, href.length) === href) { $(this).closest('li').addClass('active'); $('li.active').parents().not('ul').addClass('active'); } }); } </script> I've tried a few things with the CSS and within the Javascript, but it's a little over my head. Any help would be greatly appreciated! m@
  22. There is a rough sample of what's going on at saczee.com/ZTEST/build20-11.html Pay little attention to the code, though. It deliberately violates "best practices" and is less than half done. It simply gives an idea of what the mega-menu structures are intended to do. Also keep in mind, the positions and sizes of the mega-panels are not fixed - and will change from edition to edition (of an online newspaper). The solution, if there is one, must be something that works independent of other features of containers and their styling. It needs to pretty much confine itself to matters of visibility in hovered and toggled states and invisibility at other times. Setup: Its a routine inline-block navbar. there's underlayment containers for certain function and class switches on the list-items themselves for certain functions (on/off/active/dropdown/etc...) nothing special. the anchors are kept relatively clean and have no function except those without submenus - they serve as links - the others just serve as titles for submenus. Straightforward to that point. There are also two primary types of li links - ones that will have dropdown menus of some sort, others that will have mega-menu like panels that use divs as their principle content containers rather than ul/li submenus. Problem: The problem is handling the event actions on the list items. In particular, the gaps or deadspace if one is in hover mode. The mega-panels may be absolutely positioned anywhere on the page. So, when one hovers a navbar link the panels appear, but in traversing to the panel one must pass through unhovered-space (containers that are not associated (often cannot be) with the navbar structure at all. I can get the panels to appear, I can move them around and size them as I wish. I cannot manage to 1) keep them visible when leaving the link to go to them, 2) keep the link hover style active when I leave the list-item. My visibility is controlled with opacity, visibility and overflow and the panels put in block mode when visible (for a variety of reasons I do not wish to use negative margins or display:none properties to handle visibility.)What I've looked at a lot of toggle featured solutions like bootstrap and such. don't want to use them. Other simpler solutions I've seen with jquery, js and css combinations just miss what I'm trying to accomplish. I'm guessing some combination of css and js will do the trick, but I've no js experience. What I'd settle for: To be able to hover from the li to the separate div panels without losing the hover effect on the link or the visibility of the mega-panel. When the pointer is on the panel, both visibilities should remain. Then, when the hover is removed from the panel the panel should become invisible again and the style on the link go back to its unhovered state. What I'd like is: on hover the link styling for hover lights up and the mega-panel appears (stays on as long as the link is hovered. One can then travel to the panel and both elements remain in hover state. if one then clicks either the link or the panel, both are toggled and retain the hovered state visibility. If either are then clicked, then the panel becomes invisible and the link loses its hover styling when the pointer leaves it. I figure the thing takes a combination of js and css classes to put on the event initiators and their targets. If anyone has seen this somewhere or has/can create something like that, my thanks in advance. I haven't found anything like it elsewhere.
  23. Hello, I'm very new to CSS and I have a small issue with a navigation menu. Whenever I have a full screen and I don't resize my browser nothing is wrong. However whenever I resize on some pages the bottem of the navigation is gone. In the following picture the bug will be displayed: When I have my full screen again and refresh the page it will be normal again as displayed in the following picture: This bug makes mobile devices have issues from time to time and cannot see the whole navigation. If you need a live view you can navigate to my test page located here: http://testingcss.hostingsiteforfree.com/ Thank you for reading and have a nice day.
  24. Hi! My site's navigation looks and works pretty clean for computer use and viewing but when I pull it up on my iphone it's pretty sloppy.. I am looking for a way to code it for mobile devices so its a clean responsive look and user functionality isn't difficult to figure out.. Here is the site.. www.asamusic.us Thanks!!
  25. I just put together my own website on Weebly and need someone to give me some feedback on ease of navigation, the photos of my work, the text, and overall. I would also like to know what is the best way to advertise to get people to my site. I have almost a non-existent budget for more advertising since I'm also applying to outdoor juried shows. I have already tried Google adwords but got nowhere with that. Thanks in advance www.silverclouddesigns.net
×
×
  • Create New...