Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    Regular Coder
    Join Date
    Feb 2014
    Posts
    528
    Thanks
    84
    Thanked 0 Times in 0 Posts

    Adding link to Include file

    Hello

    I have this menu at the top of my Web page:

    -menu.jpg

    The code and links for the menu are part of an include file:

    Code:
     <nav>
        <!--#include virtual="../navMenu.html" -->
          </nav>
    The navMenu.html file looks like this:

    Code:
    <ul class="sf-menu" id="nav">
        <li class="selected"><a href="../index.aspx">Home</a></li>
        <li><a href="../portfolio.aspx">Portfolio</a></li>
        <li><a href="../twitter.aspx">Twitter</a></li>
        <li><a href="../contact.aspx">Contact</a></li>
    </ul>
    What I would like to do is introduce two more links to the left of the navigation bar for 'Register' and 'Log in' in the area of the orange
    square in the screenshot, so that they look something like this: Register | Login

    How would I do that, please?

  2. #2
    Administrator VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    11,342
    Thanks
    7
    Thanked 1,363 Times in 1,332 Posts
    I’d probably create a separate list for that, put it after the navigation list, give it its own ID or class name and then move it to the right place using CSS.

  3. #3
    Regular Coder
    Join Date
    Feb 2014
    Posts
    528
    Thanks
    84
    Thanked 0 Times in 0 Posts
    That sounds sensible - thanks VIP Stefan

  4. #4
    Senior Coder deathshadow's Avatar
    Join Date
    Feb 2016
    Location
    Keene, NH
    Posts
    3,576
    Thanks
    5
    Thanked 517 Times in 504 Posts
    See, I would NOT make that a separate list. It's the main menu and as such a single list of options.

    I'd just add class="alternate"... though is "sf-menu" the old suckerfish nonsense? Yeah, we don't use JavaScript for that anymore.

    Code:
    <ul id="mainMenu">
    	<li class="alternate"><a href="#login">Login</a></li>
    	<li class="alternate"><a href="#register">Register</a></li>
    	<li><a href="index.aspx"><em>Home</em></a></li>
    	<li><a href="portfolio.aspx">Portfolio</a></li>
    	<li><a href="twitter.aspx">Twitter</a></li>
    	<li><a href="contact.aspx">Contact</a></li>
    </ul>
    Using <em>phasis to mark the current one is a quick and easy way that will imply some sort of meaning, even for non-"screen media" CSS users. You don't like the default italic appearance, turn it off in the stylesheet and do something else.

    Code:
    #mainMenu {
    	list-style:none;
    	text-align:right;
    	background:#0CC; /* or whatever cyan that is */
    	border-radius:0.5em 0.5em 0 0;
    }
    
    #mainMenu li {
    	display:inline;
    }
    
    #mainMenu li.alternate {
    	float:left;
    }
    
    #mainMenu li a {
    	display:inline-block;
    	padding:0.5em;
    	text-decoration:none;
    	vertical-align:top;
    	color:#000;
    }
    Float the left ones, let text-align handle the right-side ones. Probably center better vertically that way too, though that depends on your line-height.
    “There are two ways of constructing a software design: One way is to make it so simple that there are obviously no deficiencies and the other way is to make it so complicated that there are no obvious deficiencies.” – C.A.R. Hoare, The 1980 ACM Turing Award Lecture
    http://www.cutcodedown.com


 

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •