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.
Page 1 of 2 12 LastLast
Results 1 to 15 of 16

Thread: CSS Navigation

  1. #1
    Regular Coder saeed's Avatar
    Join Date
    Oct 2002
    Location
    West Yorkshire
    Posts
    343
    Thanks
    32
    Thanked 0 Times in 0 Posts

    CSS Navigation

    well... I did some modification in someone script ... and create an image... now everything is working fine... except active link...

    Please see this website

    now wht i want is when the link is active... it should show just like when hover but with NO link on it.

    here is the css.

    Code:
    body {
    	font-family: Verdana, Arial, Helvetica, sans-serif;
    	margin: 0;
    	font-size: 10pt;
    	background: #FFF;
    	}
    
    h2 {
    	font: bold 14px Verdana, Arial, Helvetica, sans-serif;
    	color: #000;
    	margin: 0px;
    	padding: 0px 0px 0px 15px;
    }
    	
    ul {
    	list-style: none;
    	margin: 0;
    	padding: 0;
    	}
    
    img {
        border: none;
    } 
    
    #menu2 {
    	width: 150px;
    	margin: 10px;
    	border-style: solid solid none solid;
    	border-color: #ffffff;
    	border-size: 1px;
    	border-width: 1px;
    	}
    	
    #menu2 li a {
    	height: 30px;
      	voice-family: "\"}\""; 
      	voice-family: inherit;
      	height: 22px;
    	text-decoration: none;
    	}	
    	
    #menu2 li a:link, #menu2 li a:visited {
    	color: #0000cc;
    	display: block;
    	background:  url('concept2.gif');
    	padding-left:20px; padding-right:0; padding-top:8px; padding-bottom:0
    	}
    	
    #menu2 li a:hover {
    	color: #000000;
    	background:  url('concept2.gif') 0 -30px;
    	padding-left:20px; padding-right:0; padding-top:8px; padding-bottom:0
    	}
    Thanks,

    Saeed.
    Don't click on this!

    #!/usr/bin/saeed

  • #2
    Senior Coder ahallicks's Avatar
    Join Date
    May 2006
    Location
    Lancaster, UK
    Posts
    1,134
    Thanks
    1
    Thanked 57 Times in 55 Posts
    If you have php enabled on your server, it's probably the best way to go:

    http://bonrouge.com/br.php?page=current

    If you look down in the comments there is a post by Marion that shows how to do it and getting rid of the link on that active page too
    Last edited by ahallicks; 09-12-2007 at 09:04 AM.
    "write it for FireFox then hack it for IE."
    Quote Originally Posted by Mhtml View Post
    Domains are like women - all the good ones are taken unless you want one from some foreign country.
    Reputation is your friend

    Development & SEO Tools

  • Users who have thanked ahallicks for this post:

    twodayslate (09-12-2007)

  • #3
    Regular Coder saeed's Avatar
    Join Date
    Oct 2002
    Location
    West Yorkshire
    Posts
    343
    Thanks
    32
    Thanked 0 Times in 0 Posts
    thanks for ur reply..

    I've gone through the link u provide... its really confusing ...

    I believe tht can be done .. but adding one more tag in CSS 'active' whose properties are set to

    color: #000000;
    background: url('concept2.gif') 0 -30px;
    padding-left:20px; padding-right:0; padding-top:8px; padding-bottom:0

    but I dont know how to disable link on active page. Plus I want image to be still even at mouse out event. (when it shows on hover).

    Don't click on this!

    #!/usr/bin/saeed

  • #4
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,852
    Thanks
    160
    Thanked 2,223 Times in 2,210 Posts
    Blog Entries
    1
    If you can run server-side script in you page, you can generate the code for the menu without a link.

    Hope you are using the same code for menu in all your pages. Then for instance, if you are in about.htm, declare a variable at the top of you page like $page='about';

    Then your code for list will should be something like

    Code:
    <ul>
        <?
    	if($page=='about')
    	  {
    	  ?>
    	  <li><a href="#">About Me</a></li>
    	  <?
    	  }
    	  else
    	  {
    	  ?>
    	  <li><a href="aboutme.html">About Me</a></li>
    	  <?
    	  }	    
       ?>
    </ul>
    You can reduce the number of php tags with the help of echo.
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #5
    Regular Coder saeed's Avatar
    Join Date
    Oct 2002
    Location
    West Yorkshire
    Posts
    343
    Thanks
    32
    Thanked 0 Times in 0 Posts
    am sorry guys ... but dont want to use PHP on any other language. for tht i've to install PHP and it will a headache for me cause of limited info about it.

    So it cant be done through CSS ??


    Saeed.
    Don't click on this!

    #!/usr/bin/saeed

  • #6
    Senior Coder ahallicks's Avatar
    Join Date
    May 2006
    Location
    Lancaster, UK
    Posts
    1,134
    Thanks
    1
    Thanked 57 Times in 55 Posts
    You will not be able to stop a link from being a link on the active page in CSS, no. The only way to do it is with the Server Side Scripting shown above, or by having a separate menu on eahc page where the page you are on has the link removed.
    "write it for FireFox then hack it for IE."
    Quote Originally Posted by Mhtml View Post
    Domains are like women - all the good ones are taken unless you want one from some foreign country.
    Reputation is your friend

    Development & SEO Tools

  • #7
    Regular Coder saeed's Avatar
    Join Date
    Oct 2002
    Location
    West Yorkshire
    Posts
    343
    Thanks
    32
    Thanked 0 Times in 0 Posts
    I've seen on web... i think .. am missing something ... or you're not getting the idea.. here is the screen shot of sample result.

    I am on Current Projects webpage... see current project on ur left. there is no clickable link when u're on the same page. Plus hover will only available for rest of the links and image will be exactly as shown in screen shot.

    Saeed.
    Don't click on this!

    #!/usr/bin/saeed

  • #8
    Regular Coder saeed's Avatar
    Join Date
    Oct 2002
    Location
    West Yorkshire
    Posts
    343
    Thanks
    32
    Thanked 0 Times in 0 Posts
    sorry tht link isnt working ... see the attach screen shot.
    Last edited by saeed; 03-13-2009 at 09:53 AM.
    Don't click on this!

    #!/usr/bin/saeed

  • #9
    Senior Coder ahallicks's Avatar
    Join Date
    May 2006
    Location
    Lancaster, UK
    Posts
    1,134
    Thanks
    1
    Thanked 57 Times in 55 Posts
    If I understand correctly you want the link to the current page to be highlighted as though it were being hovered over, correct? And you also don't want the link to be clickable on the page that you are currently on, correct again?

    Here is a CSS method for doing the first of these:

    http://bonrouge.com/~currentcss

    but, as for the second you can't physically do that with CSS because it is used for styling only, and not the sort of dynamic content stuff you are asking. That would be down to some kind of server side script or a separate menu on each page where you have just taken the link out as I said above.
    "write it for FireFox then hack it for IE."
    Quote Originally Posted by Mhtml View Post
    Domains are like women - all the good ones are taken unless you want one from some foreign country.
    Reputation is your friend

    Development & SEO Tools

  • #10
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,852
    Thanks
    160
    Thanked 2,223 Times in 2,210 Posts
    Blog Entries
    1
    You can change the href property of a link by Javascript, though it won't work when someone disable Javascript in their browser.

    Give id property for all your <a> tags with some suitable value.
    Then call a function in the onload event of each page like

    Code:
    <a href='about.htm' id='about'>About</a>
    Code:
    function removeLink()
    {
      var page= window.location.href;
      switch(page)
      {
        case 'about.htm':
                               document.getElementById('about').href='#';
                               break;
       case ''.............................
          .............................
      }
    
    }
    window.onload = removeLink;
    Last edited by abduraooft; 09-12-2007 at 02:06 PM. Reason: error pointed out by ahallicks :)
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #11
    Senior Coder ahallicks's Avatar
    Join Date
    May 2006
    Location
    Lancaster, UK
    Posts
    1,134
    Thanks
    1
    Thanked 57 Times in 55 Posts
    And by loaction you mean location, right!?
    "write it for FireFox then hack it for IE."
    Quote Originally Posted by Mhtml View Post
    Domains are like women - all the good ones are taken unless you want one from some foreign country.
    Reputation is your friend

    Development & SEO Tools

  • #12
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,852
    Thanks
    160
    Thanked 2,223 Times in 2,210 Posts
    Blog Entries
    1
    Quote Originally Posted by ahallicks View Post
    And by loaction you mean location, right!?
    Ha.. thanks, DreamWeaver is not capable of realizing my Dreamzz...
    well, any good Javascript editor that can highlight syntactic errors?
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #13
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    Quote Originally Posted by abduraooft View Post
    Ha.. thanks, DreamWeaver is not capable of realizing my Dreamzz...
    well, any good Javascript editor that can highlight syntactic errors?
    It may not always be an error though. You could have a frame named "loaction"

    Best thing to do is just test your scripts in Firefox and read what the error console tells you. Firebug for firefox might be something to look into.
    ||||If you are getting paid to do a job, don't ask for help on it!||||

  • #14
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,852
    Thanks
    160
    Thanked 2,223 Times in 2,210 Posts
    Blog Entries
    1
    Hmm.. I use that method, but didn't tested the last one.
    Just asking whether there is something works like DreamWeaver's Ctrl+Space combination?
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #15
    Regular Coder saeed's Avatar
    Join Date
    Oct 2002
    Location
    West Yorkshire
    Posts
    343
    Thanks
    32
    Thanked 0 Times in 0 Posts
    well... this is what i did ...

    http://www.saeednagaria.net/navbar/index.html

    and its working the way i want ... apart from removing the link from active page.

    Don't click on this!

    #!/usr/bin/saeed


  •  
    Page 1 of 2 12 LastLast

    Posting Permissions

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