All geek questions in one place

Horizontal subnav CSS questions!

I try to make my subnav active when on the corresponding page, and trawl forums, etc. for days / weeks! I am completely new to CSS and would appreciate any help! I managed to activate the top C # navigation button current, but subnav should not. I know that I’m probably missing something really basic, but I just don’t understand! I would like it to work the same way as it did on www.forbes.com (I saw it on a different issue, I thought I was so close!) Any help would be great. thanks Rebecca

Please see CSS below .....

<style>
ul#topnav {
 margin: 0 ; padding: 0 ;
 float: left;
 width: 955;
 list-style: none;
 position: relative;
 font-size: 12px;
 background: url(images/testbut.jpg) repeat-x;
}
ul#topnav :hover {
 font-family:Arial, Helvetica, sans-serif; 
 font-size:12px; color: #CCCCCC;
}
ul#topnav li {
 float: left;
 margin: 0; padding: 0;
 border-right: 1px solid #ffffff; /*--Divider for each parent level links--*/
}
ul#topnav li a {
 padding: 10px 27.5px;
 display: block;
 color: #f0f0f0;
 background-image: url(images/testbut.jpg) repeat-x;
 text-decoration: none;
 font-family:Arial, Helvetica, sans-serif;
 font-size:12px;
} 
ul#topnav li span {
 float: left;
 padding: 10px 0;
 position: absolute;
 left: 0; top:35px;
 display: none; 
 width: 100%;
 color: #fff;
 /*--Bottom right rounded corner--*/
 -moz-border-radius-bottomright: 5px;
 -khtml-border-radius-bottomright: 5px;
 -webkit-border-bottom-right-radius: 5px;
 /*--Bottom left rounded corner--*/
 -moz-border-radius-bottomleft: 5px;
 -khtml-border-radius-bottomleft: 5px;
 -webkit-border-bottom-left-radius: 5px;
}
ul#topnav li:hover span { display: block; background: #6a6a6a url() repeat-x;} /*--Show subnav on hover--*/
ul#topnav li span a { display: inline;} 
ul#topnav li span a:hover { font-family:Arial, Helvetica, sans-serif; font-size:12px;}
ul#topnav a#current { background: #6a6a6a url() repeat-x;}
</style>
+1
source share
2 answers

, , Ive . , . Firefox 3.6, . , , - :hover Internet Explorer. - .

, , , Javascript IE - :hover , display: none:

Suckerfish
http://www.alistapart.com/articles/dropdowns

Suckerfish
http://www.htmldog.com/articles/suckerfish/

CSS:
http://www.456bereastreet.com/archive/200905/hiding_with_css_problems_and_solutions/

, . -, HTML. . , - . , CSS, .

, . , - 1-3, a span.

HTML . UL active:

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<link rel="stylesheet" type="text/css" href="test.css" media="screen" />
<title>Horizontal Menus</title>
</head>

<body>
    <div id="topnav">
        <ul>
            <li>Menu 1
                <ul class="active">
                    <li><a href="#">Page 1-1</a></li>
                    <li><a href="#">Page 1-2</a></li>
                    <li><a href="#">Page 1-3</a></li>
                    <li><a href="#">Page 1-4</a></li>
                </ul>
            </li>

            <li>Menu 2
                <ul>
                    <li><a href="#">Page 2-1</a></li>
                    <li><a href="#">Page 2-2</a></li>
                    <li><a href="#">Page 2-3</a></li>
                    <li><a href="#">Page 2-4</a></li>
                    <li><a href="#">Page 2-5</a></li>
                </ul>
            </li>
        </ul>
    </div>
</body>
</html>

CSS , . , - , . , :

/*
 * The contain DIV for the navigation menu.
 * Use this to position the menu on the page.
 */
#topnav {
    /*
     * Set the containing DIV position to
     * relative.  This allows the UL to be
     * positioned relative to this container.
     * See static, relative and absolute, here:
     * http://www.w3.org/TR/CSS2/visuren.html#choose-position
     */
    position: relative;
}

/*
 * All ULs (first and second level).
 */
#topnav ul {
    /*
     * Remove bullets from the UL.
     */
    list-style: none;
    /*
     * Zero margins and padding.
     */
    margin: 0;
    padding: 0;
    /* 
     * Take the UL out of the normal flows so
     * that it can be given absolute positioning
     * coordinates, relative to its containing
     * block (the #topnav DIV).
     */
    position: absolute;
    /*
     * Align the UL with the left of the #topnav DIV.
     */
    left: 0;
    /*
     * The list must be wide enough to enclose all
     * second level list items (5 x 10em).
     */
    width: 50em;
    /*
     * Give the UL height and a background colour.
     * This enables the UL that is activated during a
     * hover to mask the UL that is active.  See
     * the active and hover z-index settings.
     */
    height: 1.5em;
    background: #eeeeee;
}

/*
 * All LIs (first and second level).
 */
#topnav li {
    /*
     * Float the LIs left so that they all
     * appear on one line.
     */
    float: left;
    /*
     * Set the width of each LI.
     */
    width: 10em;
}

/*
 * Second level UL.
 */
#topnav ul ul {
    /*
     * Hide all second level LIs.
     * Set their position to absolute, then
     * move them left by 999em.
     */
    position: absolute;
    left: -999em;
}

/*
 * Second level UL.
 * Selected when first-level LI is hovered over,
 * or when first-level UI has the 'active' class.
 */
#topnav ul li:hover ul, #topnav ul ul.active {
    /*
     * Show active LIs.
     * Reset the left position to zero.
     */
    left: 0;
}

/*
 * Second level UL.
 * Selected when first-level LI is hovered over.
 */
#topnav ul li:hover ul {
    /*
     * Set the stacking level (z-index) so that it is
     * above the active UL.
     */ 
    z-index: 200;
    background: #cccccc;
}

/*
 * Second level UL.
 * Selected when first-level UI has the 'active' class.
 */
#topnav ul ul.active {
    /*
     * Set the stacking level (z-index) so that it is
     * below the UL that is displayed during hover.
     */ 
    z-index: 100;
    background: #aaaaaa;
}

!

+2

, / HTML

:

index.html

<ul>
<li class="active">Home page</li>
<li>Content Page</li>
<li>Contact Page</li>
</ul>

content.html

<ul>
<li>Home page</li>
<li class="active">Content Page</li>
<li>Contact Page</li>
</ul>

li{color: black;}
.active{color: red;}

, subnav , ul:

<ul>
   <li>
   <ul class="active">
      <li class="active"></li>
      <li></li>
   </ul>
   </li>
   <li>
   <ul>
      <li class="active"></li>
      <li></li>
   </ul>
   </li>
</ul>

, , , PHP.

0

Source: https://habr.com/ru/post/1754481/

More articles:


All Articles