Tag: navigation
Nabin Nepal (Starx) css html-lists nav navbar navigation
April 21, 2013

Forcing line on navigation bar (unordered list)?

Rachelle Bennington’s Questions:

Rachelle BenningtonRachelle Bennington

My navigation bar currently is scrunching all my text together. I have “headers” for the dropdown list, and the headers aren’t forcing a line.

The HTML looks like this:

<li><p>Services</p><ul>
    <li id="ITServices"><p>IT Services</p></li>
    <li><a href="port_collab_work.html">Portals, Collaboration & Workflows</a></li>
    <li><a href="business_intel_dash.html">Business Intelligence & Dashboards</a></li>
    <li><a href="mobile_development.html">Mobile Development</a></li>
    <li><a href="custom_application_development.html">Custom Application Development</a></li>
    <li id="healthcare"><p>Healthcare Services</p></li>
    <li><a href="healthcare.html">EMR, ICD 10 and Healthcare Consulting</a></li>
</ul></li>

CSS looks like this:

#healthcare p {
    width: 280px;
    margin-left: 0px;
    padding: 0px;
    display: inline;
}

#ITServices p {
    width: 280px;
    margin-left: 0px;
    padding: 0px;
    display: inline;
}

.navbar li:hover ul {
    left: 15px;
    top: 40px;
    background: #7FBA00;
    padding: 1px;
    width: 280px;
    border: none;
    text-align: left;
}

.navbar li:hover ul a {
    margin: -7px -10px -7px -15px;
    text-align: left;
    padding: 0px 0px 0px 10px;
    display: block;
    font-size: 11px;
    width: 259px;
    line-height: 25px;
    color: #000;
    background-color: #F0F0F0;
    text-decoration: none;
    border-left: 10px solid #7FBA00;
    border-bottom: 1px solid transparent;
    border-right: 1px solid transparent;
    border-top: 1px solid transparent;
}

.navbar li:hover ul a:hover {
    background: #7FBA00;
    border-left: solid 10px #fff;
    border-top: solid 1px #fff;
    border-bottom: solid 1px #fff;
    width: 260px;
}

Ahhh! Right? I’m trying to get it to all display in a list with basically line breaks after each li element. Help?

StarxStarx

Basically a rule is over-riding your style. display property called block makes an element to behave like a block element, thus covering full line.

Your use might be the following, so try this

li > ul li { display: block; }
Nabin Nepal (Starx) css navigation php slideshow
April 30, 2012

Simple slideshow with navigation overlay

Question by Willard

WillardWillard

I’m currently re-designing my portfolio site & I would like to use the best non-flash method possible to create the following slideshow shown in my layout:

http://oi49.tinypic.com/xeifeq.jpg

I would only have 3 slides or so in the show, and I would like to overlay left/right nav buttons as shown.

So how do I go about this?

Answer by Starx

StarxStarx

There are tons of options. With javascript libraries like jQuery, a lot of animations that needed flash once, can be easily done.

Try googling, jQuery Sliders

Nabin Nepal (Starx) jquery navigation
June 10, 2010

Jquery show div on hover then when user hovers out of div hide it help?

Question by user342391

user342391user342391

I have a menu and when I hover one of the links a div shows. I want the user to be able to hover over this div but when the user hovers out of the div (mouseout i think its called) I want it to hide.

Imagine a dropdown menu in css, the user hovers over the link and the sub nav is shown, when the user hovers out or away from the link and sub nav the sub nav dissapears. How can this be done with jquery???

this is what I have:

 $(document).ready(function(){
 //when user hovers over plans the mainnavbottom is shown
$(".plans").hover(
    function() {
    $(".mainnavbottom").show("fast");
  }, function(){
    $(".mainnavbottom").mouseout.hide("slow");
  });


 });

Answer by realshadow

realshadowrealshadow

Try something like this:

$('.mainnavbottom').bind('mouseenter mouseleave', function(event) {
    switch(event.type) {
        case 'mouseenter':
           // when user enters the div
           $(".mainnavbottom").show("fast");
        break;
        case 'mouseleave':
          // leaves
          $(".mainnavbottom").hide("slow");
        break;
    }
});

This code works particulary good if you want to append a div that has e.g. ajax loaded content, but it should very well work with your css menu.

Hope this helps

Answer by Starx

StarxStarx

Try

 $(document).ready(function(){
      //when user hovers over plans the mainnavbottom is shown
      $(".plans").mouseover(function() {
           $(".mainnavbottom").show("fast");
      }).mouseout(function(){
           $(".mainnavbottom").hide("slow");
      });    
 });
...

Please fill the form - I will response as fast as I can!