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 8 of 8
  1. #1
    Regular Coder
    Join Date
    Jul 2005
    Posts
    120
    Thanks
    36
    Thanked 0 Times in 0 Posts

    replicate nav li a style

    Hi,

    Please see url: http://sample.backstageweb.net/. Click the nav buttons.

    I wanted the nav buttons to behave like this: http://backstageweb.net/newsite/

    I've got something a bit askew here.

    CODE:

    Code:
    #nav ul li:active a {
    	-webkit-border-radius: 20px;
    	-moz-border-radius: 20px;
    	border-radius: 20px;
    	background: #222;
    	color: #fff;
    	background: #ffffff; /* Old browsers */
    	background: -moz-linear-gradient(top,  #4c4c4c 3%, #333333 100%); /* FF3.6+ */
    	background: -webkit-gradient(linear, left top, left bottom, color-stop(3%,#4c4c4c), color-stop(100%,#333333)); /* Chrome,Safari4+ */
    	background: -webkit-linear-gradient(top,  #4c4c4c 3%,#333333 100%); /* Chrome10+,Safari5.1+ */
    	background: -o-linear-gradient(top,  #4c4c4c 3%,#333333 100%); /* Opera 11.10+ */
    	background: -ms-linear-gradient(top,  #4c4c4c 3%,#333333 100%); /* IE10+ */
    	background: linear-gradient(top,  #4c4c4c 3%,#333333 100%); /* W3C */
    	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4c4c4c', endColorstr='#333333',GradientType=0 ); /* IE6-9 */
    	border: none;
    }
    Can anyone straighten me out? Thanks.

  • #2
    Senior Coder
    Join Date
    Jan 2011
    Location
    Missouri
    Posts
    3,763
    Thanks
    23
    Thanked 548 Times in 547 Posts
    John, your anchors are asking for a page reload. You could use internal links
    Code:
    <a href="#place1">hello</a>
    The other site uses javascript, I guess cause it also changes the back ground image.
    Evolution - The non-random survival of random variants.

  • #3
    Regular Coder
    Join Date
    Jul 2005
    Posts
    120
    Thanks
    36
    Thanked 0 Times in 0 Posts
    sunfighter,

    I don't understand. I see what you're saying about the .js, but I think the .js simply controls the page scroll to various y points. That li:active a should be able to be done using pure CSS. - ?

  • #4
    Senior Coder
    Join Date
    Jan 2011
    Location
    Missouri
    Posts
    3,763
    Thanks
    23
    Thanked 548 Times in 547 Posts
    Your li:active a controls how your link looks. And your spot on with this.

    The anchor
    Code:
    <a href="http://sample.backstageweb.net/?page_id=34">Portfolio</a>
    contorls where your going when you click it. With 'Portfolio' your going to another page
    Code:
    http://sample.backstageweb.net/?page_id=34
    In the original site he goes to a place on the main page via js.

    If that's what you want to do, and that is the reason you have styled your link to look that good, you should not call another page, but use the link to go to a different part of your document so users can see your header with the beautiful link highlighted.

    I gave you <a href="#place1">hello</a> this will go down or up the page and display the page where <a name="place1"></a> is coded.

    A good example would be links to take you back to the top of the page.
    Last edited by sunfighter; 05-02-2013 at 03:42 PM.
    Evolution - The non-random survival of random variants.

  • #5
    Regular Coder
    Join Date
    Jul 2005
    Posts
    120
    Thanks
    36
    Thanked 0 Times in 0 Posts
    Sorry, I don't think I was clear in what I wanted to do.

    Your li:active a controls how your link looks. And your spot on with this.
    That's all I want to do. Forget the scrolling. Clicking the links will have the conventional behavior of going to another actual page.

    So, when I click the links now, the initial effect is displayed for a second, then disappears. I think I need a li:focus a, (?) but I don't know where to split up the styles between li:active a and li:focus a to get the original effect (like http://backstageweb.net/newsite/)

  • #6
    Regular Coder
    Join Date
    Mar 2013
    Posts
    262
    Thanks
    4
    Thanked 67 Times in 67 Posts
    The "correct" one uses jQuery for more than just scrolling. It controls the navigation too. It adds and removes the "active" class according to which link was clicked.

    Take a look at this section.

    Code:
    pageScroller.pageLinks.each(function(index){
    	$(this).bind('click', function(e){
    		e.preventDefault();
    		o.animationBefore();
    		// instantly update active state if not already animating
    		if(!pageScroller.scrollBody.is(':animated')){
    			pageScroller.pageLinks.parent('li').removeClass('active');
    			$(this).parent('li').addClass('active');
    		}
    		scrollPageTo(pageScroll, pageScroller.sections.eq(index), index);
    	});
    });
    The "e.preventDefault()" prevents the page from reloading.
    The "pageScroller.pageLinks.parent('li').removeClass('active');" removes the active class from all lists.
    The "$(this).parent('li').addClass('active');" adds the active class to the list that was clicked.
    My signature :)

  • #7
    Senior Coder
    Join Date
    Jan 2011
    Location
    Missouri
    Posts
    3,763
    Thanks
    23
    Thanked 548 Times in 547 Posts
    Quote Originally Posted by johndove View Post
    Sorry, I don't think I was clear in what I wanted to do.



    That's all I want to do. Forget the scrolling. Clicking the links will have the conventional behavior of going to another actual page.

    So, when I click the links now, the initial effect is displayed for a second, then disappears. I think I need a li:focus a, (?) but I don't know where to split up the styles between li:active a and li:focus a to get the original effect (like http://backstageweb.net/newsite/)
    When you go to another page what happen on the original page is of no matter. I think what you want to do is highlight the menu item of the page you go to.


    Code:
    #HiLite {
    	-webkit-border-radius: 20px;
    	-moz-border-radius: 20px;
    	border-radius: 20px;
    	background: #222;
    	color: #fff;
    	background: #ffffff; /* Old browsers */
    	background: -moz-linear-gradient(top,  #4c4c4c 3%, #333333 100%); /* FF3.6+ */
    	background: -webkit-gradient(linear, left top, left bottom, color-stop(3%,#4c4c4c), color-stop(100%,#333333)); /* Chrome,Safari4+ */
    	background: -webkit-linear-gradient(top,  #4c4c4c 3%,#333333 100%); /* Chrome10+,Safari5.1+ */
    	background: -o-linear-gradient(top,  #4c4c4c 3%,#333333 100%); /* Opera 11.10+ */
    	background: -ms-linear-gradient(top,  #4c4c4c 3%,#333333 100%); /* IE10+ */
    	background: linear-gradient(top,  #4c4c4c 3%,#333333 100%); /* W3C */
    	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4c4c4c', endColorstr='#333333',GradientType=0 ); /* IE6-9 */
    	border: none;
    }
    Then set it for each page. Lets say you click and go to page for Portfolio:
    Code:
    <li id="menu-item-42" class="menu-item menu-item-type-post_type menu-item-object-page current-menu-item page_item page-item-34 current_page_item menu-item-42"><a href="http://sample.backstageweb.net/?page_id=34" id="HiLite">Portfolio</a></li>

  • #8
    Regular Coder
    Join Date
    Jul 2005
    Posts
    120
    Thanks
    36
    Thanked 0 Times in 0 Posts
    <li id="menu-item-42" class="menu-item menu-item-type-post_type menu-item-object-page current-menu-item page_item page-item-34 current_page_item menu-item-42"><a href="http://sample.backstageweb.net/?page_id=34" id="HiLite">
    Man, that's some ugly code, but there are only four menu items. Look at the source code between the <head> tags (that's some massively bloated code). I'm using WP dynamic menus so I can't actually see the nav ul li items. Can you tell me how to implement?


  •  

    Posting Permissions

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