I am new to css and jquery and have a problem with a menu item. I have a Jquery Mega Menu and I want to have the Attorney Profile menu item be 1 single row instead of the two it is now. Normally I would post code but there just is to much. So I am going to post a link to the actual working site.
I tried adding fullwidth but no success.
$(document).ready(function($){
$('#mega-menu-tut').dcMegaMenu({
rowItems: '1',
speed: 'fast'
fullWidth: true
});
});
I also tried to modify the css here:
.dcjq-mega-menu ul.menu li .sub li.mega-hdr { /* Sub-menu headers - i.e. 2nd level navigation */
float: left; /* Float the sub-menus and give them a fixed width to from the mega menu rows */
width: 130px;
height: 165px;
margin: 0 2px 7px 2px;
border: 3px solid #ccc;
}
But that just modifies that actual inside menu.
Here is the active site: http://gdisinc.com/barker/default.php
Notice if you roll your mouse over Attorney Profiles it will show two rows. How can I make that one row that matches the width of the site which is 960px. Thank you!
PS: I used this menu system: http://www.designchemical.com/lab/jquery-mega-drop-down-menu-plugin/getting-started/
You can change the padding on this style
.dcjq-mega-menu ul.menu li a
to
padding:12px 20px;
The elements in the have a width based on their content, so reducing font-size for navigation items would work as well. Fixes for such problems are easily found using Chrome's Web Inspector / Firefox's Firebug etc.
Would be probably good to not have the small divider after contact us tab as well. You could achieve this by adding a :last-child class like this:
.dcjq-mega-menu ul.menu li:last-child a { background:none; }
The problem is that the CSS selector here is not very readable and can lead to very annoying problems later on. If you can, always change such long declarations to a single class:
.last-menu-item { background:none; }
As well, keep in mind that :last-child is not supported on Internet Explorer < 9.
http://caniuse.com/#search=last-child
Welcome to the world of CSS ... :)
It looks like you'll need to change the "rowitems" option here:
$(document).ready(function($){
$('#mega-menu-tut').dcMegaMenu({
rowItems: '3',
speed: 'fast'
});
});
If you change it to '5' it should display all of the items on the same row. Take a look at the examples:
http://www.designchemical.com/lab/jquery-mega-drop-down-menu-plugin/examples/
It doesn't look like there is a way to configure this effect per menu item unless you split the menu up into separate instances of the MegaMenu.
Related
I have made a search box which uses the jQuery UI autocomplete feature to display potential search matches. I have noticed that the as in the drop down list move and shrink the UI menu by several pixels when hovered. Is there a way to prevent this such that the only styling that appears on the menu links is the color change I have added via:
.ui-menu .ui-menu-item a:hover{
background:none;
color:#FF0000;
font-size:10px;
}
Here is a fiddle of my progress so far https://jsfiddle.net/shaneswebdevelopment/zcvxy2z6/1/
So it turns out when you hover over an item in the dropdown list, jQuery ui adds a ui-state-focus class on your element which has these css properties:
.ui-state-focus {
font-weight: normal;
margin: -1px;
}
The reason you're seeing the characters jump is because of the margin: -1px;. If you override that css class with something else you can eliminate the jumping text.
So in order to fix you could do this:
.ui-menu .ui-menu-item a.ui-state-focus {
margin: 0px;
}
Note I've added other CSS selectors in order to get a certain level of specificity to override jQuery UI's styles. Here's an updated jsFiddle: https://jsfiddle.net/zcvxy2z6/16/
My leader told me select option could not be fully custom-tailored. Therefore, I have to use ul li to make the following css style. http://jsfiddle.net/C5mTf/59/
Sorry, the following is partial css had to show per stackoverflow requirement
#menu ul:hover .item:last-child{
border-bottom: 1px solid #cbc5cd;
border-bottom-left-radius: 4px;
border-bottom-right-radius: 4px;
}
The following are requirements:
1. at initial stage, the dropdown menu only show first item with rounded corners.
2. if moving mouse over menu, it will display all items with the whole box rounded corner.
3. After clicking any item or leaving the menu, the dropdown menu will hide all items except selected one
Is there a way to use select and option tags to build the same css appearance?
For cross browser rendering answer is no. There are some jquery plugins that do a lot of dom manipulation for selects, but your menu looks fine. You will end up wasting more time on trying to figure out how to make it look that way.
I currently have a list of objects (projects) that are presented to the user initially as div's that have have a 100px x 200px height/width, position absolute, and float left. This list is contained within an angular ng-repeat method (not sure that makes a difference in the overall question but figured I'd add it in just in case it does). There could be 100s of these divs on the particular project listing page. Currently, I have the page setup so that if you click one of the projects, it's details come up in a modal dialog box. This functionality is fine per the requirements for my project but I'd like to add some "umph" to it by adding in an animation that does the following:
1) If you click on one of the projects, the box expands up to fill the parent container that contains all the projects
2) As the div grows to fill the space or when it's full sized, I want to expose the details of the project itself. Essentially, when the project is unselected, it's just a title/description showing. When it is selected, the project div goes full screen, exposes all of it's details, and shows it's editable fields in the full screen version of the div.
3) When the user closes that full screen div, I'd like it to go back to it's original state in it's original position.
I'm only using the latest version of Chrome for this project so it doesn't need to be a cross browser solution. I'd prefer to keep the animation as close to pure css as possible and would prefer to leave jquery out of it.
I currently have no experience with css3 animations but got a book on it that I hope can teach me about this eventually. However, I figured I would ask in the mean time in case someone can help me out soon so I can put this functionality in while still meeting my deadline for the functionality.
Thanks in advance!
Create a second CSS class that can be added to your div element when it is selected, and removed when it is not. Something like
div {
top: 100px;
bottom: 200px;
left: 100px;
right: 300px;
transition: all 1s; /* animate changes */
}
.active {
top: 0px;
bottom:0px;
left: 0px;
right: 0px;
}
.content {
display: none; /* hide the content unless active */
}
.active .content {
display: block; /* show the content when .active class is added */
}
Make sure that the parent container fills the entire window and is itself set to positiion: absolute or position: relative. There will be a lot more details to work out as you go, but that should give you a framework to get started. You can then add or remove the .active class as needed with JavaScript.
http://hemakessites.com
I'd like to click the About button to go to the About page. I'm using Javascript and JQuery to handle the behavior (make the whole li clickable). For some reason, clicking about in different areas of the li doesn't always load the page.
I'm open to not using jQuery if there's a better solution.
The "contact information" and "hobby projects" li don't have an href, so the links don't work. If you go to the About page, the menu works based on CSS without the javascript trying to make the whole li clickable. So there is no javascript on the about.html page, and you can see the menu problem without any javascript.
Thanks for your help!
index.html
<div class="navcontainer">
<ul><li>Link Title</
li><li>Second_Link Title</ <!-- fixes extra space with </li><li> -->
li></ul>
</div>
style.css
#nav li
{
display: inline-block;
List-Style-Type: None;
float:left;
text-align:Center;
width: 153px;
height:46px;
font-size: 80%;
border-Bottom: 1px solid #666666;
}
#nav li #about
{
z-index: 10000;
position: relative;
top: 18px;
text-decoration: underline;
-moz-user-select: -moz-none;
-khtml-user-select: none;
-webkit-user-select: none;
}
just add the following in your CSS:
#nav li.about a{
z-index:10000; }
and it will work
Your issue is not the javascript, but the CSS. You have a hover attribute that enlarges the <li>. When you click, the active attribute causes it to shrink, making the element smaller than it previously was. If you click in the upper corners of the enlarged element, it won't load because the element is now below the clickable area. If you click in the middle towards the bottom, it will.
Ultimately, for something like this, you might be better off using jQuery UI to manage your tabs or use Twitter Bootstrap. Out of the box it works, and you don't have to worry about CSS issues, plus they already look nice so no extra styling.
If you want to stick with you already have going, you may just want to ditch the fancy CSS. Get rid of the :active class and it should work okay I think.
The problem you have right now is that the li is bigger then the a. Clicking on the li, but outside the a will not make the link work, as you already found out.
In stead of applying all your styles and effects to the li element, you should apply them to the a element directly and set it to display as a block. This way the li will take the same size as the a, and whereever you click on the hovered item, your href will work just fine. Bigger links is always a good idea, definitly with the amount of tablets and other toutchscreen devices rizing every day.
Note that it will not be a straight copy / paste of your code, especially when it comes to floats and positioning, but it should not be to hard to achieve what you are after by applying the styles directly to the a element. If you have difficulty converting your code, feel free to set up a working example on jsfiddle and we will be happy to help out where possible.
This solution does not require any js what so ever. Using js for your main navigation is always a bad idea, as it will make it hard, if not impossible, to navigate your site for people with js disabled. Not exactly what i would call gracefull degrading...
I am attempting to use a Jquery menu, that makes use of the 'easeOutBounce' easing method. It is working fine but, I cannot figure out how to change the direction that the menu is bouncing out from. It currently expands to the right and bounces. My menu will be right-align and I want it to expand to the left.
This is the example I'm using: http://jcargoo.110mb.com/rightmenu/
Is this what you are trying to achieve? http://demo.raleighbuckner.com/so/1338381/
If so, all I did (other than removing the extra examples) is to change this CSS:
#sliding-navigation1 li {
text-align: right;
}
to this:
#sliding-navigation1 li {
text-align: right;
float:right;
clear:both;
}