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
Related
I redesigned a website for a friend using twitter bootstrap which i supposed would save me from thinking about cross-browser compatibility.
Now I try to use it with firefox only to notice that the controls of the Carousel component move away when you hover them, thus making it impossible to click them. Not to mention it looks rather unprofessional.
The strange behavior can be seen here and occurs to me on Firefox 18.0.2:
http://snow-first.com/snow-rabbit-3/
Anybody has a clue to what's going on? Tried looking in the css but the only thing that should happen on hover is an opacity change...
for the selectors .carousel-control:hover, .carousel-control:focus (line 576 of your CSS) add position:absolute
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.
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 it possible to make such buttons (http://img225.imageshack.us/img225/6452/buttonslw9.jpg) using CSS? It should be Menu, and PHP would just feed the text to html/css and css should take care of the design.
Maybe I want too much out of CSS - especially with that red outline of the text.. ? Any ideas how i can achieve such results without doing those buttons manually in Graphical Editor?
"Pure" solution is possible in latest Safari with text-shadow, -webkit-text-stroke and -webkit-gradient properties (explained in Safari blog).
You could also use SVG + CSS background-image in Opera 9.5 and Safari.
A practical solution that works in more than a couple of cutting-edge browsers is to generate images on the server side with GD library.
There is no cross-browser way to do this (as you said, especially with the red text outline), but the Webkit and Gecko teams are implementing some cool CSS things like gradients embossing with experimental CSS properties.
You might see what jQuery can do for you. It does some pretty cool CSS-like things that go beyond CSS.
I have a small gallery of thumbnails. When I place my mouse pointer over a thumbnail image I'd like to have a full size image pop up in a div in the top right of the screen. I've seen this done using just CSS and I'd like to go down that route rather than use javascript if possible.
Pure CSS Popups2, from the same site that brings us Complexspiral. Note that this example is using actual navigational links as the rolled-over element. If you don't want that, it may cause some stickiness regarding versions of IE.
The basic technique is to stick each image inside a link tag with an actual href (Otherwise some IE versions will neglect :hover)
Text <img class="popup" src="pic.gif" />
and position it cleverly using absolute position. Hide the image initially
a img.popup { display: none }
and then on the link rollover, set it up to appear.
a:hover img.popup { display: block }
That's the basic technique, but there are always going to be major positioning limitations since the image tag dwells inside the link tag. See the link for details; he uses something a little more tricky than display: none to hide the image.
CSS Playground uses pure CSS for this type of thing, one of the demos is surely to help you and as it's all CSS just view source to learn - you probably want to use the :hover pseudo class but there are limitations to it depending on your browser targeting.
Eric Meyer's Pure CSS Popups 2 demo sounds similar enough to what you want.
Here are a few examples:
CSS Image gallery
Cross Browser Multi-Page Photograph Gallery
A CSS-only Image Gallery: Explained
A CSS-only Image Gallery: Example
This last one acts upon click. Just to be complete in behaviours.