Search the Community
Showing results for tags 'menu'.
-
Hi all, I'd like to make a responsive navigation bar with a drop down menu using jQuery but I'm having some difficulties getting it work properly. I've just started learning jQuery so my knowledges in this language are very limited for the moment. I know there is a tutorial precisely for that on w3school but I followed this tutorial on YouTube as the result is closer to what I would like to end up with. Besides, the code looks easier to me. What I'm trying to do is basically the same thing but without using an external <div> for the menu bar, which I would like to include in the list elements. To do so, I hid all the list elements using a max-height to 0 except for the "menu" one, then I toggleClassed all the list elements but the "menu" one so they get the new declaration max-height= 3em. Unfortunately, the menu doesn't drop down when clicking on the "menu" bar. Any help? Thanks. Here is the .html <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <link rel="stylesheet" href="responsiveMenu2.css" /> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> <title>Test</title> </head> <body> <header> <h2>responsive navigation (mobile first)</h2> <nav> <ul> <li class="menu" id="menu"><a href="#">menu</a></li> <li class=""><a href="#">home</a></li> <li class=""><a href="#">galleries</a></li> <li class=""><a href="#">news</a></li> <li class=""><a href="#">about</a></li> <li class=""><a href="#">contact</a></li> </ul> </nav> </header> <section> <article> Sed maximum est in amicitia parem esse inferiori. Saepe enim excellentiae quaedam sunt, qualis erat Scipionis in nostro, ut ita dicam, grege. Numquam se ille Philo, numquam Rupilio, numquam Mummio anteposuit, numquam inferioris ordinis amicis, Q. vero Maximum fratrem, egregium virum omnino, sibi nequaquam parem, quod is anteibat aetate, tamquam superiorem colebat suosque omnes per se posse esse ampliores volebat. Inter haec Orfitus praefecti potestate regebat urbem aeternam ultra modum delatae dignitatis sese efferens insolenter, vir quidem prudens et forensium negotiorum oppido gnarus, sed splendore liberalium doctrinarum minus quam nobilem decuerat institutus, quo administrante seditiones sunt concitatae graves ob inopiam vini: huius avidis usibus vulgus intentum ad motus asperos excitatur et crebros. Apud has gentes, quarum exordiens initium ab Assyriis ad Nili cataractas porrigitur et confinia Blemmyarum, omnes pari sorte sunt bellatores seminudi coloratis sagulis pube tenus amicti, equorum adiumento pernicium graciliumque camelorum per diversa se raptantes, in tranquillis vel turbidis rebus: nec eorum quisquam aliquando stivam adprehendit vel arborem colit aut arva subigendo quaeritat victum, sed errant semper per spatia longe lateque distenta sine lare sine sedibus fixis aut legibus: nec idem perferunt diutius caelum aut tractus unius soli illis umquam placet. </article> </section> <script> $(".menu").on("click", function(){ $("nav ul li").not(".menu").toggleClass("showing"); }); </script> </body> </html> And the .css *{ box-sizing: border-box; } html{ width: 100%; min-height: 100%; } body{ height: 100%; margin: 0; padding: 0; text-align: center; } header{ background-color: #00795f; width: 100%; padding: 40px 0 0 0; color: white; text-transform: capitalize; } nav{ margin-top: 40px; width: 100%; background-color: #43a286; text-transform: capitalize; } nav ul{ list-style-type: none; padding: 0; margin: 0; } nav ul li:not(#menu){ max-height: 0; -webkit-transition: max-height 0.4s; -moz-transition: max-height 0.4s; -ms-transition: max-height 0.4s; -o-transition: max-height 0.4s; transition: max-height 0.4s; } nav ul li a{ display: block; width: 100%; line-height: 3em; text-decoration: none; color: white; } nav ul li a:hover{ background-color: #399077; } section{ line-height: 1.5em; font-size: 0.9em; padding: 0; width: 100%; } article{ text-align: justify; padding: 5% 4%; } #menu{ background-color: #005c48; cursor: pointer; } .showing{ height: 3em; } @media screen and (min-width: 680px){ #menu{ display: none; } nav{ height: 3em; } nav ul li{ display: inline-block; margin: 0 1%; } nav ul li a{ padding: 0 20px; line-height: 3em; } section{ max-width: 900px; margin: 0 auto; } }
- 4 replies
-
- 1
-
-
- responsive
- drop down
- (and 2 more)
-
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
- 10 replies
-
- 1
-
-
- menu
- navigation
- (and 5 more)
-
Hello. My existing website (here) uses a side-nav. It's currently coded such that I need to copy/paste and then modify the nav code onto every one of my pages... totally lame. I'd like to be able to easily add primary tabs and secondary tabs to this nav in one master-nav document. Apparently one easy way to allow for using a master-nav document is through the use of PHP "Include" (or "require"), as explained (here) on w3schools. I followed the above example, and got it working great as a single-level nav (a 1-level nave with only primary tabs). Unfortunately, the PHP "include" example doesn't show an example of a 2-level nav (one with primary tabs and secondary tabs). My questions to you guys: 1. What would be the best way for me to go about coding in order to get a single master-nav document that I can easily edit, and said master-nav will also have the functionality of a 2-level nav? (I'm guessing I'll be needing some JQuery) 2. Can you point me in the correct direction of an example / tutorial? Thanks. -Josh!
-
Hey everyone, I made a cool little pure css hamburger button with a transition to a cross or x. Thought I would share it and open it up for improvements you guys can make. (If anyone thinks using borders is better, it is not, it displays incorrectly in Firefox.)
-
Hi, I'm making a menu script with several options. With ul and li. The script works but I cant find a way to have a start up page or so selected. What happens now is that the last chosen page is showing in the browser unless < a href "somepage"> is used and targeted in the obtained name attribute. <ul class="slideuptabs"> <li><a href="http://localhost/MyLocation/home.php" target="lcell"><span>Home</span></a></li> <li><a href="http://localhost/MyLocation/home2.php" target="lcell"><span>Home2</span></a></li> <li><a href="http://localhost/MyLocation/home3.php" target="lcell"><span>Home3</span></a></li> <li><a href="http://localhost/MyLocation/home4.php" target="lcell"><span>Home4</span></a></li> <li><a href="http://localhost/MyLocation/home5.php" target="lcell"><span>Home5</span></a></li> <li><a href="http://localhost/MyLocation/home6.php" target="lcell"><span>Home6</span></a></li> </ul> <br><br> <table class = "maincell" border="2" cellpadding="2" cellspacing="2"> <tbody> <tr> <td class="lcell" name ="lcell"><iframe src=" " name="lcell" width="99%" height="99%" framebo rder="0"> </iframe> </td> <td class="rcell" name ="rcell"><iframe src=" " name="rcell" width="99%" height="99%" framebo rder="0"> </iframe><br> </td> </tr> </tbody> </table> Is there a solution do this at loading the site or frame page? Can it be done in html or should I use another language? .
-
Hey! I am relatively new to CSS and HTML, what I basically do is some sort of Reverse Engineering -- I downloaded a template from w3 and tried to tweak it for work. Admittedly, I am a noob and doesn't fully understand what the codes mean. I need your advice on how I can edit the CSS code to stop breaking the nav bar whenever the screen is not maximised. I know the links/text can shrink so i'm thinking maybe the nav bar doesn't have to break or rearrange the links to several lines. The actual site is saved locally at the moment and here's the css code for the menu. /*--menu--*/ .menu { border-bottom: 5px solid #096DB9; width: 100%; } .toggleMenu { display: none; background: #666; padding: 0; width: 100%; color: #fff; } .top-nav{ background: #014279; } .nav { list-style-type: none; *zoom: 1; width: 100%; float:left; } .nav:before, .nav:after { content: " "; display: none; width: 0; } .nav:after { clear: both; } .nav ul { list-style: none; width: 100%; } .nav a { color: #FFF; font-size: 100%; } .nav li.active> a, .nav li> a:hover { color:#FF0000; } .nav li { position: relative; padding: 1px 15px; font-family: 'Open Sans', sans-serif; } .nav > li { float: left; } .nav > li > a { display: float; } .nav li ul { position: absolute; left: 100%; } .nav > li.hover > ul { left: 0; } .nav li li.hover ul { left: 100%; top: 0; -webkit-transition: background .2s linear; -moz-transition: background .2s linear; -ms-transition: background .2s linear; -o-transition: background .2s linear; transition: background .2s linear; } .search{ float:left; padding-top:0.2em; } .search input[type="text"] { outline: none; padding:5px 16px; outline: none; color: #fff; background:none; border: 1px solid #096DB9; width: 78.33%; line-height: 1.5em; font-size: 0.8125em; } .search input[type="submit"] { background: #FF0000 url('../images/search.png') no-repeat 9px 9px; padding: 6px 15px; border: none; cursor: pointer; width: 1.33%; position: absolute; line-height: 1.5em; outline: none; } .search input[type="submit"]:hover{ background:#001C32 url('../images/search.png') no-repeat 9px 9px; } .dropbtn { background-color: #4CAF50; color: white; padding: 16px; font-size: 16px; border: none; cursor: pointer; } .dropdown { position: relative; display: inline-block; } .dropdown-content { display: none; position: relative; background-color: #003366; min-width: 160px; box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); } .dropdown-content a { color: white; padding: 8px 12px; text-decoration: none; display: block; } .dropdown-content a:hover {background-color: #FF0000} .dropdown:hover .dropdown-content { display: block; } .dropdown:hover .dropbtn { background-color: #003366; }
-
I am attempting to create a drop down menu and I liked the style of the top home menu seen here http://www.lego.com/en-us/products (right near the lego symbol) but I am not sure how to create a similar one would some one gI've me guidance on how I can do this I just started html coding so I am a noon with little knowledge of html right now.
-
Hello, I have created accordion left menu where first level is clickable and appearing a slide down tree menu. The accordion menu is rolling to the left where is appearing just icons. I want in this position to not display a tree menu after click on an icon but to unroll whole menu to default position.Files are in attachement. Can you help me with this please? Thank you. accordion-menu.zip
-
This is an example working with optgroup. <form action="#" ><SELECT name="rubsel" class="btn"><?php$tmp=0;while($row = $result->fetch_assoc() ) {$reeks = implode(" " , $row); ?> <optgroup ="btn" label = "<?php echo $reeks; ?>" ><?php echo $reeks ;$tmp ; ?><option class="btn" name="rub_sub1" value="<?php echo $reeks; ?>">1 t/m 10 </option><option class="btn" name="rub_sub2" value="<?php echo $reeks; ?>">11 t/m 20 </option><option class="btn" name="rub_sub3" value="<?php echo $reeks; ?>">21 t/m 30 </option><option class="btn" name="rub_sub4" value="<?php echo $reeks; ?>">31 t/m 40 </option></optgroup><?php $tmp++;}?></SELECT><br><br><input type="submit" class ="btn" name ="tab_wrd" value="Kies Rubriek" /> <br><br></form> What i would like to know is how the input is being processed when using php. Especially how to find exactly the value of <option> The Select name input is found and echoed but what if I put a name attribute in the option element? I cant get an output of that. Or is there another way to get the option value with other attributes for instance?
-
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.
-
Hello everyone! I've got 6 details I wish to improve through my WP theme, Evolve. And I guess I need some CSS for them but I'm not good enough right now to do it all alone... So, I'm asking for your help today! I hope I'm not asking to much... Here is my (french) website : le-chemin-du-butterfly.fr 1. You can see I've got a widget on the right of my page. I'd like to resize it to give more space to my text (right now, it's 66% and 33% and I would like 75%-25%). I tried some things but I have to made it so that it still responsive. But I don't know how... I guess I have to add some If or And but.. how? 2. Again with this menu, I would like my text to be around it. Right now, the text is only in its column and doesn't go under the widget when it's after it. Menu and text are truly separated in two columns 3. Talking about menu, you can see I've got 2 links in my header ("Une Histoire de Bouquins" and "The Voyage"). What I'm looking after is to duplicate it on the right to add other links... But I guess it's HTML rather than CSS and I need to configure the theme itself for this right? But then, have you tips for me to do so? 4. I've got a search bar in the header but on small screens this search bar doesn't show very well: the text that's shown when you click on the button is shown... all time on small screens. So, it's not very... Professional. 5. I ran the plugin Livefyre for the comments but since, the "Leave a comment" (Laisser un commentaire) doesn't scroll down to the comments menu, because the anchor is #respond and not "#comments" or "#livefyre-comments" as the Livefyre's Support told me. So, how I can I manage that? Here is a link to an article for an example I know I'm asking a lot (especially for a first message!) but I've to say I'm kind of lost in all of this. I'm learning HTML/CSS from not so long and I can't figure out how to do this... Thank you a lot in advance!And see you
-
Hi, The following is template for my website http://egtours.com suddenly mega menu system does not work. I think I made some error but I could not figure out what is the error. I shall much appreciate if any body can help and figure out the error. What is this clickberry-extension clickberry-extension ? <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html class=" clickberry-extension clickberry-extension-standalone clickberry-extension clickberry-extension-standalone clickberry-extension clickberry-extension-standalone clickberry-extension clickberry-extension-standalone clickberry-extension clickberry-extension-standalone clickberry-extension clickberry-extension-standalone clickberry-extension clickberry-extension-standalone clickberry-extension clickberry-extension-standalone clickberry-extension clickberry-extension-standalone clickberry-extension clickberry-extension-standalone clickberry-extension clickberry-extension-standalone clickberry-extension clickberry-extension-standalone clickberry-extension clickberry-extension-standalone clickberry-extension clickberry-extension-standalone clickberry-extension clickberry-extension-standalone clickberry-extension clickberry-extension-standalone clickberry-extension clickberry-extension-standalone clickberry-extension clickberry-extension-standalone clickberry-extension clickberry-extension-standalone clickberry-extension clickberry-extension-standalone" xmlns="http://www.w3.org/1999/xhtml"><head><title>#PAGENAME#</title><meta content="text/html; charset=us-ascii" http-equiv="Content-Type" /><meta content="IE=EmulateIE7" http-equiv="X-UA-Compatible" /><link rel="stylesheet" type="text/css" href="sohoadmin/program/modules/site_templates/pages/PHASE2-Dinkin_Flicka-Evergreen/custom.css" /><link type="text/css" href="sohoadmin/plugins/MegaMenuBuilder/jquery.megamenu.css" /><link rel="stylesheet" href="lightbox/css/lightbox.css" /><link rel="stylesheet" type="text/css" href="jsimgslider/themes/3/slider.css" /><link rel="stylesheet" type="text/css" href="jsimgslider/themes/8/js-image-slider.css" /><link rel="stylesheet" type="text/css" href="jsimgslider/themes/8/tooltip.css" /><link rel="stylesheet" type="text/css" href="mactabs/mctabs.css" /><link href="zoomslider/themes/1/zoomslider.css" rel="stylesheet" type="text/css" /><script language="JavaScript" src="motionpack.js"></script><script type="text/javascript" src="http://www.egtours.com/sohoadmin/plugins/MegaMenuBuilder/javascripts/jquery-1.11.3.min.js"></script><script src="/zoomslider/themes/1/zoomSlider.js" type="text/javascript"></script><script type="text/javascript" src="/../../../../../../../../../../../../../tooltip/themes/2/tooltip.js"></script><script type="text/javascript" src="jsimgslider/themes/8/js-image-slider.js"></script><script type="text/javascript" src="jsimgslider/themes/3/thumbnail-slider.js"></script><script type="text/javascript" src="http://code.jquery.com/jquery-migrate-1.2.1.js"></script><script type="text/javascript" src="http://www.egtours.com/mactabs/javascript-tabs.js"></script><script type="text/javascript" src="http://w.sharethis.com/button/buttons.js"></script><!--[if IE]><style type="text/css">img { behavior: url("#template_path_full_url#/pngbehavior.htc"); }</style><![endif]--><meta content="clickberry-extension-here" /><meta content="clickberry-extension-here" /><meta content="clickberry-extension-here" /><meta content="clickberry-extension-here" /><meta content="clickberry-extension-here" /><meta content="clickberry-extension-here" /><meta content="clickberry-extension-here" /><meta content="clickberry-extension-here" /><meta content="clickberry-extension-here" /><meta content="clickberry-extension-here" /><meta content="clickberry-extension-here" /><meta content="clickberry-extension-here" /><meta content="clickberry-extension-here" /><meta content="clickberry-extension-here" /><meta content="clickberry-extension-here" /><meta content="clickberry-extension-here" /><!-- Google Tag Manager --><noscript><iframe src="//www.googletagmanager.com/ns.html?id=GTM-587FJD"height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript><script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src='//www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);})(window,document,'script','dataLayer','GTM-587FJD');</script><!-- End Google Tag Manager --></head><body onload="slidedown('featwrapper');"><div id="headwrapper"><div id="head" class="clearfix"><div id="logo_box"><a href="../../../../../../../Home_Page.php"><img id="logo" border="0" alt="Home" width="322" height="118" src="images/_userimg-logo.png" /></a></div><div id="tagline"><img border="0" alt="Home" width="468" height="60" src="images/_userimg-ad_banner.png" /></div></div></div><div id="trimbar"></div><div style="display: none; height: 124px; overflow: hidden" id="featwrapper"><div id="feat" class="clearfix"><div id="featleft">#NEWSBOX#</div><div id="featright">#PROMOTXT1#</div></div></div><div id="navwrapper"><div id="nav" class="clearfix"><div id="signup"><a href="javascript:;" onmousedown="toggleSlide('featwrapper');"><img style="border: 0pt" border="0" alt="Toggle the banner up or down" width="110" height="27" src="images/hide-show.png" /></a></div><div id="mainnav">#MEGAMENU#</div></div></div><div id="contentwrapper"><div id="maincontent" class="clearfix"><div id="subnav">#VSUBS#<div id="belowmenu">#POWERPLUG4#</div></div><div id="content"><div id="date">#AUTODATESTAMP#</div>#CONTENT#</div></div><div id="footerwrapper"><div id="footer"><table id="table1" border="0" cellspacing="1" width="400"><tbody><tr><td colspan="6" align="left"><p align="center"><a title="" href="../../../../../../../Our_Policies.php">Our Policies</a>| <a href="../../../../../../../Privacy_Statement.php">Privacy Statement</a></p></td></tr><tr><td width="60"><img border="0" alt="coat of arm" width="66" height="56" src="../../../../../../../images/logos/coatofarm.png" /></td><td width="152"><img border="0" alt="natta logo" width="53" height="56" src="../../../../../../../images/logos/nattalogo.png" /></td><td width="55"><img border="0" alt="uftaa logo" width="80" height="56" src="../../../../../../../images/logos/uftaa.png" /></td><td width="71"><img title="" alt="skull logo" width="75" height="36" src="../../../../../../../images/paybyskull.png" /><br /></td><td width="71"><p><img title="" alt="paypal logo" width="57" height="57" src="../../../../../../../images/paypalv.png" /></p></td><td width="26"><p><img title="" alt="vitof logo" width="97" height="73" src="../../../../../../../images/vitof_logo.png" /></p></td><td width="90"><img border="0" alt="SSL" width="90" height="50" src="http://www.egtours.com/images/rapidssl_ssl_certificate.gif" /></td></tbody></table>#COPYRIGHT#</div></div></div><script src="http://www.egtours.com/lightbox/js/lightbox-plus-jquery.min.js"></script></body></html>
-
I want to create a condition for my script. It starts with reading an array, this array can be unlimited, at least 4 up to 40 elements. These elements contain 2 variables. I figured out foreach is a better solution than switch (which I use now) In the next example (simple version of my above purpose) I show what I indicate. <?php $elements = array('Volvo', 'Honda', 'Ford'); ?> <form method="post"> <select name="menudrop"> <?php foreach ($elements as $value) : ?> <option value="<?php echo $value ?>"><?php echo $value ?></option> <?php endforeach; ?> </select> <input type="submit" value="submit" /> </form> <?php if (in_array($_POST['menudrop'], $elements)){ echo 'Clients enjoy eating a ' . $_POST['menudrop']; } ?> The problem is an error. The line with the error is: if (in_array($_POST['menudrop'], $elements)) what exactly does this error mean? The script is running and all things are executed like I intended, but I still get an error message at the screen. Notice: Undefined index:
-
Hello, (please accuse me for not using technical terms correctly and such, I am a newbie) I'm trying to add an "active" class to two buttons in a nav menu...one goes to the main/top section button and the other on the btn in the drop down. The code that I'm using works, but I have to do this for three pages and when I add the others some buggy stuff starts to happen. Here's the code that I'm using (at least for the home page and the "public safety" section of the site): <script> var current = window.location.href; if ( current == "http://www.tfmcomm.com" || current == "http://www.tfmcomm.com/" || current == "http://www.tfmcomm.com/index.htm" ){ jQuery('#mainmenu > li > a[href=/index.htm]').parent().addClass("current-menu-item"); } else if ( current == "http://www.tfmcomm.com/motorola/accessories/public-safety/" ){ jQuery('.sub-menu > li > a[href$=/motorola/accessories/public-safety/]').parent().addClass("current-menu-item"), jQuery('#mainmenu > li > a[href$=/public-safety/index.htm]').parent().addClass("current-menu-item"); } else if ( current.indexOf("http://www.tfmcomm.com/public-safety/") > -1 || current.indexOf("http://www.tfmcomm.com/motorola/accessories/public-safety") > -1 ){ jQuery('#mainmenu > li > a[href$=/public-safety/index.htm]').parent().addClass("current-menu-item"); }</script> The code in red is where I seem to be running into a problem. As you can see I'm just separating the two .addClass lines with a "comma". I have a feeling that's not legit. I tried to find the correct way to go about this, but with no luck. Any and all help would be greatly appreciated. Thanks in advance, m@
-
Hello I am using bootstrap as a beginner. I try to make a dropdown menu on several level but it don't work. My script : <body> <div class="container-fluid"> <ul class="nav nav-pills nav-stacked"> <li class="dropdown"> <a class="dropdown-toggle" data-toggle="dropdown" >Menu 1<span class="caret"></span></a> <ul class="dropdown-menu"> <li class="dropdown"> <a class="dropdown-toggle" data-toggle="dropdown" >Menu 1-1<span class="caret"></span></a> <ul class="dropdown-menu"> <li>menu1-1-1</li> <li>menu1-1-2</li> </ul> <li>menu 1-2</li> <li>menu 1-3</li> </ul> </li> </ul> </div> </body> Is it possible to do that with bootstrap ? or do I choose an other way .... Thanks
-
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.
-
Hello W3S! It's been a while since i've been online here... sorry about that Anyways. I have some trouble with a dynamic menu i'm trying to make with MySQLI... not sure if that is the problem anyhow... Here is the code as a start, i will explain under the code below what i'm trying to do: // File that we are on (viewing / watching)$tab = pathinfo( $_SERVER['SCRIPT_NAME'], PATHINFO_FILENAME );$menu_res = query("SELECT * FROM menu WHERE menu_file_url = ".$tab);$menu_row = mysqli_fetch_row($menu_res);if( $tab == $menu_row['menu_file_url'] || $menu_row['menu_accessible'] == "no" ) stderr("Page Error", "We are currently working on this page! Go to another page to keep browsing! Thanks for your patience! :)");if(isset($CURUSER)){ $menu_while_res = query(" SELECT * FROM menu WHERE menu_accessible = 'yes' AND menu_view = 'user' OR menu_view = 'both' ORDER BY menu_order_id ASC");}else{ $menu_while_res = query(" SELECT * FROM menu WHERE menu_accessible = 'yes' AND menu_view = 'guest' OR menu_view = 'both' ORDER BY menu_order_id ASC");}$HTMLOUT .= "<ul class='nav_first'>"; while ($menu_while_row = mysqli_fetch_array($menu_while_res, MYSQLI_ASSOC)) { // Menu Items Loaded Here $tabarray = array( $menu_while_row['menu_array_id_name'] => "<li><a href='".$menu_while_row['menu_file_url']."'>".$menu_while_row['menu_name']."</a></li>", ); // K = Key // V = Value foreach($tabarray as $k => $v) { if( $tab == $k ) $HTMLOUT .= str_replace("<li>", "<li class='nav_active'>", $v); else $HTMLOUT .= $v; } // Unset Menu For re-load again unset($tabarray); }$HTMLOUT .= "</ul>"; Currently i'm trying to make a dynamic menu with MySQLI! It's working perfectly... but when i tried to "expand" the project a bit longer and try to make a dynamic menu with errors on pages if the users are not allowed to view a specific file, then i get nothing... What i'm trying to do is to controle in the database with "Enum" as my DB setup that is "no" is has been set on one of the menu items (menu_accessible).. then the item will NOT show on the menu! AND if the user still tries to enter that specific page by URL, he will then get an error message saying that we are working on the website page... The code i'm trying to insert into this project is this little peace of code here: // File that we are on (viewing / watching)$tab = pathinfo( $_SERVER['SCRIPT_NAME'], PATHINFO_FILENAME );$menu_res = query("SELECT * FROM menu WHERE menu_file_url = ".$tab);$menu_row = mysqli_fetch_row($menu_res);if( $tab == $menu_row['menu_file_url'] || $menu_row['menu_accessible'] == "no" ) stderr("Page Error", "We are currently working on this page! Go to another page to keep browsing! Thanks for your patience! :)"); However, i get no respond on the code! Even when i have checked if the "$tab" variable is real and related to the name inside the DB (which it is!)... so if possible, can anyone help and tell me what i'm doing wrong here Oo? Thanks alot by the way! And sorry for the long goodbye hehe ...studies and all, killing me! -.-' Anyways, hope some answers or good tips... really need this one Thanks in advance! Mr rootKID
-
Hello: I'm trying to develop a web applications for maintaining database tables (Oracle tables and jsp). I use html, javascript, jquery and json. Notepad++ as editor.. And use the documentation of w3school. But I'd like to use an IDE which allow me to develop applications which include Menu, tabs and scrollable tables. The IDE I've tried include html tag and javascript code assistant, but not complex objets like tabs and applications menu. Can any tell me and IDE which include menu, tabs, ... Or, how can I create: - An application menu. - Tabs. in an easy way. Thanks
-
good day! so im working on a certain parallax website, newbie here aneways. The problem is i want my navigation bar to be transparent just like this site : http://www.xplaye.com/en/ i tried using opacity and background :transparent but it does not work at all. it only gives me a navigation that has a white background and i really want it to be transparent as if menu items were floating. anyone who has an idea? answers are greatly appreciated. thanks a lot CHEERS! heres my css : .nav{ height: 40px; width:auto;}.nav ul li{ list-style:none; text-decoration:none; display: inline-block; padding: 10px; padding-right:20px; float: right; }.nav ul li a { text-decoration: none; color:#FFF; font-family:Calibri; }.nav ul li a:hover { color: #6be0d6;}.nav ul li a:active{ color: #6be0d6; }
-
I had Menu in left page and content have to show a right side of page by frame..so now am facing one problem by frameset(i.e) one is on click of Menu link automatically have to be disappear the content have to show in full page after user may select other Link at the time Menu have to Appear By using Menu icon How to do it .??Any idea to avoid Frame-set menu.html <div class="menu" style="display: none;"> <div id="dropdownleft"> <ul style="display: none;" contentindex="0c" class="submenu"> <li><a target="content" href="jsp/Executive/Executive.html">Executive Dashboard</a></li> <!--<li><a target ="content" href="jsp/newsalereport/newsalereportmasterpage.html">New Sales Report</a> </li> --> <li><a target="content" href="jsp/saleanalysis/salenanalysismasterpage.html">Sales Analysis</a></li> <li><a target="content" href="jsp/itemwise/itemwisemasterpage.html">Itemwise Dashboard</a></li> <li><a target="content" href="jsp/Reports/cascade.html">Group-Wise Dashboard</a></li> <!--<li><a target="content" href="jsp/Executive/Topandbottom.html">Top-Bottom Report</a> </li>--> </ul> </div> <div> cafe.html <frameset rows="36,*,36" frameborder="0"> <frame src="footer/topfooter.html" name="topFrame" scrolling="no"> <frameset cols="230,*" frameborder="0" border="0" framespacing="0"> <frame src ="menu.html" marginheight="0" marginwidth="0" scrolling="no" /> <frame name="content" src ="" /> </frameset> <frame src="footer/bottomfooter.html" name="linksFrame" scrolling="no"> </frameset>
-
I have a working drop down menu almost perfectly styled. It functions however I want the submenus to appear in column rows not straight down. Here is my current HTML and CSS. Thanks in advance! <div id="navbar"> <ul id="dropdown"> <li class="topnav"><a href="#">Item One</a> <ul> <div class="column"> <li><a href="#">Subitem One</a></li> <li><a href="#">Second Subitem</a></li> <li><a href="#">3rd Subitem</a></li> </div> <div class="column"> <li><a href="#">Subitem One</a></li> <li><a href="#">Second Subitem</a></li> <li><a href="#">3rd Subitem</a></li> </div> <div class="column"> <li><a href="#">Subitem One</a></li> <li><a href="#">Second Subitem</a></li> <li><a href="#">3rd Subitem</a></li> </div> </ul> </li> </ul></div> #navbar { width: 100%; border-bottom: 1px solid #ccc; padding: 10 10 10 10; }#dropdown { width: 960px; margin: 0 auto; padding: 0; height: 1em; text-transform: uppercase; text-align: center; font-weight: bold; }#dropdown li { list-style: none; float: left; }#dropdown li a { display: block; padding: 3px 8px; text-decoration: none; }#dropdown li ul { display: none; width: 10em; /* Width to help Opera out */ background-color: #fff; } #dropdown li:hover ul, #navbar li.hover ul { display: block; position: absolute; margin: 0; padding: 0; border-bottom: 1px solid #ccc; }#dropdown li:hover li, #navbar li.hover li { float: none; }#dropdown li:hover li a, #navbar li.hover li a { background-color: #fff; color: #000; }.topnav a { color: #000; text-decoration: none; }.topnav a:hover { border-bottom: 1px solid gold; }.column {list-style-type: none;float: right;margin: 5px 0 0 0;padding: 0 5px 0 0;width:180px; }.column a { color: #999; text-decoration: none; font-size: .7em; }.column a:hover { border-bottom: 0px; }
-
So I made a menu but I don't know how to strech it from left to the right side...tried everything I could think of. So my question is does anyone know how to do it? Problem pic: Code so far: #access { background: #000; display: block; float: left; margin: 0 auto; /* width: 940px; width: 700px;*/ font-family:"Dekar Regular", Helvetica, Arial, Verdana , sans-serif; font-size-adjust:0.49; font-weight:normal; font-style:normal; padding: 0;}#access .menu-header,div.menu { font-size: 13px; margin-left: 0px; /* width: 928px; */}#access .menu-header ul,div.menu ul { list-style: none; margin: 0;}#access .menu-header li,div.menu li { float: left; position: relative;}#access a{ /* all links */ color: #FFF; display: block; line-height: 36px; /* is 44 but becuase of the 4px border it has to 4 less / height of the link boxes was 38 */ padding: 4px 10px 0 10px; text-decoration: none; width: 222px; /* menu item width, dose not include include the 1st and last item */ border-bottom-width:4px; border-bottom-style:solid; border-bottom-color:#000; font-size:21px;}#access ul ul { /*display: none; ----------- NONE TOUCH DEVICES ONLY */ position: absolute; top: 44px; /* match height of #access a 38 */ left: 0; float: left; /* width: 180px; width: 238px;*/ z-index: 99999;}#access ul ul li { /* min-width: 180px; width:238px;*/}#access ul ul ul { left: 100%; top: 0;}#access ul ul a { /* child items in the menu */ background-color:#000; /* line-height: 1em; */ line-height: 40px; /* is 44 but becuase of the 4px border it has to 4 less / height of the link boxes was 1em */ padding:0 0 0 10px; /* padding: 10px; */ /* width: 160px; width: 238px;*/ height: auto; width:300px; /* wider so that big game names fit in the menu */}#access li:hover > a,#access ul ul :hover > a { color: #ED2739; /* background-color:#666; */}#access ul li:hover > ul { /*display: block; ----------- NONE TOUCH DEVICES ONLY */}#access ul li.current_page_item > a,#access ul li.current_page_ancestor > a,#access ul li.current-menu-ancestor > a,#access ul li.current-menu-item > a,#access ul li.current-menu-parent > a { color: #ED2739; /* background-color:#666; */}* html #access ul li.current_page_item a,* html #access ul li.current_page_ancestor a,* html #access ul li.current-menu-ancestor a,* html #access ul li.current-menu-item a,* html #access ul li.current-menu-parent a,* html #access ul li a:hover { color: #ED2739; /* background-color:#666; */}#access .menu>ul>li:last-child a{ /* last element of the menu is a different width */ width: 178px; /* 154 */}#access .menu>ul>li:first-child a{ /* last element of the menu is a different width */ padding-left:5px;} -
Good day! how can i get rid of those extra space on my dropdwon menus? (see attachment) any ideas? thanks a lot! Cheers! neways heres my code <div class="nav"> <ul> <li>Contacts</li> <li>e-Book</li> <li>Blog</li> <li>Projects <ul> <li>On-going Projects List</li> <li>Completed Project List</li> <li>Project Gallery</li> </ul></li> <li><a href="services.html">Our Services</a> <ul> <li>Industrial Commercial Residential</li> <li>Supply and Installation</li> </ul> </li> <li><a href="about.html">About Us</a> <ul> <li><a href="general.html">General Information</a></li> <li>Organizational Chart</li> <li>Executive Team</li> <li>Business Objective</li> <li>Affiliate</li> <li>Vehicles & Equipment</li> <li>Contractor Liscense</li> <li>Commendations</li> <li>Bonding Capability</li> <li>Location Map</li> <li>Career</li> <li>Testimonial</li> </ul></li> <li><a href="index.html">Home</a></li> </ul> </div> .nav{ padding-top: 50px; margin-right: 10%; color:#666; text-decoration: none; } .nav ul li{ float:right; display: inline-block; text-decoration: none; padding: 10px; }.nav ul li a:link{ text-decoration:none; color:#333;}.nav ul li:hover{ color:#fad814; }.nav ul li a:active{ color: #fad814;}.nav ul li a:visited{ color: #666;}.nav ul ul { visibility: hidden; position: absolute; top: 120px; display: block; background-color: #444; border-radius:5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; transition: all .2s ease-in-out; padding-bottom:1px; margin: 10px 0px 0px 0px;}.nav ul li:hover > ul { opacity: 1; visibility: visible; margin:0px; z-index: 30; display: block; }.nav ul li ul li{ margin-left: 0px; list-style:none; text-decoration:none; float:none; display: block; border: 0; box-shadow: 0 1px 0 #111, 0 2px 0 #666; color: white;}.nav ul li ul li:hover{ background-color:#FC0; color:white; }.nav ul li ul li a:visited{ color: white !important;}.nav ul li ul li:first-child{ border-top-right-radius:5px; -moz-border-top-right-radius:5px; -webkit-border-top-right-radius:5px;}.nav ul li ul li:last-child{ border-bottom-right-radius:5px; -moz-border-bottom-right-radius:5px; -webkit-border-bottom-right-radius:5px; box-shadow: 0 0px 0 #111, 0 0px 0 #666;}.nav ul li ul li:first-child a:after{ content: ''; position: absolute; left: 30px; top: -8px; width: 0; height: 0; border-left: 5px solid transparent; border-right: 5px solid transparent; border-bottom: 8px solid #444;}
-
My navigation's drop down menu just quite working. I'm not sure what the problem is. The coding is all there and looks fine, so does the CSS. I don't see anything that should be effecting it. Help? You can see the design here: http://sugar-baby.org/The navigation SHOULD drop down like this: http://i43.tinypic.com/1zodpbb.jpg
-
Okay, i have been working on a solution for alot of time now, and i can still simply not figure out what the ###### is wrong here. So im asking here for a new set of eyes, again -.-'. If you would just see the uploaded picture, you can see the menu does NOT go outside the content area. This has happened on MANY of my projects when i was trying to integrate a jQuery based menu with help from a few .JS formatted files. This is my style.css code: * { margin:0px; padding:0px; font-size: 9pt; font-family:"Trebuchet MS";}body { color:#000000; background-color:#AAD491;}#wrapper { color:#000000; background-color:#7fc655; width:900px; height:auto; margin:0 auto; overflow:hidden;} #header { width:100%; height:50px; background-color:#7FC655; } #content { width:auto; height:auto; float:left; } This is my menu.css code: .menu { width:225px; height:100%; font-size:12px; text-transform:uppercase; margin:0px; margin-right:5px; padding:0px; background-color:#58a02c; float:left;}.menu ul.menusm { background-image:url(pictures/menu/menu_sep.png); background-position:0 100%;/*X% & Y%*/ background-repeat:repeat no-repeat; margin:0 auto; padding:0px;}.menu ul li.ms_top { display:block; float:none; padding:0px;}.menu ul li.last {}.menu ul li a.ms_top { color:#A9A9A9; display:block; font-weight:normal; margin:0px; padding:0px 1px;/*TOP & BOTTOM - RIGHT & LEFT*/ text-align:left; text-decoration:none;}.menu ul li.ms_top { background-image:url(pictures/menu/menu_sep.png); background-position:100% 0;/*X% & Y%*/ background-repeat:repeat no-repeat;}.menu ul li.ms_top.ms_last {}.menu ul li a.ms_top span { color:#000000; display:block; margin:0px; padding:13px 14px 13px 50px;/*Top, Right, Bottom, Left*/ width:158px;}.menu ul li a.ms_top.ms_first span {}.menu ul li#active_menu-nav a.ms_top,.menu ul li a.ms_top.ms_hover,.menu ul li.active a.ms_top,.menu ul li a.ms_top.ms_hover span,.menu ul li.active a.ms_top span { background-color:#74AD34; background-position:initial initial; background-repeat:initial initial; color:#FFFFFF; text-decoration:none;}.menu ul li a.ms_top.ms_havesubmenu span { background-image:url(pictures/menu/menu_r_d_a.png); background-position:100% 0;/*X% & Y%*/ background-repeat:no-repeat no-repeat;}.menu ul li.active a.ms_top.ms_havesubmenu span { background-image:url(pictures/menu/menu_r_d_a.png); background-position:100% 0;/*X% & Y%*/ background-repeat:no-repeat no-repeat;}.menu ul li a.ms_top.ms_havesubmenu.ms_hover span { background-image:url(pictures/menu/menu_r_d_a.png); background-position:100% 0;/*X% & Y%*/ background-repeat:no-repeat no-repeat;}.menu ul li a.active,.menu ul li a.ms_hover,.menu ul li a.ms_havesubmenu.active,.menu ul li a.ms_havesubmenu.ms_hover {}.menu ul li ul { font-size:11px; font-style:normal; left:225px;/*Normal: 223*/ line-height:20%; margin:0px; padding:0px; text-transform:uppercase; top:0;}.menu ul li ul li { border-bottom-color:#74AD34; border-bottom-style:solid; border-bottom-width:1px; margin:0px; padding:0px; z-index: 10000;}.menu ul li ul li.ms_last { border-bottom-style:none;}.menu ul li ul li a { background-color:#49901e; background-position:initial initial; background-repeat:initial initial; color:#FFFFFF;/*Normal: 848484*/ /*text-decoration:none;*/ display:block; margin:0px; padding:12px 10px;/*TOP & BOTTOM - RIGHT & LEFT*/ width:160px;/*Normal: 160px*/}.menu ul li ul li a span { color:#FFFFFF; padding:0px;}.menu ul li ul li.ms_last a {}.menu ul li ul li a.ms_hover { text-decoration:none;}.menu ul li ul li ul { left:180px; top:0;}.menu ul li ul li a.ms_first.ms_havesubmenu.ms_hover,.menu ul li ul li a.ms_first.ms_havesubmenu.active,.menu ul li ul li a.ms_first.ms_havesubmenu.ms_hover span,.menu ul li ul li a.ms_first.ms_havesubmenu.active span,.menu ul li ul li a.active span,.menu ul li ul li a.active,.menu ul li ul li a.ms_hover,.menu ul li ul li a.ms_hover span { background-color:#74AD34; background-position:initial initial; background-repeat:initial initial; color:#FFFFFF;}.menu ul li ul li a.active span,.menu ul li ul li a.ms_hover span {}.menu * { z-index:9003;}ul.menusm { list-style:none;}ul.menusm li { cursor:pointer; position:relative;}ul.menusm li a { position:relative;}ul.menusm li ul { display:none; height:auto; list-style:none; position:absolute;}ul.menusm li ul li ul { list-style:none; position:absolute;}/*======================*//*QUICK JUMPY MENU*//*======================*//*.menu select { margin-bottom: 10px; display: none; font-size: 14px; height:auto; width:100%; }.menu select { width: 100%; height: 30px; padding: 2px 5px 2px 10px ; color: #000; font-size:20px; }*/ This is my index.php file: <?phprequire_once("include/config.php");require_once("include/core.php");?><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <link rel="shortcut icon" href="favicon.ico" /> <script type='text/javascript' src='js/jquery-1.10.2.min.js'></script> <script type='text/javascript' src='js/menu.js'></script> <link rel="stylesheet" href="style/style.css" type="text/css" /> <link rel="stylesheet" href="style/links.css" type="text/css" /> <link rel="stylesheet" href="style/menu.css" type="text/css" /> <title>Hjem</title></head><body><div id='wrapper'> <div id='menu' class='menu' style="font-family: 'Open Sans';"> <div id='header'> <img src="style/pictures/logo.png" /> </div> <script type='text/javascript' src='js/menu_html_block.js'></script> </div> <div id="content"> Content </div></div></body></html> This is my menu Javascript File: document.writeln('<ul class="menusm" id="menu-top-menu">');document.writeln(' <li><a href="index.php"><span>Hjem</span></a></li>');document.writeln(' <li><a href="#" class="menu_navigation"><span>Webshop</span></a>');document.writeln(' <ul>');document.writeln(' <li><a href="#" class="menu_navigation"><span>Menu</span></a>');document.writeln(' <ul>');document.writeln(' <li><a href="#" class="menu_navigation"><span>Menu</span></a></li>');document.writeln(' <li><a href="#" class="menu_navigation"><span>Menu</span></a></li>');document.writeln(' </ul>');document.writeln(' </li>');document.writeln(' </ul>');document.writeln(' </li>');document.writeln(' <li><a href="#"><span>Menu</span></a></li>');document.writeln(' <li><a href="#" class="menu_navigation"><span>Menu</span></a>');document.writeln(' <ul>');document.writeln(' <li><a href="#" class="menu_navigation"><span>Menu</span></a>');document.writeln(' <ul>');document.writeln(' <li><a href="#" class="menu_navigation"><span>Menu</span></a></li>');document.writeln(' <li><a href="#" class="menu_navigation"><span>Menu</span></a></li>');document.writeln(' <li><a href="#" class="menu_navigation"><span>Menu</span></a></li>');document.writeln(' </ul>');document.writeln(' </li>');document.writeln(' <li><a href="#" class="menu_navigation"><span>Menu</span></a>');document.writeln(' <ul>');document.writeln(' <li><a href="rules.php" class="menu_navigation"><span>Rules</span></a></li>');document.writeln(' <li><a href="faq.php" class="menu_navigation"><span>FAQ</span></a></li>');document.writeln(' </ul>');document.writeln(' </li>');document.writeln(' <li><a href="#" class="menu_navigation"><span>Menu</span></a>');document.writeln(' </ul>');document.writeln(' </li>');document.writeln('</ul>'); I know the code is a bit long, but if you could. Please, any ideas? I am basicly desperate to get this to work! And i can simply NOT figure out what the heck is wrong, and i am almost crying here -.-'... Some ideas? Tips? Would be simply AWSOME! If possible. Thanks ALOT! rootKID
