Jump to content

Search the Community

Showing results for tags 'menus'.



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 5 results

  1. Dear Sir, first of all thank you for such helpful website. Now as w3css framework is very useful and easy to implement. I want to suggest if following modification is possible in your new version of w3css. 1. Menu structure with ul and li elements rather than using only a tags. That will be easily implementable in WordPress default menu structure and having drop-down facility also available. 2. Menu items are being used 2 times for making it responsive rather it should use items only single time.
  2. 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> ____________________________________________________________________________________
  3. I'm working on a drop-down menu for someone and it's the largest one I've had to do yet (drop-downs are not a strong point of mine, and the largest I've ever had to do only had the one layer of drop-downs). This particular menu I want to have centered, along with it's drop-downs, and I was advised to code the first set of uls like this: This is the HTML for the menu: <ul class="topbar"> <li><a href="">News</a></li> <ul><li><a href="">Blog</a></li> <li><a href="">Podcasts</a></li> </ul><!-- CLOSES NEWS SUB-SECTION --> <li><a href="">About</a></li> <ul><li><a href="">Story</a></li> <li><a href="">Staff</a></li> </ul><!-- CLOSES ABOUT SUB-SECTION --> <li><a href="">Rules</a></li> <li><a href="">World Lore</a></li> <ul><li><a href="">Races</a></li> <ul><li><a href="">The Sidhe - Society</a></li> <ul><li><a href="">Sidhe Naming Conventions & Languages</li> <li><a href="">Sidehe Anatomy</a></li> <li><a href="">Courts of the Sidhe</a></li> <li><a href="">Clans of the Sidhe</a></li> <li><a href="">The Danuist Religion</a></li> <li><a href="">Criminal Orders of Cels</a></li> </ul><!-- CLOSES SIDEHE SOCIETY SUB-SECTION --> <li><a href="">The Aesir - Society</a></li> <ul><li><a href="">Aesir Naming Conventions & Languages</a></li> <li><a href="">Aesir Anatomy</a></li> <li><a href="">Brotherhoods of Norland</a></li> <li><a href="">The Faith of Norland</a></li> <li><a href="">Dishonoured Folk</a></li> </ul><!-- CLOSES AESIR SOCIETY SUB-SECTION --> </ul><!-- CLOSES RACES SUB-SECTION --> <li><a href="">History</a></li> <ul><li><a href="">Historical Lands & People</a></li> </ul> <li><a href="">Magic</a></li> <ul><li><a href="">Draiocht: Magic of the Sidhe<a></li> <li><a href="">Seird: Magic of the Aesir</a></li> </ul><!-- CLOSES MAGIC SUB-SECTION --> <li><a href="">Warfare & Technology</a></li> <li><a href="">Lands & Nations</a></li> <ul><li><a href="">Calendars & Dating</a></li> <li><a href="">Cultural Interaction</a></li> </ul><!-- CLOSES LANDS AND NATIONS SUB-SECTION --> <li><a href="">Forum</a></li> <ul><li><a href="">Search</a></li> <li><a href="">Members</a></li> <li><a href="">Calendar</a></li> <li><a href="">MyBB Help</a></li> </ul><!-- CLOSES FORUM SUB-SECTION --> <li><a href="">Character Creation!</a></li> <li><a href="">Guides</a></li> <ul><li><a href"">Guide to Account Switching</a></li> <li><a href="">Character Faults</a></li> <li><a href="">Guild Wars 2 Guidebook</a></li> <ul><li><a href="">Who is Your Character</a></li> <ul><li><a href="">Playing a Good-aligned Character</a></li> <li><a href="">How to Avoid Purple Person Syndrome</a></li> <li><a href="">Playing a Evil-aligned Character</a></li> </ul><!-- CLOSES WHO IS YOUR CHARACTER SUB-SECTION --> <li><a href="">Races of Tyria</a></li> <ul><li><a href="">Charr</a></li> <ul><li><a href="">Charr Naming Conventions</a></li> </ul><!-- CLOSES CHARR NAMING CONVENTIONS --> </ul><!-- CLOSES CHARR SUB-SECTION --> <li><a href="">Humans</a></li> <ul><li><a href="">Human Naming Conventions</a></li> <li><a href="">Personality</a></li> <li><a href="">Continental Tyrian History</a></li> <li><a href="">Elonian History</a></li> <li><a href="">Canthan History</a></li> <li><a href="">Human Ethnicity & Social Class</a></li> </ul><!-- CLOSES HUMAN SUB-SECTION --> <li><a href="">Norm</a></li> <ul><li><a href="">Norm Naming Conventions</a></li> </ul><!-- CLOSES NORM NAMING CONVENTIONS --> <li><a href="">Sylvari</a></li> <ul><li><a href="">Sylvari Naming Conventions</a></li> </ul> <!-- CLOSES SYVARI NAMING CONVENTIONS --> <li><a href="">Asura</a></li> <ul><li><a href="">Asura Naming Conventions</a></li> </ul><!-- CLOSES ASURA NAMING --> <li><a href="">Other Sources for Racial Names</a></li> <li><a href="">Racial Abilities & Magic</a></li> </ul><!-- CLOSES RACES OF TYRIA --> <li><a href="">Professions & Magic</a></li> <ul><li><a href="">Warrior (Scholar)</a></li> <li><a href="">Guardian (Soldier)</a></li> <li><a href="">Engineer (Adventurer)</a></li> <li><a href="">Ranger (Adventurer)</a></li> <li><a href="">Thief (Adventurer)</a></li> <li><a href="">Elementalist (Scholar)</a></li> <li><a href="">Necromancer (Scholar)</a></li> <li><a href="">Mesmer (Scholar)</a></li> </ul><!-- CLOSES PROFESSIONS & MAGIC SUB-SECTION --> </ul><!-- CLOSES GUILD WAR 2 GUIDE SUB-SECTION --> </ul> <li><a href="">Contact</a></li></ul><!-- CLOSES TOPBAR --> (Apologies if the spacing doesn't look as it should on here.) Do I need to define styling for all the ul sets, or will just using the .topbar ul suffice?
  4. Hi I am just self-learning CSS and am practising in a new WordPress site. It is only hosted locally for now so sorry I can't provide a link. I'm sure this is easy for a CSS guru though I am having trouble center aligning the text (i.e page links) within my horizontal navigation menus. I tried using padding (which works) though discovered it is displayed differently in different browsers (I am still learning about using universal CSS for multiple browsers). I read a few tutorials regarding using "margin: auto" and "align:center" though I have no idea where to use it in my code. I have tried a few things though can't get anything to work so any guidance would be much appreciated. [/font][/color] #subnav {-khtml-border-radius: 0px;-moz-border-radius: 0px;-webkit-border-radius: 0px;border-radius: 0px;clear: both;color: #555;margin: 0 auto 10px;margin-top: -8px;overflow: hidden;text-transform: uppercase;width: 920px;background-image:url(/wp-content/themes/child/images/banner1.png);} #subnav ul {float: left;width: 100%;} #subnav li {float: left;list-style-type: none;text-align: center;} #subnav li a {color: #526b91;display: block;font-family: 'Courier New', 'Arial','Sans Serif';font-size: 12px;padding: 8px 18px 6px 18px;position: relative;text-decoration: none;//text-indent: -9999px;} #subnav li a:hover,#subnav li a:active,#subnav li:hover a,#subnav .current_page_item a,#subnav .current-cat a,#subnav .current-menu-item a {color: #526b91;} #subnav li a:hover {color: #222;} #subnav li li a,#subnav li li a:link,#subnav li li a:visited {background-color: #f5f5f5;border: 1px solid #ddd;border-top-width: 0;color: #555;font-size: 11px;padding: 5px 10px;position: relative;text-transform: none;width: 128px;} #subnav li li a:hover,#subnav li li a:active {color: #222;} #subnav li ul {height: auto;left: -9999px;margin: 0 0 0 -1px;position: absolute;width: 150px;z-index: 9999;} #subnav li ul a {width: 130px;} #subnav li ul ul {margin: -33px 0 0 149px;} #subnav li:hover>ul,#subnav li.sfHover ul {left: auto;} [color=#282828][font=helvetica, arial, sans-serif] Thanks so much.
  5. Hello all, I developed pop-out slider menu that builds itself from the CSS rules and HTML content. Unfortunately I designed it around a $('.menuElement .uniqueMenuClass') strategy. Basically I have a handful of menus that do the same thing but with multiple copies of the pop-out menu script plugin with renamed '.uniqueMenuClass' for the respective menus. Example: $('.sliderMenu .menuOne').ready(function buildSlider(){ var sliderWidth = $('.sliderMenuElement .menuOne').width(); // A series of CSS dependent variables... $('.sliderMenuElement .menuOne').mouseenter(function animatedStuff(){ //series of animations triggered });} I'd then go back and copy/paste the whole thing with .menuTwo. Stupid, I know. Now, I'm trying to do something like this... $('.sliderMenu').ready(function buildSlider(){ var sliderWidth = $(this).find('.sliderMenuElement').width(); //Series of CSS dependencies... $(this).find('sliderMenuElement').mouseenter(function animatedStuff(){ //series of animations triggered });}); The problem is that .find() runs through ALL of the menuSlider's. Should I assign a unique ID to the menus and all their descendants and store the ID in all the variables and functions? Is there a way to traverse just within the $(this) element? or clear all the variables so the next menu starts clean-slate? Is this why I should have structured with lists instead of nested divs? Children aren't practical because I'm accessing a number of elements at different levels in the tree; the examples above are very simplified. Appreciate the help! Here's a link to a test version... which takes a while to load because of the multiple script references: www.jaredadradtke.com/testersite/index.html And please no comments on the reel labeled 'webdesign' Also... here's an example of the HTML: <div class="autoSlider"> <div class="slideCont" style="top:0px;"> <div class="sliderName">Reels</div> <div class="sliderInitial"> <div class="slideEndCap leftCap"></div> <div class="slideEndCap rightCap"></div> <div class="thumbCont reels"> <div class="slideThumb reels"> <span class="thumbCaption">Motion Design</span> </div> <div class="slideThumb reels"> <span class="thumbCaption">Cinematography</span> </div> <div class="slideThumb reels"> <span class="thumbCaption">Web Design</span> </div> <div class="slideThumb reels"> <span class="thumbCaption">Color Grading</span> </div> </div> </div> </div></div>
×
×
  • Create New...