I have a requirement by which I need to have something like below as the background of my asp.net menu item background.
NOTE: The menu is populated by sitemapdatasource which is dynamic depending on querystring.
I was doing some googling up and found that I can apply JQuery's rounded corner functionality along with asp.net menu item.
Has anyone got any better solution or probably an example of JQuery's rounded corner and asp.net menu item example.
Thanks,
Nimesh
Another option is to use CSS instead. This works even when JavaScript is turned off.
Unless you can control the browser clients use you will need to use CSS3PIE to get it working with Internet Explorer though.
The CSS properties you need are -webkit-border-radius, -moz-border-radius, and border-radius. If you include all three, and set them to the same value, the vast majority of browsers will render the rounded corners for you.
Also, there will be no visual lag in the rounding as there is with JavaScript sometimes.
EDIT: The CSS selector will be basically the same as the JQuery one.
Related
In asp.net How to create color full rounded corner navigation menu using css and whenever user click on parent node then all the child node wiil be display and color of the parent node will be change.
CSS Rounded corners are done using the border-radius style. It's widely supported in all browsers now, but you may need to add some vendor prefixes to support older versions of browsers.
IE8 and lower does not support border-radius at all, but can be made to do so using various hacks, of which CSS3Pie is by far the best. (IE9 does support it just fine though)
For menus that change colour and drop down the submenu when you mouse-over, you can use the :hover CSS selector.
So something like this:
.menu {background-color:red;}
.menu:hover {background-color:blue;}
Of course there's more to it than that, especially when you're talking about drop-down menus, but that's the basic stylesheet functionality you need to know.
There's a whole bunch of tutorials for this on the web, but this looks like a good one: http://divitodesign.com/css/how-to-dropdown-css-menu/
If you want to do it on click rather than hover, you might find you have do some of the work with Javascript rather than pure CSS.
Use ajax Rounded Corners or you can use rounded images. There are loads of jquery dropdown menus available on net
I am using AJAX modal popup in my project, but there is problem with it.
Now I decided to acheive similar behaviour using javascript
I am able to show popup using
document.getElementById('dv').style.display = "block";
Now I just need, how can I make background disable like in modal popup?
you create a div that spans the whole page but initial style is display:none; along with any other styles. i.e transparency 80% with background colour of black..
When you show dv change the display attribute of the div (above). Just make sure that the dv has a higher z-index than the background div and the background div has a higher z-index than the content on the page :)
Have you considered using a library for this? The most programmer-friendly and flexible I have found is NyroModal (jQuery based). The advantage of a library is it will deal with many subtle things that happen with modal dialogs, e.g. ensuring it works effectively across all browsers (and overcomes the various quirks around things like positioning), animating on and off, lightbox effect around it.
NyroModal lets you generate dialogs dynamically, whereas most libraries are geared owards simpler use cases such as "make all images clickable so they show up as lightboxed when the user clicks on them".
I have a label with a tooltip attribute for rollover effect. This works all great. However, it seems to get hidden behind any dropdown lists that are nearby. I have tried adjusting the z-index, without any luck. This issue does not appear in firefox, and I have not tested it in later versions of IE.
I realize this is probably due to IE6s poor css standards-compatibility, but how can I get around this?
Not the best because it requires javascript/jQuery library, but there's a workaround:
http://dhtmlgrounds.wordpress.com/2008/12/23/ie6-select-box-z-index-bug/
IE6 has a know error that selects always end up the highest in the z order...
Custom select control optional?
Have a look at this
Another idea is to use the ajaxtoolkit autocomplete?
The select dropdown in IE6 is implemented as a Windows control, so the browser isn't really drawing it. Thus, it doesn't support features like z-index. One possible solution is to hide all select boxes on the page when you show your tool-tip. Another option is a custom dropdown, which you can find in libraries like Ext.
As astander and MikeWyatt said, selects in IE are topmost. There are two paths to work-around this problem:
Use a custom select box, rendered with divs, etc. This is rather cumbersome, since you won't be able to replicate all of the drop-down functionality.
Place an <IFRAME> under the tooltip (tooltip z-index > iframe z-index). This will work-around the problem, yet you have to worry about the positioning of the iframe overlay.
Can someone tell me why the CSS dropdown menu (rollover "Software Solutions") works here :
http://deltaassocc.web704.discountasp.net/temp/page-works.html
but not here:
http://deltaassocc.web704.discountasp.net/temp/page.html
This has been driving me crazy! I'm using Firefox 3.0.10. Please help..
There is an awful lot of knowledge built into a CSS menu to cover different browser versions and so on. My advice is don't do this yourself. Get a prebuilt one like suckerfish (or one of the many variants).
Alternatively you can use a Javascript based solution like superfish as suggested here.
Note: if you need to support IE6 then you'll be using Javascript for that browser anyway as it doesn't support the :hover pseudo-element on anything other than anchors.
Because you are loosing focus on the parent element. On the second one, there are more elements below and when the dropdown extends it goes under the content container - you move your mouse down and it's over the text content container, not over the menu container no more.
Install web developer toolbar and outline box elements, you will see that.
Google for jquery dropdown menu or other javascript-framework based solutions, they'll work fine and cross-browser, unless you're doing it just for self-education.
The pages look the same in IE8 and Firefox. The menu drops down but doesn't look at that great. If your using JQUERY SuperFish is a really good cs-menu.
Is there any way, how to make rounded HTML <select>, without using any javascript?
I have this insane design and I have absolutely no idea how to do it only with CSS.
The same problem is with checkbox and radiobutton. Does anybody know how to make them rounded?
I need solution that works for IE6+, Firefox 2+, Opera 9+ ...
alt text http://uploader.chytry.cz/select-checkbox.png
No. Form styling is very problematic, there are no guarantees that any styling will work. Simple borders and background colours/images generally work OK in most browsers. I believe Safari will let you style very little. Check this page for more detailed info.
Honestly, the best solution is to use javascript. jQuery click menu is a great solution I used recently to mimic a select box (used JS to set a value on a hidden field when an element in the menu was selected).
I'm sure there are other solutions around too if you search.
No.
Now the long answer: Internet Explorer does not lend itself well to being styled. You will be able to set a background image for the left-hand side (the text content) that has rounded corners, but the drop-down arrow will be fixed as the default browser. You'll also find that the mousedown and mouseover states for the control will be fixed as the default style.
I think that in many cases, the ideal preferred design needs to be a little pragmatic about limitations in browser standards support. Specifically, the problem that IE6 doesn't support a fair number and IE7 is only slightly more compliant.
Sorry for the bad news.
no
please see this site for radiobutton and checkbox
http://www.maratz.com/blog/archives/2006/06/11/fancy-checkboxes-and-radio-buttons/
No, Whit out javascript or jQuery you can not do this. But if you need with jQuery try this link. It contains the HTML select box with rounded corners by jQuery.
http://webworld-develop.blogspot.com/2011/11/cool-html-5-select-with-jquery-and-css.html