Skip to content

Instantly share code, notes, and snippets.

@cnocon
Created January 27, 2013 11:43
Show Gist options
  • Save cnocon/4647997 to your computer and use it in GitHub Desktop.
Save cnocon/4647997 to your computer and use it in GitHub Desktop.
A CodePen by Cristin O'Connor. Style only certain words with jQuery - I had to do this for a recent site cut I did. I borrowed from Chris Coyier but lightened up the code a bit for my purposes.
<div class="beta">
<nav id="nav" class="site-nav" role="navigation">
<ul class="depth_1">
<li class="first" id="nav_41633"><a href="/about-rop/">About ROP</a></li>
<li id="nav_41635"><a href="/editorial-advisory-board/">Editorial Advisory Board</a></li>
<li id="nav_41636"><a href="/editors-and-staff/">Editors and Staff</a></li>
<li id="nav_41637"><a href="/submit-a-manuscript/">Submit a Manuscript</a></li>
<li id="nav_41638"><a href="/book-reviews/">Book Reviews</a></li>
<li id="nav_41639"><a href="/subscriptions/">Subscriptions</a></li>
<li id="nav_41640"><a href="/back-issues-and-archives/">Back Issues and Archives</a></li>
<li id="nav_41643"><a href="/rop-perspectives/">ROP Perspectives</a></li>
<li class="last" id="nav_41644"><a href="/permissions-and-advertising/">Permissions and Advertising</a></li>
</ul>
</nav>
</div> <!-- .beta -->
$(document).ready(function() {
$('#nav a, .page-title').each(function() {
var words = $(this).text().split(' ');
$(this).empty().html(function() {
for (i = 0; i < words.length; i++) {
if (words[i] == 'and' || words[i] == 'a' || words[i] == 'in' || words[i] == 'the' || words[i] == 'of' || words[i] == 'ROP') {
if (words[i] == 'ROP') {
$(this).append('<i class="rop"> ' + words[i] + '</i>');
} else {
$(this).append('<i> ' + words[i] + '</i>');
}
} else {
$(this).append(' ' + words[i]);
}
}
});
});
});
.beta {display:block; border-radius:2px; width:35%}
.site-nav .depth_1 {list-style:none; background:#e1d99b;}
.site-nav .depth_1 li {margin:0;}
.site-nav .depth_1 a {display:block; padding:.7em .9em; line-height:1em; text-decoration:none; text-transform:uppercase; font-family: Futura, "Trebuchet MS", Arial, sans-serif; color:#10447c; border-bottom:none;}
.site-nav .depth_1 a i {text-transform:lowercase; font-style:italic; font-weight:bold; font-family: TimesNewRoman, "Times New Roman", Times, Baskerville, Georgia, serif; font-size:.95em;}
.site-nav .depth_1 a .rop {text-transform:uppercase; font-weight:normal; font-size:1.0526315789em; font-family: Futura, "Trebuchet MS", Arial, sans-serif;}
.site-nav .depth_1 a:hover {color:#10447c; background:#d8d092;}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment